サイトアイコン やっとこブログ

WordPressでメニューの色をカスタマイズする方法（テーマ：Xeory）

やっとこブログ

WordPressの無料テーマ「Xeory」では、ページ上部にあるメニューに色がつきます。正確にはメニューの文字の上に色がつきます。

シンプルでとても見やすいデザインになっていますが、初期設定のままだと、ブログのデザインやカラーに関係なく青っぽい色になっています。

この青っぽい色を、自分のWordPressブログに合わせてカスタマイズしていきます。メニューに色がつくのは下記2つの状態の時です。

ブログのイメージと全然違う色だと色彩センスがおかしなブログになってしまいます。せっかくカスタマイズができる場所なので、自分のブログに合った色にカスタマイズしてしまいきましょう。

1.メニューのイメージ

実際にメニューの色をカスタマイズしたイメージです。イメージはトップページである「ホーム」を開いて見ている状態で、マウスポインタをメニューの「WordPress」部分にのせている状態です。

1-1.カスタマイズ前のメニュー

カスタマイズ前のメニューです。初期設定のままなので青っぽい色になっています。

1-2.カスタマイズ後のメニュー

カスタマイズ後のメニューです。やっとこブログに合わせて黄色っぽい色に変更しました。

どうでしょうか？かなり地味ですね。でも初期設定の色のままよりはブログに合っているので良いんじゃないでしょうか。

色も同色系に変更したので、ブログ全体の一体感も増した気がします。少しの変化ですが、パッとみのデザインバランスは大切だと思います。

あきらかにブログイメージと違う色だとおかしいですからね。興味ある方は一緒にWordPressのメニューをカスタマイズしていきましょう。

コアラ
一体感を感じるぜ

 

2.WordPressの設定画面に移動

早速カスタマイズしていきましょう。まずはメニューの色を設定している部分のCSSを変更する必要がありますので、CSSのページまで移動しましょう。

WordPressの設定画面の左のメニューから、「外観　→　テーマの編集」をクリックします。

「テーマの編集」に移動したら、右の項目から「スタイルシート」を選択しましょう。

この部分のcssを変更していきます。

3.メニューのカスタマイズ

WordPressのメニューの色をカスタマイズするために、メニュー部分のCSSを「変更」する必要があります。先ほど開いたスタイルシートから、変更する箇所を検索して、CSSを「変更」していきましょう。

変更箇所はメニュー部分のカラーコードだけなので簡単です。簡単ですが、

の2点の変更する必要があります。ひとつだけ変更するとバランスがおかしくなりますので、2点とも変更しましょう。順番に説明していきます。

3-1.マウスポインタが乗った時の色の変更

WordPressのメニューにマウスポインタが乗った時の色を変更するには「Ctrlキー」を押しながら「Fキー」を押して検索バーを出してから「#gnav li a:hover」で検索します。検索すると下図の場所が表示されるはずです。

下図が初期設定のCSSです。このCSSのカラーコードを変更していきます。

#gnav li a:hover {
color: #2B2D2D;
border-top: 1px #2581c4 solid;
}

変更する箇所は「border-top」の部分のカラーコード「#2581c4」です。この部分のカラーコードを好きな色のカラーコードに変更しましょう。

「color」の部分はメニューの文字色になりますので、文字色も変更したい場合は「color」のカラーコードも合わせて変更してください。

カラーコードが分からない方は、カラーピッカー等で好きな色のカラーコードを探してみてください。

やっとこブログでは下図のように「#f2ab13」に変更しました。文字色はそのままです。

#gnav li a:hover {
color: #2B2D2D;
border-top: 1px #f2ab13 solid;
}

これで「マウスポインタがのった時の色」のカスタマイズ完了です。

コアラ
もう1箇所変更するぞー

 

3-2.現在開いているカテゴリのメニューの色の変更

WordPressのテーマ「Xeory」では、現在開いているページのメニューにも色が付きます。トップページを開いていたら「ホーム」の部分にはマウスが乗ってなくても色が付く、といった感じです。この部分の色も変更していきます。

まずは「Ctrlキー」を押しながら「Fキー」を押して検索バーを出してから「#gnav li.current-menu-item a」で検索します。検索すると下図の場所が表示されるはずです。

下図が初期設定のCSSです。こちらも同様にカラーコードを変更していきます。

#gnav li.current-menu-item a {
 border-top: 1px #2581c4 solid;
}

先ほどと同じで変更する箇所は「border-top」の部分のカラーコード「#2581c4」です。この部分のカラーコードを好きな色のカラーコードに変更しましょう。

やっとこブログでは下図のように「#f2ab13」に変更しました。

#gnav li.current-menu-item a {
 border-top: 1px #f2ab13 solid;
}

これで「現在開いているページのメニューの色」も変更可能です。

実際にWordPressの画面上でCSSを変更すると下図のようになります。

変更箇所2つは結構近い場所にあるので、今後の変更も簡単ですね。

4.まとめ

以上で「WordPressでメニューの色をカスタマイズする方法（テーマ：Xeory）」の完了です。変更箇所はカラーコードだけですので、簡単だったはずです。

ご自分のブログに合わせて、好きな色にカスタマイズしてみてください。

 

その他のWordPressカスタマイズは、

【hタグ】 【ヘッダー・メニュー】 【サイドバー】 【プラグイン】 【URL変更】 【その他】

上記の記事を参考にしてください。

モバイルバージョンを終了