価値ある未来を、ご一緒に。
投稿者: j-land
Bootstrap4のハンバーガーメニューの色を変える方法
ホームページによっては、ハンバーガーメニューの色や枠線などを変更したい場合がありますので、やり方をメモします。
基本、ハンバーガーメニューのclassのCSSを変更すれば上手く変更出来ます。
ハンバーガーメニューの枠線、を変更する
class .navbar-toggler を設定します。
.navbar-toggler{
border-color: #ffffff;
}ハンバーガーメニューの背景色を変更する
枠線と同様にclass .navbar-toggler を設定します。
.navbar-toggler{
background-color: #000000;
}ハンバーガーメニューの三本線を変更する
枠の中の三本線のイメージは、SVG background-imageで描画しているので、ここを変更します。rgba形式で設定。
.navbar-toggler .navbar-toggler-icon {
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255,1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}
合成写真をすばやく自然に仕上げる方法
フォトショップで切り抜いた画像（人物など）を合成の背景に上手くなじませる方法になります。このひと手間がクオリティの高い作業になります。
選択範囲の境界線を調整する
切り抜いた画像の背景色が合成先の背景色と著しく異なる場合、合成後に切り抜きの境界線が目立ってしまうことがあります。その場合、境界線（エッジ）を調整しておく必要があります。
オプションバーの「選択とマスク」をクリックすると、専用のインターフェイスに切り替わります。画面右の属性パネルの「エッジをシフト」で、スライダーを「−100%」までドラッグし、選択範囲の境界線を内側にします。調整ができたら、「OK」をクリックします。
マスクを作成し、新しい背景と合成する
元の編集画面に戻ったら、レイヤーパネル下部の「レイヤーマスク」ボタンをクリックします。マスクが作成され、人物以外の背景が消えて、下のレイヤーが表示されます。これで、人物と新しい背景が合成されました。
2つのレイヤー画像は、それぞれ異なる環境で撮影された写真のため、どうしても色味に違和感があります。つぎのステップで、色味を合わせていきましょう。
2つのレイヤーの色味を均一化する
レイヤーパネルで「New Background」レイヤーを選択し、Altキー（Windows）またはOptionキー（Mac）を押しながら、「Model 」レイヤーの上にドラッグします。
複製された「New Backgroundのコピー」を選択した状態で、「フィルター」→「ぼかし」→「平均」を選択すると、画像全体が緑色に変わります。
「New Backgroundのコピー」レイヤーと「Model」レイヤーの間を、Altキー（Windows）またはOptionキー（Mac）を押しながらクリックすると、クリッピングマスクが作成され、人物が緑色に塗りつぶされます。
レイヤーパネルの描画モードをクリックし、ドロップダウンメニューから「ソフトライト」を選択します。人物の画像が緑がかり、背景の色味に近づきました。すこし緑が強いので、不透明度を「45%」に減らして調整します。
カラー効果を追加して全体を仕上げる
最後にもう一つ、カラー効果を適用して全体を仕上げます。レイヤーパネル下部の「塗りつぶしまたは調整レイヤーを作成」ボタンをクリックし、ドロップダウンメニューから「べた塗り」を選択します。カラーピッカーが表示されるので、紺色（♯080c56）を指定します。
レイヤーパネルで、描画モードを「ソフトライト」に設定し、さらに不透明度を50％に減らして調整します。合成色の明暗がはっきりとし、印象的な画像に仕上がりました。
いかがでしたか。「被写体の選択」機能を使えば、面倒な画像の切り抜き作業が、驚くほど簡単になります。さらにこのチュートリアルでは、合成画像をより自然に、そして見栄えよく仕上げるための様々なテクニックをご紹介しました。ぜひ、日々の作業にお役立てください。
参考サイト： 合成写真をすばやく自然に仕上げる方法
funcution.phpに「the_excerpt()」の抜粋の文字数を変える記述を書いても「110文字」勝手に抜粋されてしまったので調べてみました。
funcution.phpに「the_excerpt()」の抜粋の文字数を変える記述を書いても「110文字」勝手に抜粋されてしまったので調べてみました。
「WP Multibyte Patch」プラグインが原因
wordpressを日本語環境に対応させるプラグイン「WP Multibyte Patch」が入ってるとうまくいかないみたいです。 ですので、add_filterの部分に「excerpt_mblength」を設定する必要性があります。
function my_excerpt_length($length) {
return 60;
}
add_filter('excerpt_mblength', 'my_excerpt_length');これで、抜粋が反映します。
投稿ページだけアイキャッチを非表示
このテンプレートの場合、よく使う「display: none」で画像を非表示にすると、他のページ（カテゴリーページ）などもアイキャッチが消えてしまいますので、下記の条件分で指示するように設定します。
.featured-image-class {
display: none !important;
}wp-bootstrap-starterの場合
wp-bootstrap-starterの場合は、「template-parts」→「content.php」の中を修正します。下記のコードを条件分のコードで囲む感じになります。
<div class="post-thumbnail">
<?php the_post_thumbnail(); ?>
</div> この部分を編集
↓
<?php if ( !is_single() ) : ?>
<div class="post-thumbnail">
<?php the_post_thumbnail(); ?>
</div>
<?php endif; ?>こちらの「!is_single」で囲いシングルページのみ非表示に指令します。
プラグインなしでWordPressでウィジェットエリアを追加する方法
ほとんどのWordPressのテーマには、あらかじめいくつかウィジェットのエリアが設定されています。
ですが、もともとあるウィジェットエリア以外に自分で新しくウィジェットエリアを追加したいことってありませんか？
たとえばもともとウィジェットエリアがない場所に、アフリエイト用バナースペースを設置したい場合などが考えられると思います。
メイン画像の大きさを変える方法
通常「外観」→「カスタマイズ」→「Hedader Banner」→「新規画像を追加」→「メディアライブラリー」の画像を選択してメイン画像を変更する場合が多いが表示サイズが小さく画像がボケてしまうことがあります。
対処方は「custom-header.php」に書かれている、デフォルトのサイズ（1000px×200px）などを変更します。
custom-header.php の場所
「custom-header.php」 の場所は「テーマフォルダ」→「inc」→「 custom-header.php 」にあります。一様念のため、親テーマと子テーマを好みのサイズに変更します。
後は、通常通りのアップロードをすれば、Wordpressに反映します。
用紙の位置(ページ分割)をアートボードにぴったり合わせる方法
WordPressアイキャッチ画像のサイズを確認する方法
WordPressのテーマごとにアイキャッチ画像のサイズが異なる
WordPressのテーマではアイキャッチ画像がテーマごとに画像サイズが規定されているのです。
そのため「よし、アイキャッチ画像はこれだ！」と適当に画像を設定すると、端が切れて表示されてしまって、画像を再編集するという悲劇が容易に起こり得ます。
WordPressのテーマごとに異なるアイキャッチ画像のサイズを確認する方法を勉強しながらまとめてみました。
WordPressのアイキャッチ画像のサイズの基本
まず、アイキャッチの基本から。WordPressでは「functions.php」というファイルの中の
- set_post_thumbnail_size()
- add_image_size()
という2つの関数がアイキャッチ画像のサイズを決めているのです。
じゃあ、この2つの関数はどう違うのか？というと、
set_post_thumbnail_size()は「デフォルトのアイキャッチ画像のサイズ」を設定しており、
add_image_size()は「デフォルト以外の新しいアイキャッチ画像のサイズ」を決めています。
この「新しいアイキャッチ画像のサイズ」とは、
- トップページの記事一覧のためのサムネイル
- サイドバーのサムネイル
など、記事内のアイキャッチ画像（デフォルトサイズ）以外の異なるアイキャッチ画像のことです。
アイキャッチを掲載する箇所によってサイズを変えたいときありますもんね。
これがWordPressのアイキャッチ画像の基本。
WordPressのアイキャッチ画像のサイズを確認する方法
この基本を踏まえると、アイキャッチ画像のサイズを確認する方法は次の3つのステップでいけます。
1・functions.phpを開く
アイキャッチ画像のサイズを規定しているファイル「functions.php」を開きましょう。
アイキャッチ画像のサイズを変更せず確認するだけですので、WordPress管理画面からテーマ＞テーマの編集からfunctions.phpと進めばオッケーです。
2・「set_post_thumbnail_size」を探す
functions.phpの中から「set_post_thumbnail_size」という記述を探します。
Ctl + Fを使うなりして、ファイルの中にある「set_post_thumbnail_size」という記述を見つけましょう。
set_post_thumbnail_sizeは
set_post_thumbnail_size( 幅, 高さ, 切り抜きする？ )
という使い方をします。
set_post_thumbnail_size( 840, 560, true );
となっていたら、
- 幅：840ピクセル
- 高さ：560ピクセル
- 切り抜きする
ということになりますね。
WEBサイト改善の【思考的】なポイント
WEBサイト改善の【思考的】なポイント
1・ひと目でメリットを分かりやすく、シンプルに伝える
サイトへ訪問した際のユーザーの第1印象は非常に重要です。
ファーストビューで何のサイトか分からない。ここで何が得られるか分からない。あまり他の会社と変わらなそうだ・・・と感じた場合は、ユーザーは「ここだけでは自分で情報を探さないといけない」と感じます。
この場合、そのサイトをその後も見ようと思うでしょうか？
ユーザーは忙しい中、一つひとつのサイトを吟味したいとは思っていません。できる限り手間をかけずに情報を得たいのです。そのため、ファーストビューへの期待値は非常に大きいのです。
あくまでも目安ですが、サイトの直帰率は平均で40％弱。そう示しているデータもあります。
ひと目で期待を持たせ、次のページへアクセスもしくはページの下にスクロールしようと思わせることが重要です。
ひと目でサービスメリットをユーザーに伝えられていますか？そうでなければ改めてサイトを見直し、改善の糸口を掴みましょう。
2・ユーザーのYes！ Butの心理に対応する
サイトを訪れるユーザーは基本的に疑い深く、欲張りです。何か良い商品を得られても、あれやこれやと粗探しをするものです。
例えば、安さを重視していたユーザーが商品、サービスの安さに納得をしても「とはいえ、安さ以外ないのかな？」「安かろう悪かろうは嫌だな」と感じることがあります。
実は、サイトもそのような心理で周遊されているのです。
そのため、メインの訴求に納得したユーザーに対しても、次に気になりそうなことを打ち出し、不安を潰していきましょう。そうしなければ、最初の訴求をユーザーは忘れてしまい、離脱につながってしまいます。
あなたのサイトはYes！ BUTに対応できていますか？最初の訴求と、その後の対策について考えてみてください。
3・ストーリーを構成する。繋げる
前述の通り、ユーザーはサイトの訴求を一つひとつ疑ってかかります。面倒くさがりである反面、非常にシビアです。
そのため、伝えたいことはバラバラに配置せず、しっかりとストーリーとして繋げることがポイントです。
せっかく良いことを言っていても、各コンテンツがバラバラで繋がりがなければユーザーにはイメージ通りには伝わらず、もやもやしたまま離脱してしまう懸念が生じます。
ユーザーにとって情報がストーリーになっておらず、探す必要があることは離脱の要因になるのです。
コンテンツはしっかりと繋げることが重要です。ストーリーにすることで、ユーザーの頭の中のもやもやを、ひとつ一つ消化することができます。
下記のように、ランディングページはストーリーを伝えやすいので、火急の場合は、まずランディングページを作ってみることをおすすめします。
4・良いことだけではなくて、悪いことも伝える
ユーザーは良いことばかり言っているサイトは信用しません。
あなたも「あれもいい。これもいい」と良いことばかり、私たち広告代理店から提案された場合、何か隠しているのでは？ ちょっと胡散臭い、と思われるのではないでしょうか。
ユーザーも同じ心理です。怪しい、騙されるという心理になります。
特にサイトでは対面のように「デメリットは何か」と聞くハードルが高いため、なおさらその傾向が強いと思われます。
あなたのサイト良いことしか言っていないのであれば、逆にネガティブなポイントを考えましょう。そして、あえてネガティブなポイントを、サイト上でさらけ出しましょう。
ただ、ネガティブといってもカウンターとしてポジティブに変えられる内容を一つ選んで下さい。なにもかもを伝える必要はありません。
ネガティブなことをさらけ出すことが心理的なハードルを下げ、ユーザーがゴールに辿り着く一助になるのです。
5・事例を活用する
こちらからどれだけ良いメッセージを伝え、ネガティブな点をさらけ出しても、一定のユーザーはこう思うものです。
「言うことだけなら誰でもできる」
「そもそもホントなの？」
そこに対して反論できるのは第3者の意見です。実際にサービスを受けた、商品を購入したユーザーの声を活用するのです。
この際、できる限り顔写真、お名前、実際のお手紙などリアリティを与えることがポイントです。
お客様の声を活用をすることは、ユーザーに具体的なサービスのイメージを与え、不安を取り除きます。
5・Q&Aを活用する
コンバージョン率を改善するポイントの最後は「Q&Aを活用する」です。
伝えたい内容、ユーザーの懸念の払拭・・・
それらをストーリーとして繋げられないものや、どうしても言いたいけど枠に収まらないものもあると思います。そういった際はQ&Aとして最後にまとめてしまいましょう。「それでも不安なあなたへ」という感じです。
Q&Aはただ単にページとして内容を羅列しておけばよいわけではなく、ストーリーの導線上に設置する、場合によっては内容も導線ごとに変え、意識的に活用することがポイントです。
6・改善を続けるにはサイト訪問者の行動を把握しましょう
WEB施策の成果を継続的に高めていくには、貴社ユーザがWEBサイト上でどのような行動をとっているのかを把握することが重要です。勘や経験だけに頼っていると、盛大に空振ったり、効果が不明確になったりと、継続的に改善を行うことが難しい状態に陥ってしまいます。
- ヘビーユーザや特定商品を購入したユーザは、どのような行動をとっているのか？
- ほかのユーザと何が違うのか？
などの情報をもとに効果的な改善を行いましょう。
7・サイト改善こそが、webマーケティング成功のカギ
商品を変えたり、わざわざ大規模なキャンペーンを行ったり、値引きをしたりしなくてもサイト経由の成果を改善することは可能です。
まずは簡単にできることからチャレンジしてみて下さい。
なお、本記事でお伝えした内容は、どんな業種でも、どんな構造のサイトでも言えることです。