lightning｜メニュー背景色・ホバー変更・カスタム「CSS」紹介

2023-07-05 2023-07-05

tjdesign

wordpressのテーマlightningについてカスタムを紹介しています。本日はグローバルメニューの背景色・マウスオーバーしたときのホバーカラーの変更方法などをまとめました。CSSも紹介していますので、ぜひサクッと使っていただければ幸いです。

lightningグローバルメニューの背景色・ホバー変更CSS手順

lightningは標準でも便利なカスタムが色々とあるのですが、グローバルメニューをホバーした時の背景色が標準ではできません。

こちらは当サイトのグローバルメニューになります。

グローバルメニューの背景色は標準にて変更が可能です。

手順として

上記の手順で背景色は簡単に変更できます。

これで大枠は変更できましたので、良いと言えば良いのですが、せっかくならナビをホバーまたはマウスオーバーというのでしょうか。メニューをクリックする際に色が変化する方法を紹介します。マウスオーバーまたはホバーの色を変更します。

ホバーした際のカラー変更方法もシンプルです。

手順として

上記の手順にて追加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テーマのグローバルメニューのカスタム「フォントカラー・ホバー時の背景色・サブメニューの背景色」の変更方法になります。要素さえわかればそこまで難易度は高くないと思いますので、ぜひチャレンジしてみてください。