賢威7のグローバルメニューカスタマイズ方法
今回は賢威7のグローバルメニューのカスタマイズ方法、具体的にはグローバルメニューのリンク文字色と背景色の変更方法を、通常時・マウスオーバー時にわけて解説します。
まだ、グローバルメニューを設置できていない方はこちらを参考に設置してみてください。
通常時のリンク文字色・背景色変更方法
WordPress管理画面から「外観 > テーマの編集」へと進み、「base.css」を開きます。
そしてまずは以下のコードを探します。（「賢威7スタンダード版」の場合684行目）
|
1 2 3 4 5 6 7 8 |
.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」のカラーコードを変更すると背景色を変更できます。
例えば、以下の様にコードを変更すると…
|
1 2 3 4 5 6 7 8 |
.global-nav-in li a{ display: block; min-height: 1.5em; /*メニュー毎に高さが変わるときに調整*/ padding: 1em; /*画像をメニューにする場合は値を0に*/ background-color: #333; color: #049336; text-decoration: none; } |
以下の様なグローバルメニューになります。
しかし、矢印で示した部分の色がまだ変わっていませんよね。次はこの部分を変更します。以下のコードを探します。（「賢威7スタンダード版」の場合617行目）
|
1 2 3 4 |
.global-nav{ padding: 0; background: #8f8f8f; } |
そしてマーカーで示した部分のカラーコードを変更します。例えば以下のように変更します。
|
1 2 3 4 |
.global-nav{ padding: 0; background: #333; } |
すると以下のように変更されました。
マウスオーバー時のリンク文字色・背景色変更方法
WordPress管理画面から「外観 > テーマの編集」へと進み、「base.css」を開きます。
そしてまずは以下のコードを探します。（「賢威7スタンダード版」の場合693行目）
|
1 2 3 4 5 6 |
.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」のカラーコードを変更するとマウスオーバー時の背景色を変更できます。
例えば、以下の様にコードを変更すると…
|
1 2 3 4 5 6 |
.global-nav-in li a:hover, .global-nav-in li a:active, .global-nav-in li a:focus{ background-color: #049336; color: #333; } |
マウスオーバー時は以下の様になります。
最後に
今回は賢威7でグローバルメニューのリンク文字色・背景色の変更方法を、通常時とマウスオーバー時に分けて解説しました。
タグ：賢威