wordpressのテーマlightningについてカスタムを紹介しています。本日はグローバルメニューの背景色・マウスオーバーしたときのホバーカラーの変更方法などをまとめました。CSSも紹介していますので、ぜひサクッと使っていただければ幸いです。
lightningグローバルメニューの背景色・ホバー変更CSS手順
lightningは標準でも便利なカスタムが色々とあるのですが、グローバルメニューをホバーした時の背景色が標準ではできません。
こちらは当サイトのグローバルメニューになります。
グローバルメニューの背景色変更
グローバルメニューの背景色は標準にて変更が可能です。
手順として
- ダッシュボード
- 外観
- カスタマイズ
- ヘッダー設定
- グローバルナビの背景色
上記の手順で背景色は簡単に変更できます。
これで大枠は変更できましたので、良いと言えば良いのですが、せっかくならナビをホバーまたはマウスオーバーというのでしょうか。メニューをクリックする際に色が変化する方法を紹介します。マウスオーバーまたはホバーの色を変更します。
ホバーカラーの変更方法
ホバーした際のカラー変更方法もシンプルです。
手順として
- 外観
- カスタマイズ
- 追加CSS
上記の手順にて追加CSSまで開きます。あとは以下のcssコードを貼り付けます。
/* ③マウスホバー時の背景色 */
.global-nav-list li a:hover {
background-color: #fff;
}
上記のCSSをコピーして貼り付けしてください。
ホバーすると色が変更できました。あとはお好きなカラーに変えてください。
ちなみにカラー変更は
background-color: #fff;→#fffを好きなカラーコードに変更で大丈夫です。
フォントカラー・サブメニューもカスタム
もう少し追加していきます。
例えば、ホバーした際のフォントカラーを変更したい場合
/* ③マウスホバー時の背景色＋フォントカラー変更 */
.global-nav-list li a:hover {
background-color: #645635;
color: #000;
}color: #000;を追記しました。こちらを好きなカラー変更で対応可能です。
また、サブメニュー→グローバルメニューに階層化している子メニューを設置している場合は
/* サブメニューマウスホバー時の背景色 */
.global-nav-list .sub-menu li a:hover {
background-color: #217ed1;
}
こちらを使っていただければと思います。
まとめ
以上で今回のlightningテーマのグローバルメニューのカスタム「フォントカラー・ホバー時の背景色・サブメニューの背景色」の変更方法になります。要素さえわかればそこまで難易度は高くないと思いますので、ぜひチャレンジしてみてください。
