グローバルナビゲーションにマウスを乗せた時の色を変える

f:id:bless-you:20170522031034j:plain

グローバルナビゲーションにマウスを乗せた時の色を変えたい！

ついでに、色が反転した時の角も丸くしたい！

っていうカスタマイズのお話しﾃﾞｽ。

以下のコードをデザイン ▶ カスタマイズ ▶ 「CSS」に貼り付けます。

/*ナビメニューの色変更*/
#global-menu {
 background-color: #544a47; /*ナビメニューの両サイド背景の色変更*/
 border-bottom: 2px solid #544a47;　/*ナビメニュー下部のラインカラー変更*/
 }
 .global-menu-list li a {
 color: #fff; /*ナビメニューの文字色変更*/
 background-color: #544a47; /*ナビメニューの背景色変更*/
 }
 .global-menu-list li a:hover { /* マウスオーバー時の文字色/背景色の設定 */
 background: #f5b1aa;
 color: #000;
 -moz-border-radius:3.5px;
 -webkit-border-radius:3.5px;
 -khtml-border-radius:3.5px;
 border-radius:3.5px;
 -moz-border-radius:0.25rem;
 -webkit-border-radius:0.25rem;
 -khtml-border-radius:0.25rem;
 border-radius:0.25rem;
 }
 .global-menu-list li {　/* メニュー文字の文字と文字の間(隙間)の設定 */
 margin: 0 18px 0 0;
 margin: 0 1.285714286rem 0 0;
 position: relative;
 }
 #mobile-head {
 background-color: #544a47; /*スマホ版 ナビメニューの背景色変更*/
 }
 #blog-title {
 border-bottom: 1px solid #544a47;　/*ナビメニュー上部のラインカラー変更*/
 }

たったこれだけﾃﾞｽ！d(ŐдŐ๑)☆ﾋﾞｼｯ

今回の先生はコチラ ▼

◇ TwentyTwelve グローバルナビゲーションのリンク/マウスオーバー時の色変更 | 初めてのワードプレスカスタマイズ

ワードプレスのカスタマイズについてシェアしてくださっていたんですけども、

試してみたら、はてなblogのテーマ「Brooklyn」でも問題なく応用できましたん！

先生ありがとうございました♡((( *´꒳`* )))ﾎﾟﾜﾜｰﾝ

注意：はてなblogのテーマ「CONTENTS」では応用できませんでした。

カラーコードは、▼・ｪ・▼にっき。では毎度お馴染みのコチラ ▼

和色大辞典さまﾃﾞｽ！

柔らかい印象の色がたくさんあるよ♪٩(ˊᗜˋ*)و

いつもお世話になっております！