【Lightning】メニューの文字色と背景色の変更

更新日：2018年1月17日

ワードプレスのテーマ【Lightning】は、メニュー部分の変更はカスタマイザーではできません。

プラグイン「VK All in one Expansion Unit」の「CSSカスタマイズ」に以下を書き込み、変更しました。

この記事の目次

メニューの背景色変更

ヘッダーの背景色を変更したので、メニューを設置すると、以下のように背景が白い枠のように表示されました。

Lightningカスタマイズ

これではちょっと不細工なので、背景色はヘッダーと同じ黒（#00000）にし、文字を白(#ffffff)に指定します。

ul.gMenu a{
background:#000000;
color:#ffffff;
}

すると、このようになりました。

Lightningカスタマイズ

背景色を変更する前のマウスオーバー時は、こんな表示でした。

Lightningカスタマイズ

背景色を黒、文字色を白にしているので、マウスオーバー時に変化が見られません。

そこで、マウスオーバー時の文字色が赤（#ff0000）で表示されるよう、以下のようにCSSを書きました。

ul.gMenu a:hover{
color: #ff0000;
}

文字色が赤く表示されました。

Lightningカスタマイズ

これでバッチリですね。

ヘッダーの背景色変更は、以下を参考にしてくださいね。

: 【Lightning】ヘッダーとフッターの背景色の変更

ワードプレスのテーマ【Lightning】は、ヘッダー部分やフッダー部分の背景色の変更は、カスタマイザーではできません。プラグイン「VK All in one Expansion Unit」の「CS ...

続きを見る

七星奈津子

ブログ集客プロデューサー/ライター/コラムニスト

読者（消費者）との関係をつくり、集客や販売につなげる発信で5年10年後もお客様に愛される会社・お店づくりのためのメディアづくりをサポートしている。

これまで発信してきたもの、持っているコンテンツをわかりやすく見やすい形に編集してコーディネイトすることを得意とする。またコミュニケーションの中で、その人の中にある光るもの・強みを引き出すことも得意。

講座や個別サポートでは、その人ならではの魅力を引き出し、わかりやすく伝わりやすい言葉にして発信するお手伝いをしている。