▼・ェ・▼にっき。

ゲームをこよなく愛する▼・ェ・▼のメインBlogデス

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

 

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」では応用できませんでした。

 

 

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

 

www.colordic.org



和色大辞典さまデス!
柔らかい印象の色がたくさんあるよ♪٩(ˊᗜˋ*)و
いつもお世話になっております!

 

 

ってところで、今日はおしまいデス!

 

 

みなさま よい Blog Life を! *ଘ(੭*ˊᵕˋ)੭* ੈ✩‧₊˚

 

 

゚*。.ღ ⊹⊱  £ονё & βLёss уoц  ⊰⊹ ღ.。*゚

 

Thank you.

I love you.