雑学・知識

3ステップ!wordpressグローバルメニューカスタマイズCSS

カスタマイズ

CSSでグローバルメニューのカスタマイズ

こんにちは!

 今日はなんとなく、グローバルメニューのカスタマイズをしたくなって、少しいじってみました。

これからカスタマイズされる方の参考になればと、手順を記載しておきます。

手順①スキンの変更

  • 手順①スキンをオレンジメニューに変更
  • 手順②上下に点線を入れるためのCSSをコピペ
  • 手順③ホバー時の変更CSSをコピペ

 まずこの設定を適用するには、スキンを下記手順でオレンジメニューにする必要があります。サイトをカスタマイズから入り

 

カスタマイズ

の設定をすれば下準備は完了ですので、CSSを追加していきます。

 

手順②上下に点線を入れる

以下の追加のCSSから、下記コードをコピペしていただければ反映します。

CSS
/*グローバルナビの修飾 */
#navi {
 border-top:dotted 2px #a9a9a9 ;
 border-bottom:dotted 2px #a9a9a9;
}

なお、赤字のdottedをgrooveやdoubleに変更すると立体枠や二重枠になったりなど、独自のカスタムが実現します。

ちなみに入力した結果がこんな感じです

点線カスタマイズ

色や幅など変更していただければ、より素敵になるかと思います。

 

手順③マウスホバー時の動作

次にマウスホバー時のカスタマイズですが、これの結果は私のグローバルメニューを見ていただければと思います。。

先ほどと同じ追加のCSSに

/*マウスホバー時の線と文字の色*/
#navi ul li a:hover{
color: #10aba6 !important;
background-color:white;
}
#navi ul li a:before{
 background:#10aba6 !important;
}
#navi ul,#navi{
 background-color:white;
}

ホバー時にリンク文字下部に線が流れるように表示されます。

 

以上、簡単なカスタマイズを2点だけですが、参考に使用していただければ。

またカスタマイズしたら備忘録とあわせて書いてみたいと思います。