通常時のリンク文字色・背景色変更方法



WordPress管理画面から「外観 ⇒ テーマの編集」⇒「base.css」

以下のコードを探します。

(賢威7スタンダート版)

.global-nav-in li a{
display: block;
min-height: 1.5em; /*メニュー毎に高さが変わるときに調整*/
padding: 1em; /*画像をメニューにする場合は値を0に*/
background-color: #8f8f8f;
color: #fff;

text-decoration: none;
}



上記コードの黄色マーカーを引いた部分がグローバルメニューの
リンク文字色・背景色を決めている部分です。



「color」のカラーコードを変更するとリンク文字色を変更できます。
「background-color」のカラーコードを変更すると背景色を変更できます。


.global-nav-in li a{
display: block;
min-height: 1.5em; /*メニュー毎に高さが変わるときに調整*/
padding: 1em; /*画像をメニューにする場合は値を0に*/
background-color: #F0E68C;
color: #800080;

text-decoration: none;
}



変更するとグローバルメニューの背景色と文字色が変わります。


keni7urobaruhaikei



しかし、矢印で示した部分の色が変わってません。

矢印の部分の変更は以下のコードを探します。


.global-nav{
padding: 0;
background: #8f8f8f;
}



黄色のマーカー部分(background: #8f8f8f;)の#8f8f8fを変更します。
先程の背景色の色と同じにすると綺麗です。


.global-nav{
padding: 0;
background: #F0E68C;
}



すると、背景色が均一になりました。

keni7guro-barumenyuhaikei

マウスオーバー時のリンク文字色・背景色変更



WordPress管理画面から「外観 > テーマの編集」⇒「base.css」

以下のコードを探します。

(賢威7スタンダード版)


.global-nav-in li a:hover,
.global-nav-in li a:active,
.global-nav-in li a:focus{
background-color: #eee;
color: #333;

}




黄色マーカーを引いた部分がグローバルメニューの
マウスオーバー時のリンク文字色・背景色です。


「color」のカラーコードを変更すると
マウスオーバー時のリンク文字色を変更できます。

「background-color」のカラーコードを変更すると
マウスオーバー時の背景色を変更できます。

以下の様にカラーコードを変更します。

.global-nav-in li a:hover,
.global-nav-in li a:active,
.global-nav-in li a:focus{
background-color: #808000;
color: #F0FFF0;

}



するとグローバルメニューにマウスをあてると、
あてた部分の背景色と文字色が変わります。

kenisebungurobaru


参照:賢威7カスタマイズまとめ一覧