【Simplicity2カスタマイズ⑥】グローバルナビをカスタマイズする方法

WordPress

WordPressのテーマ「Simplicity2」をカスタマイズする方法について、今回はグローバルナビをカスタマイズする方法をご紹介します。

具体的には次の点をカスタマイズしていきます。

 

  • グローバルナビの背景色の変更
  • グローバルナビの文字色の変更
  • マウスを当てたときに反応するように設定

 

前回までと同様、基本コピペの作業で簡単にカスタマイズできますよ。

 

そもそもグローバルナビとは?

今回カスタマイズするグローバルナビですが、どの部分のことかというと下の画像の部分です。

グローバルナビ1

当ブログの一番上(ヘッダー)付近に配置されているメニューです。

 

ブログ訪問者の道しるべにもなるところなので、目立たせつつもシンプルに使いやすい表示にしたいですね。

 

それでは早速カスタマイズしていきましょう!

 

グローバルナビをカスタマイズしよう!

グローバルナビの背景や文字の色を変更します。

次の手順で変更しましょう。

 

1.「外観」から「カスタマイズ」を選択

グローバルナビ2

 

2.「スキン」を選択

グローバルナビ3

 

3.「オレンジメニュー(サブメニューなし)」を選択

グローバルメニュー4

 

4.ひとつ前の画面に戻って「色」を選択

グローバルナビ5

 

5.「グローバルナビ色」の色を選択

グローバルナビ色

ここではグローバルナビの背景の色を変更します。

当ブログでは黒「#000000」にしていますが、好みの色を選んでください。

 

6.「グローバルナビリンク色」を選択

グローバルナビ6-1

ここではグローバルナビの文字の色を変更します。

当ブログでは白「#ffffff」にしていますが、好みの色を選んでください。

 

7.「グローバルナビリンクホバー色」を選択

グローバルナビ6-2

ここではグローバルナビに並ぶリンクにマウスポインタを合わせたときの背景色を変更します。

当ブログでは緑系の色にしていますが、好みの色を選択してください。

 

8.ひとつ前の画面に戻って「ヘッダー」を選択

グローバルナビ7

 

9.「グローバルナビを横幅いっぱいにする」にチェック

グローバルナビ8

ここにチェックを付けることで、画面の両端までグローバルナビが広がります。

 

まとめ

以上でグローバルナビの背景と文字の色が変更できました。

グローバルナビ9

見た目の印象がかなり変わりました。

 

さらにマウスポインタを合わせると・・・

グローバルナビ10

このようにリンクの背景の色が変わるようになりました。

 

今回のカスタマイズも簡単でしたね!

グローバルナビはトップページはもちろん、記事本文のページでも表示されるものです。

あまり懲りすぎるのもどうかと思いますが、ある程度見た目がキレイな状態にしておくと良いと思います。

 

当ブログで行ったカスタマイズのまとめはこちら↓

【Simplicity2カスタマイズ】WordPress初心者が行った6つの方法【まとめ】
WordPressテーマ『Simplicity2』を愛用している私が行ったカスタマイズ方法をまとめて紹介します!WordPress初心者でも簡単にできるカスタマイズばかりですよ♪

コメント