Lightning WordPress ブログ

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

更新日:

ワードプレスのテーマ【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年後もお客様に愛される会社・お店づくりのためのメディアづくりをサポートしている。


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


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


▶︎詳しいプロフィールはこちらから

この記事が気に入ったら
いいね ! しよう

Twitter で

-Lightning, WordPress, ブログ

Copyright© 7stars725.com , 2018 All Rights Reserved.