【Simplicity2】ほぼコピペでOK!グローバルナビをカスタマイズ

Simplicity2 グローバルナビ(メニューバー)カスタマイズ

このブログはテーマにSimplicity2を使っています。

グローバルナビ(メニューバー)をカスタマイズしてこのようにしています。

カスタマイズしたグローバルナビ

上下をラインではさむデザインで、各項目の横にはアイコンが入っています。

ポインタを乗せると下線が出て、文字色が変わります
また、マウスのポインタを乗せると文字の色が変わり、アンダーラインが出るようになっています。

今回はこのカスタマイズ方法を紹介します。

スポンサーリンク

Simplicity2の設定をする

まずはSimplicity2の設定をしていきます。

スキンを変更する

1.ダッシュボード画面から、外観→カスタマイズとすすみます。

Simplicity2 カスタマイズ

2.スキンを選択します。

スキンを選択

3.スキンの一覧が出ますので「オレンジメニュー(サブメニューなし)」を選択します。

Simplicity2のスキンからオレンジメニューを選択

グローバルナビの背景色を変更する

グローバルナビの背景色を変更する

つづいて、グローバルナビの背景色を設定します。

1.カスタマイズの画面に戻り、「色」をクリックします。

Simplicity2のカスタマイズから色を選択

2.色の項目の中ほどにある「グローバルナビ色」の「色を選択」をクリックします。

グローバルナビ色の変更

3.背景に使いたい色を選びます。

グローバルナビの背景色を選択

このブログでは「白」を選択しています。「#ffffff」で白になります。

色を選ぶ時は「WEB色見本」を参考にすると便利です。

文字色を決める

グローバルナビの文字色を変更する

つづいて、ナビの文字色を決めます。

1.「グローバルナビリンク色」の「色を選択」をクリックします。

グローバルナビリンク色を選択

2.好みの文字色を選びます。

好みのナビ色を選択する

このブログでは、濃いグレー「#4e3e3e」を選んでいます。

グローバルナビの表示を横幅いっぱいにする

グローバルナビが横幅いっぱいに表示されるようにします。

1.カスタマイズの画面から「ヘッダー」を選択します。

Simplicity2のカスタマイズからヘッダーを選択

2.「グローバルナビを横幅いっぱいにする」にチェックを入れます。

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

CSSを追加する

ここからはCSSのコードをコピペしていく作業です。

つづいて、CSSにコードを追加します。

コードを貼る場所

コードを貼る場所は、Simplicity2の子テーマの「style.css」になります。

「style.css」は、WordPressのダッシュボード画面から「カスタマイズ」→「テーマの編集」にすすむとあります。

Simplicity2の子テーマにCSSを追加

コードは、特別な理由がない限り、後ろに追加していけばOKです。

上下にラインを入れる

グローバルナビの上下にラインを入れる

まずはグローバルナビの上下にラインを入れるコードです。

次のコードを子テーマの「style.css」にコピペします。

/*---------------------------------
グローバルナビの上下にラインを入れる
--------------------------------*/
#navi {
 border-top:solid 1px #5FB3F5;
 border-bottom:solid 1px #5FB3F5;
}

「border-top」が上のライン、「border-bottom」が下のラインにあたります。

このブログでは、上下とも同じ設定にしています。

「1px」がラインの太さです。数字を大きくすると線が太くなります。

「#5FB3F5」がラインのカラーです。このブログではブルー系にしています。

ポインタを乗せたときの色を変更する

Simplicity2のグローバルナビにポインタを乗せたときの色を変更する

つづいて、ポインタを乗せたときの下のラインと文字色を変更します。

次のコードを子テーマの「style.css」にコピペします。

/*---------------------------------
ポインタを乗せた時の下のラインと文字色を変更
--------------------------------*/
#navi ul li a:hover{
  color: #5FB3F5 !important;
}
#navi ul li a:before{
  background:#5FB3F5 !important;
}
#navi ul,#navi{
  background-color:white;
}

最初の「color」のところにある「#5FB3F5」が、ポインタを乗せたときの文字色になります。

次の「background」のところにある「#5FB3F5」が、ポインタを乗せたときに出るラインの色です。

このブログではどちらも上下のラインの色に合わせていますが、お好みに応じて設定してみてくださいね。

各項目のアイコンを設定する

Simplicity2のグローバルナビ(メニューバー)にFont Awesomeを設定する

つづいて、グローバルナビの文字の前にアイコンを設定する方法です。

Simplicity2はアイコンフォント「Font Awesome」に対応しているので、簡単に設定することができます。

Simplicityには、「Font Awesome」がデフォルトで使えるようになっています。 「Font Awesome」とは、手軽...

が、このままだとアイコンの色がデフォルトのままになりますので、好きな色になるようにしていきます。

Font Awesomeのアイコンの色を変更する

ここからは少しややこしいので、慎重にいきましょうね!

Font Awesome4.7.0のアイコンの色を変更するには、次の手順で作業します。

  1. Font Awesomeのコードに名前(クラス名)をつける
  2. CSSにコードを加える

この2つを順に行っていきます。

コードに名前(クラス名)をつける

Font Awesomeの色を変えるには、まずアイコンのコードに名前をつけます。

Font Awesomeのコードにクラス名をつける

名前は何でもOKですが、必ず半角スペースをあけて入れるようにします。

今回は「topicon」という名前をつけてみました。

CSSにコードを追加する

つづいて、CSSにコードを追加します。

次のコードを子テーマのstyle.cssにコピペします。

/*---------------------------------
トップアイコンの色
--------------------------------*/
.topicon {color: #5FB3F5}

先ほどつけた名前に対して、色を変更しますよという指定です(「topicon」以外の名前をつけた方は、その名前にしてください)。

ここでは、上下のラインと同じ色「#5FB3F5」を指定していますが、お好みの色にしてみてくださいね。

アイコンごとに違う名前をつけて、CSSで1つ1つ指定すれば、それぞれ違う色にすることもできます。

まとめ

今回はSimplicity2のグローバルナビのカスタマイズ方法でした。

グローバルナビの見栄えが変わると、サイト全体の印象もガラッと変わります。興味のある方はぜひチャレンジしてみてくださいね。

Simplicity関連では、こんな記事もありますよ!
このブログは、WordPressのテーマ「Simplicity2」を使っています。 Simplicity2は、デフォルトだと記事のまわ...
Simplicity2の固定ページの日付表示(投稿日・更新日)を消してみました。 消したのはこの部分です。 というわけで、そ...
スポンサーリンク