先日、私のこのブログのテーマを
「Nishiki Pro」に変えました！
多機能でスマートで、とても使いやすいです♪
インストールして、さっそくカスタマイズしたので
色にこだわりたいアナタにCSSをご紹介します。
Nishiki Proのメニューバーの色の設定方法
Nishiki Proでは、
メニューの色設定項目はこうなっています。
「背景カラー」と「テキストカラー」の２色を指定すると、
マウスを乗せた時色が反転するようになっています。
かっこいいですね^^
しかし私のブログは、かっこいいというより
優しい雰囲気にしたかったので
パリッとしたメリハリのある配色より
淡い配色にしています。
しかし、この場合、
背景を淡い色にすると文字も淡い色になり、
わかりづらくなってしまいました。
そこで、以下のようなCSSを書いて、
マウスを乗せた時の色を変更しました。
Nishiki ProヘッダーカラーのカスタムCSS
まずは、設定画面で
通常時の背景色と文字色を設定します。
私のブログでは、背景色グレージュ、
文字色を焦げ茶色にしました。
すると通常はこんな配色になります。
このこげ茶の背景と文字色を変えました。
CSSは以下の通りです。
#masthead #menu-collapse ul li a:hover{
color:#444;
background:#fff;
}#444がこげ茶、#fffが白なので、
こんな配色になります。
「#xxx」というのは色を表すカラーコードです。
こちらのサイトなど参考にして
お好みの色に変えて使ってくださいね
WordPress公式テーマ、Nishikiについてもっと知りたい方は
こちらの公式ページをご覧ください。