賢威7でグローバルメニューの色を変更【文字・背景・マウスオーバー】

こんにちは、chiakiです。

 

賢威7グローバルメニュー

デフォルトでもシンプルでオシャレになっていますが、

 

ある程度カスタマイズすると、

オリジナリティーになりオシャレ度がグンっと増します。

 

 

ので、今回は、

カズタマイズの1歩目となる

『文字』『背景』『マウスオーバー時』の

色の変更について解説していこうと思います!

賢威7でグローバルメニューの色を変更

 

賢威7のグローバルメニューを変更するには、

何千文字もあるCSSから『global-nav』の

文字を見つけなくてはなりません。

 

 

一行一行確認していては、

非常に大変な作業となってしまいますので、

 

『外観⇒テーマの編集⇒base.css』へと進み

以下(↓)の方法をご活用してみて下さい。

  1. Ctrl+Fで検索窓を出す
  2. 『global-nav』と検索

 

以上のことで、

簡単にグローバルメニューの場所が

把握できるようになります。

 

ので、ここのCSSをカスタマイズし

グローバルメニューの色を変更していきましょう!

 

 

あっ、もしCSSをカスタマイズしたのに

ブログに反映されていない!!

 

って、場合は以下の記事をご参考にして下さい。

参考:WordPressのCSS編集後に反映しない時の対策

 

※ 見本のカスタマイズは『賢威7スタンダード版』で行います。その他バージョンでは多少カスタマイズ方法が異なる可能性があることをご了承ください。

文字色・背景色の変更

 

では、グローバルメニューの

カスタマイズを始めていきましょう!

 

 

通常時の文字色・背景色を変更するには

以下(↓)のCSSを変更する必要があります。

  • background-color: #8f8f8f; /*背景色*/
  • color: #fff; /*文字色*/

 

上記のカラーコードを

好きな色に変更してもらうと

グローバルメニューの色が変わります。

 

参考:カラーコードの見本はコチラ

 

 

 

今回は、

『文字色がアクア』『背景色は白』に

変更してみましょう。

  • background-color: #ffffff; /*背景色*/
  • color: #A8E6CF; /*文字色*/

 

上記のように

CSSをカスタマイズすると

以下のようになります。

 

無事、変更されましたね!

 

メニュー間の線が気になる方

そして、メニュー間の線が気になる方は、

以下(↓)のCSSを変更してみて下さい。

  • border-left: 1px solid #bcbcbc;

 

今回は、背景色は白なので、

白のカラーコードに変更します。

 

上記のように

CSSをカスタマイズすると

以下のようになります。

 

グローバルメニューの

背景が1色になりましたね!

 

マウスオーバー時の変更

 

続いて、

マウスオーバー時の

色をカスタマイズしていきます。

 

以下(↓)のCSSを変更しましょう。

  • backgroundcolor: #eee; /*マウスオーバー時の背景*/
  • color: #333; /*マウスオーバー時の文字色*/

 

 

上記のカラーコード

お好きな色に変更して下さい。

 

今回は、

『文字色が白』『背景色はアクア』に

カスタマイズしてみましょう。

 

上記のように

CSSをカスタマイズすると

以下のようになります。

 

これで、

無事にマウスオーバー時の

カスタマイズもできましたね!

 

【補足】グローバルメニューをコンテンツ幅に

 

続いて少し補足し、

グローバルメニューを

コンテンツ幅にする方法を記載します。

 

以下(↓)のCSSをカスタマイズして下さい。

  • background: #8f8f8f;

 

ブログ全体の背景は白なので、

ここのカラーコードも白にしてあげます。

 

上記のように

CSSをカスタマイズすると

以下のようになります。

 

グローバルメニューが

コンテンツ幅になりましたね。

 

(コンテンツがないので、わかりにくいですが…。笑)

 

 

このように賢威7をカスタマイズし

自分だけのオリジナルブログを創っていきましょう!

 

 

関連記事

  1. 賢威7のグローバルメニューを最上部に固定&スクロール追従させる方法

  2. WordPressのCSS編集後に反映されない時の対策

  3. WordPressでCSS編集前の注意点!エラーの対策をしよう

  4. 賢威7でアイキャッチ画像のサイズをカスタマイズする方法!

  5. 賢威7でグローバルメニューを設置する方法について解説

  6. 賢威7で『続きを読む』をオリジナル画像にカスタマイズする方法!

  7. 賢威7で関連記事を記事下に自動表示させるカスタマイズ!

  8. 賢威7でファビコンをたった1分でカスタマイズ!

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。