賢威7のグローバルメニューカスタマイズ方法

 

今回は賢威7のグローバルメニューのカスタマイズ方法、具体的にはグローバルメニューのリンク文字色と背景色の変更方法を、通常時・マウスオーバー時にわけて解説します。

まだ、グローバルメニューを設置できていない方はこちらを参考に設置してみてください。

▶ 賢威7でグローバルメニューを設置する方法

 

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

WordPress管理画面から「外観 > テーマの編集」へと進み、「base.css」を開きます。

そしてまずは以下のコードを探します。(「賢威7スタンダード版」の場合684行目)

 

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

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

例えば、以下の様にコードを変更すると…

 

以下の様なグローバルメニューになります。

 

しかし、矢印で示した部分の色がまだ変わっていませんよね。次はこの部分を変更します。以下のコードを探します。(「賢威7スタンダード版」の場合617行目)

 

そしてマーカーで示した部分のカラーコードを変更します。例えば以下のように変更します。

 

すると以下のように変更されました。

 

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

WordPress管理画面から「外観 > テーマの編集」へと進み、「base.css」を開きます。

そしてまずは以下のコードを探します。(「賢威7スタンダード版」の場合693行目)

 

上記コードのマーカーを引いた部分がグローバルメニューのマウスオーバー時のリンク文字色・背景色を決めている部分です。こちらのカラーコードを変更します。

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

例えば、以下の様にコードを変更すると…

 

マウスオーバー時は以下の様になります。

 

最後に

今回は賢威7でグローバルメニューのリンク文字色・背景色の変更方法を、通常時とマウスオーバー時に分けて解説しました。

▶ 「賢威7」のカスタマイズ一覧【完全版】

メールマガジン登録





2 Responses to “賢威7のグローバルメニューカスタマイズ方法”

  1. ゆっけ より:

    参考になりました。

    ありがとうございます^^

コメントを残す

サブコンテンツ

このページの先頭へ