ハリーポッター映画全シリーズをお得に視聴したい方は
スティンガー8

コピペで1発OK!STINGER8のグローバルメニューを色々カスタマイズ

 

どうも、「きにぶろぐ.com」の自由に憧れるフリーマン(@free_manJJ)です。

グローバルメニューとは、ヘッダーやフッターに指定した「固定ページ」や「投稿ページ」を表示させることができるメニュー領域です。

特にヘッダー部分は人目に触れやすい場所なので、メニューを設置することでアクセスアップにも影響します。

 

ワードプレスの「STINGER8」では、テンプレート機能を使用してグローバルメニューを色々とカスタマイズすることができます。

ただし、メニューの色や文字色、メニューリストを中央に寄せたりといった詳細な設定は、スタイルシートでCSSコードを編集する必要があります。

 

CSSを編集するのは難しくて苦手、と感じている方も多いと思います。

そこで今回はCSSコードをコピペするだけで、簡単にグローバルメニューをカスタマイズして最適化する方法をご紹介します。

コピペだけでグローバルメニューをカスタマイズ

STINGER8でカスタマイズしていない状態のグローバルメニューは以下のようになります。

 

 

またカーソルがホバーした時は、文字が赤色に変化するように設定されています。

このメニュー部分をCSSコードを使ってカスタマイズしていきます。

 

コピペに使うコードはSTINGER8の「スタイルシート(style.css)」に追記して下さい。

ブログやサイトにCSSコードが反映されない場合は、一度キャッシュの削除(閲覧履歴の削除)を行ってから再度更新して確認して下さい。

 

メニュー項目を中央寄せにする

グローバルメニュー内の項目が基本的に左寄せになっているので、左右均等にする為に以下のコードをstyle.cssに追加します。

 

 

設定を更新して反映されればメニューが中央に移動しています。

 

 

メニューが中央に移動したことで、左右のバランスが良くなりました。

 

グローバルメニューの背景色を変更する

グローバルメニューの背景色は薄い灰色?グレー?となっていて、ブログ全体の背景色と同化している為、わかりにくいので以下のコードで目立つように変更します。

 

 

「#9acd32」が色コードになっているので、好きな配色に変更して使用して下さい。

 

 

配色を変更したことでグローバルメニューとして認識しやすくなりました。

 

グローバルメニューの文字色を変更する

グローバルメニューの文字色は、デフォルトでブラックに設定されています。

このままでもいいですが、背景色の組み合わせによってはブラックでは見えづらくなる場合もあるので、その時は以下のコードで配色を調整できます。

 

 

「#0000ff」の部分を変更してお好みの色コードをお使い下さい。

 

 

ここでは青色を使用してみましたが、これはこれでいいのではないでしょうか。

 

カーソルホバー時のグローバルメニュー背景色

カーソルを合わせた時(ホバーした時)のグローバルメニュー背景色を変更できます。

デフォルト状態では透明の設定になっているので、メニュー項目の選択をより認識してもらいやすくする為に以下のコードを追記します。

 

 

「#2f4f4f」の色コードを変更して最適な配色に調整しましょう。

 

 

ほぼ黒に近い配色にしたことで、どのメニューを選択しているかが一目でわかるようになりました。

 

カーソルホバー時のグローバルメニュー文字色

カーソルを合わせた時(ホバーした時)のグローバルメニュー文字色を変更できます。

初期設定のままでは赤色が使用されている為、変更したホバー時の背景色と少し相性が良くないので、以下のコードで文字色を変更します。

 

 

「#ffffff」を任意の色コードにして最適な配色を選びましょう。

 

 

ホバー時の背景色が黒に近い色なので、文字色は対象的な色にして文字がより強調されるように調整しました。

これでひとまずグローバルメニューの最適化は完了です。

 

色コードを詳しく知りたい方は、「原色大辞典」などの色コード専門サイトを参考にして利用していきましょう。

 

カスタマイズ番外編

最適化は完了したがもっと詳細な調整をしてみたいという方は、ここで紹介するカスタマイズも参考にして下さい。

 

背景色をメニュー幅に合わせる

横幅一杯になっているグローバルメニューの背景色を、メニュー幅に合わせることができます。

背景色はすでに「#st-menubox」で設定していますが、「background-color」の部分を文字色のCSSコードの方に追記します。

 

 

これで背景色をメニューの幅に合わせることができます。

 

 

グローバルメニューの枠線を削除する

上記の設定ではグローバルメニューの枠線が残っている状態なので、必要なければ以下のコードを背景色の「#st-menubox」内に追加します。

 

 

これでメニュー上下の枠線がなくなって、スッキリしたグローバルメニューになりました。

 

 

メニュー周辺の余白を調節する

デフォルトではメニュー下の余白が少し空いている状態ですが、もっと余白を広げたい場合は以下のコードを背景色の「#st-menubox」内に追記して下さい。

 

 

メニューの余白は下方向だけでなく上下左右の調節が可能で、「margin」内の左から「上数値・右数値・下数値・左数値」となっています。

後は変更したい方向の数値をお好みで変更しましょう。

 

 

メニュー幅を自動調整にする

ブログコンテンツ増加によってメニュー項目が増えてきた時に、通常だと6項目までしか1列に収まりきらない設定になっています。

 

 

これをメニュー幅の自動調整によって1列に収める為に以下のコードを追記します。

 

 

メニューが1列に収まって綺麗に表示できるようになりました。

 

 

グローバルメニューのカスタマイズまとめ

今回番外編も含めてご紹介した完成系のCSSコードを、よりわかりやすく全てまとめたものが以下のコードになります。

 

 

ワードプレス「STINGER8」の初期設定のまま、グローバルメニューを使用しても問題はありませんが、今回のようにCSSコードをコピペするだけで最適化を行うことができます。

 

グローバルメニューはブログやサイトの運営に欠かせない重要な機能なので、最大限にその効果を発揮できるようカスタマイズして、メニュー機能を効果的に活用していきましょう。

こちらも読まれています

ABOUT ME
フリーマン
フリーマン
1988年生まれで兵庫県に在住してます。気になることをただひたすらに書き続けて、ブログ運営10ヶ月目で月間10万PV超えを達成。 将来的な資産を作る為に資産運用も実践中。>>詳細プロフィール