WordPress / グローバルメニューにマウス重ねた時の色を変更する

WordPress
2021.12.19

WordPress+cocoonでグローバルメニューの項目に
マウスを重ねると、文字の背景色が変わります。

グローバルメニューの色をグレーに設定したところ、
マウスを重ねると薄いグレーに変わるのですが、
この色を変更したいと思います。

親テーマの該当箇所をコピーし、
テーマエディターで子テーマに貼り付け
背景色の部分を変更しました。
以下に手順をご紹介します。

ソースの確認

グローバルメニューがあるウェブページを表示し、
右クリックから「ページのソース表示」を選択します。

ソースを見てみると、197～210行目に”<!– Navigation –>”という部分がありました。
どうやらこの部分のようですが、この中には色の指定がないため、
スタイルシートに記述がありそうです。

そこで、WordPressのダッシュボードから、
「外観」→「テーマエディター」に移動します。
編集するテーマの選択で、
Cocoonの親テーマを選択します。

親テーマを見ていくと、
775行目からコメントで”グローバルメニュー”と書かれた部分がありました。
この部分の中で、色の指定がある所を探します。
849行目からが該当しそうです。
以下に該当箇所を抜粋しました。

.navi-in a {
  color: #333;
  text-decoration: none;
  display: block;
  font-size: 16px;
  transition: all 0.3s ease-in-out;
}
.navi-in a:hover {
  background-color: #f5f8fa;
  transition: all 0.3s ease-in-out;
  color: #333;
}

メニュー部分のソースの説明

.navi-in a { … }が通常状態（マウスが重なっていない状態）、
.navi-in a:hover { … } がマウスが重なった時、
それぞれ{ … }内の設定が反映されます。

.navi-in a の { … } 中身

プロパティ意味値内容
color文字の色#333色の指定で#333333と同じ意味です
text-decoration 文字の線の装飾none指定はありません
display 表示の形式block内容を一つのカタマリとして、縦方向に並べます
font-size 文字の大きさ16px文字の大きさを16ピクセル（画素）にします
transition 状態の遷移all 0.3s ease-in-out遷移関連すべての設定に適用します
状態の遷移時間を0.3秒にします
遷移の始まりと終わりの速度をゆっくりにします

.navi-in a:hover の { … } の中身

プロパティ意味値内容
background-color 背景色#f5f8fa 色の指定です
transition 状態の遷移 all 0.3s ease-in-out 遷移関連すべての設定に適用します
状態の遷移時間を0.3秒にします
遷移の始まりと終わりの速度をゆっくりにします
color 文字の色 #333 色の指定で#333333と同じ意味です

:hover は CSSの疑似クラスでマウスが重なった時に
適用されるスタイルを記述するために使用します。
多くの場合 <a> のタグに使用されます。

この場合、transitionとcolorは通常状態と同じなので、
変化する部分はbackground-colorで指定された背景色のみになります。

子テーマに追加

マウスが重なった時の背景色を”#203744″に
文字の色を”#c0c6c9″とするため、
“.navi-in a:hover { … }”の
“background-color”と”color”の値をそれぞれ変更します。

また、この設定の優先度を上げるため、
“#navi”を追加します。

#navi .navi-in a:hover {
  background-color: #203744;
  transition: all 0.3s ease-in-out;
  color: #c0c6c9;
}

以上追加し、ファイルを更新して再度読み込むと、
変更が反映されました。

まとめ

WordPress+cocoonでグローバルメニューの項目に
マウスを重ねた時の文字色、背景色の変更を行いました。

色の変更だけのため、
記述されている箇所さえ分かれば、
変更は簡単にできますので、
ちょっとしたカスタマイズにおすすめです。

コメント