はてなテーマ「CONTENTS」メニューのマウスオーバー色を変更する方法

はてなブログテーマのレスポンスデザイン「CONTENTS」、シンプルでセンスよく、多くのブログで採用されていますね。
製作者様のブログでベースカラーを変えるCSSを公開されているので、コピペで簡単に自分らしいブログの雰囲気が作れます。
 
この記事では、グローバルメニューのマウスオーバー時のアクセントカラーを変更するCSSについてまとめています!
 
[outline] 

はてなテーマ「CONTENTS」の色変更

色を変えるCSSコピペで変えられない場所があって困りました。
グローバルメニューの、マウスオーバーしたときに変わる色(アクセントカラー)です。
 

f:id:migaruhack:20180621201704j:plain

 
元々の蛍光ピンクのままなので、色が合いません…
製作者様のブログでは、アクセントカラーを変えるCSSは公開されていなかったので、検索!検索!で解決しました。
 

コピペ一発!マウスオーバー中の色を変更するCSS

「CONTENTS」メニューのマウスオーバー中の色を変更するために、以下のCSSコードを貼り付けました!

.navi a:hover{color: #81d0cb; background:#ffffff; }

 
はてなブログの「デザイン設定」の「スパナマーク」をクリックして、「{}デザインCSS」にはりつければOKです。
ベースカラー等の変更のために貼り付けたCSSの最上部に貼り付けるとうまくいきます^^
 

こちらの記事を参考にさせていただきました

良いもんつたえ隊 【映画でじぶんを変えてゆこう】

グローバルメニュー作ってみました! ↑にある「TOP」「MOVIE」「BOOK」「GIMP」のバーです。想像以上に大変で…

 
わたしは「マウスオーバー時の文字色」をグローバルメニューの背景色、「マウスオーバー時の背景色」をグローバルメニューの文字色にしてみました^^

f:id:migaruhack:20180621201700j:plain

 
 
「CONTENTS」のメインカラーを変更された方は、グローバルメニューのカスタマイズもぜひ試してみてくださいね^^

Twitterで更新情報をお届けします