メニューの背景色を好みの色に変更する【Nishiki proカスタマイズ】

猫でもわかるWordPress

先日、私のこのブログのテーマを
「Nishiki Pro」に変えました!

多機能でスマートで、とても使いやすいです♪

インストールして、さっそくカスタマイズしたので
色にこだわりたいアナタにCSSをご紹介します。

Nishiki Proのメニューバーの色の設定方法

Nishiki Proでは、
メニューの色設定項目はこうなっています。

NishikiProヘッダー色設定画面

「背景カラー」と「テキストカラー」の2色を指定すると、
マウスを乗せた時色が反転するようになっています。

かっこいいですね^^

しかし私のブログは、かっこいいというより
優しい雰囲気にしたかったので

パリッとしたメリハリのある配色より
淡い配色にしています。

しかし、この場合、
背景を淡い色にすると文字も淡い色になり、
わかりづらくなってしまいました。

そこで、以下のようなCSSを書いて、
マウスを乗せた時の色を変更しました。

Nishiki ProヘッダーカラーのカスタムCSS

まずは、設定画面で
通常時の背景色と文字色を設定します。

私のブログでは、背景色グレージュ、
文字色を焦げ茶色にしました。

すると通常はこんな配色になります。

このこげ茶の背景と文字色を変えました。
CSSは以下の通りです。

#masthead #menu-collapse ul li a:hover{
color:#444;
background:#fff;
}

#444がこげ茶、#fffが白なので、
こんな配色になります。

「#xxx」というのは色を表すカラーコードです。

こちらのサイトなど参考にして
お好みの色に変えて使ってくださいね

WordPress公式テーマ、Nishikiについてもっと知りたい方は
こちらの公式ページをご覧ください。