どうも、「きにぶろぐ.com」の自由に憧れるフリーマン(@free_manJJ)です。
グローバルメニューとは、ヘッダーやフッターに指定した「固定ページ」や「投稿ページ」を表示させることができるメニュー領域です。
特にヘッダー部分は人目に触れやすい場所なので、メニューを設置することでアクセスアップにも影響します。
ワードプレスの「STINGER8」では、テンプレート機能を使用してグローバルメニューを色々とカスタマイズすることができます。
ただし、メニューの色や文字色、メニューリストを中央に寄せたりといった詳細な設定は、スタイルシートでCSSコードを編集する必要があります。
CSSを編集するのは難しくて苦手、と感じている方も多いと思います。
そこで今回はCSSコードをコピペするだけで、簡単にグローバルメニューをカスタマイズして最適化する方法をご紹介します。
コピペだけでグローバルメニューをカスタマイズ
STINGER8でカスタマイズしていない状態のグローバルメニューは以下のようになります。
またカーソルがホバーした時は、文字が赤色に変化するように設定されています。
このメニュー部分をCSSコードを使ってカスタマイズしていきます。
コピペに使うコードはSTINGER8の「スタイルシート(style.css)」に追記して下さい。
ブログやサイトにCSSコードが反映されない場合は、一度キャッシュの削除(閲覧履歴の削除)を行ってから再度更新して確認して下さい。
メニュー項目を中央寄せにする
グローバルメニュー内の項目が基本的に左寄せになっているので、左右均等にする為に以下のコードをstyle.cssに追加します。
/*-- グローバルメニュー項目の中央寄せ --*/
#st-menuwide{
display: flex;
}
設定を更新して反映されればメニューが中央に移動しています。
メニューが中央に移動したことで、左右のバランスが良くなりました。
グローバルメニューの背景色を変更する
グローバルメニューの背景色は薄い灰色？グレー？となっていて、ブログ全体の背景色と同化している為、わかりにくいので以下のコードで目立つように変更します。
/*-- グローバルメニューの背景色 --*/
#st-menubox{
background-color: #9acd32;
}
「#9acd32」が色コードになっているので、好きな配色に変更して使用して下さい。
配色を変更したことでグローバルメニューとして認識しやすくなりました。
グローバルメニューの文字色を変更する
グローバルメニューの文字色は、デフォルトでブラックに設定されています。
このままでもいいですが、背景色の組み合わせによってはブラックでは見えづらくなる場合もあるので、その時は以下のコードで配色を調整できます。
/*-- グローバルメニューの文字色 --*/
header .smanone ul.menu li a{
color: #0000ff;
}
「#0000ff」の部分を変更してお好みの色コードをお使い下さい。
ここでは青色を使用してみましたが、これはこれでいいのではないでしょうか。
カーソルホバー時のグローバルメニュー背景色
カーソルを合わせた時(ホバーした時)のグローバルメニュー背景色を変更できます。
デフォルト状態では透明の設定になっているので、メニュー項目の選択をより認識してもらいやすくする為に以下のコードを追記します。
/*-- グローバルメニューのホバー時の背景色 --*/
#st-menubox a:hover{
background: #2f4f4f;
}
「#2f4f4f」の色コードを変更して最適な配色に調整しましょう。
ほぼ黒に近い配色にしたことで、どのメニューを選択しているかが一目でわかるようになりました。
カーソルホバー時のグローバルメニュー文字色
カーソルを合わせた時(ホバーした時)のグローバルメニュー文字色を変更できます。
初期設定のままでは赤色が使用されている為、変更したホバー時の背景色と少し相性が良くないので、以下のコードで文字色を変更します。
/*-- グローバルメニューのホバー時の文字色 --*/
header .smanone ul.menu li a:hover{
color: #ffffff;
}
「#ffffff」を任意の色コードにして最適な配色を選びましょう。
ホバー時の背景色が黒に近い色なので、文字色は対象的な色にして文字がより強調されるように調整しました。
これでひとまずグローバルメニューの最適化は完了です。
色コードを詳しく知りたい方は、「原色大辞典」などの色コード専門サイトを参考にして利用していきましょう。
カスタマイズ番外編
最適化は完了したがもっと詳細な調整をしてみたいという方は、ここで紹介するカスタマイズも参考にして下さい。
背景色をメニュー幅に合わせる
横幅一杯になっているグローバルメニューの背景色を、メニュー幅に合わせることができます。
背景色はすでに「#st-menubox」で設定していますが、「background-color」の部分を文字色のCSSコードの方に追記します。
/*-- グローバルメニューの文字色 --*/
header .smanone ul.menu li a{
color: #0000ff;
background-color: #9acd32;
}
これで背景色をメニューの幅に合わせることができます。
グローバルメニューの枠線を削除する
上記の設定ではグローバルメニューの枠線が残っている状態なので、必要なければ以下のコードを背景色の「#st-menubox」内に追加します。
/*-- グローバルメニューの背景色 --*/
#st-menubox {
border: none;
}
これでメニュー上下の枠線がなくなって、スッキリしたグローバルメニューになりました。
メニュー周辺の余白を調節する
デフォルトではメニュー下の余白が少し空いている状態ですが、もっと余白を広げたい場合は以下のコードを背景色の「#st-menubox」内に追記して下さい。
/*-- グローバルメニュー下の間隔調節 --*/
margin: 0px 0px 30px 0px;
メニューの余白は下方向だけでなく上下左右の調節が可能で、「margin」内の左から「上数値・右数値・下数値・左数値」となっています。
後は変更したい方向の数値をお好みで変更しましょう。
メニュー幅を自動調整にする
ブログコンテンツ増加によってメニュー項目が増えてきた時に、通常だと６項目までしか１列に収まりきらない設定になっています。
これをメニュー幅の自動調整によって１列に収める為に以下のコードを追記します。
/*-- メニュー幅の自動調整 --*/
header .smanone ul.menu {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
メニューが１列に収まって綺麗に表示できるようになりました。
グローバルメニューのカスタマイズまとめ
今回番外編も含めてご紹介した完成系のCSSコードを、よりわかりやすく全てまとめたものが以下のコードになります。
/*-- グローバルメニュー --*/
#st-menuwide{
display: flex;/*中央寄せ*/
}
#st-menubox{
border: none;/*枠線の削除*/
margin: 0px 0px 30px 0px;/*余白の調節*/
}
header .smanone ul.menu li a{
background-color: #9acd32;/*背景色*/
color: #0000ff;/*文字色*/
}
#st-menubox a:hover{
background: #2f4f4f;/*ホバー時の背景色*/
}
header .smanone ul.menu li a:hover{
color: #ffffff;/*ホバー時の文字色*/
}
/*-- メニュー幅の自動調整 --*/
header .smanone ul.menu {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
ワードプレス「STINGER8」の初期設定のまま、グローバルメニューを使用しても問題はありませんが、今回のようにCSSコードをコピペするだけで最適化を行うことができます。
グローバルメニューはブログやサイトの運営に欠かせない重要な機能なので、最大限にその効果を発揮できるようカスタマイズして、メニュー機能を効果的に活用していきましょう。
