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

本ページはプロモーションが含まれています

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;　/*ナビメニュー上部のラインカラー変更*/
 }