migaru hack

身軽に暮らしたいミニマリストがお金の話をするブログ

【コピペ一発】はてなテーマ「CONTENTS」メニューのマウスオーバー中の色を変更するCSS

はてなブログテーマのレスポンスデザイン「CONTENTS」、シンプルでセンスよく、多くのブログで採用されていますね。
当サイトでも先日もようがえに使わせていただきました^^

製作者様のブログでベースカラーを変えるCSSを公開されているので、コピペで簡単に自分らしいブログの雰囲気が作れます。
わたしもブログのヘッダー画像のトリさんの色に合わせてブルーグリーン的なカラーに染め上げてやりました。


この記事では、カラーカスタマイズに一工夫
はてなテーマ「CONTENTS」のグローバルメニューのマウスオーバー時のアクセントカラーを変更するCSSについてまとめています!

はてなテーマ「CONTENTS」のアクセントカラーを変えたい!

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

f:id:migaruhack:20180621201704j:plain
・・・・・・?
元々の蛍光ピンクのままなので、色が合いません…


放置してもいいかな?とは思ったのですが、こだわりだすとやめられないのがブログのカスタマイズ。
どうしても変えたい!

しかし、製作者様のブログでは、アクセントカラーを変えるCSSは公開されていません。
なんとか検索!検索!で解決しました。

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

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

.navi a:hover{color: #81d0cb; /* マウスオーバー時の文字色を指定 */background:#ffffff; /* マウスオーバー時の背景色を指定 */}

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


▼こちらの記事を参考にさせていただきました!ありがとうございます。
グローバルメニュー作成しました!CSSのコードとカスタマイズ手順を公開 - 良いもんつたえ隊 【映画でじぶんを変えてゆこう】


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


f:id:migaruhack:20180621201704j:plain
BEFORE(毒々しい)

f:id:migaruhack:20180621201700j:plain
AFTER シンプルに!


ちょっとオシャレじゃないでしょうか?


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

CSSカスタマイズが苦手なあなたへおすすめ