今回は、
メニューのホバー表示
の設定手順をまとめていきたいと思います！
設定箇所
今回の設定対象は「ヘッダー」です。
ヘッダーはサイト内では以下の箇所を示します。
▼設定対象：ヘッダー
Before / After
手順の記載に移る前に設定前後の変化をまとめておきます。
設定を行うことで、以下のように表示が変わります。
▼Before / After
手順
メニューのホバー表示の設定
①WordPressの管理画面から外観をクリック
②カスタマイズをクリック
③追加CSSをクリック
④メニューのホバー表示の設定コードを入力
設定コード
下記のコードでは、環境依存の記載とデザインカスタマイズの記載に色を付けています。
環境依存 ：テーマやメニュー構造によって変わる。
デザインカスタマイズ：色や太文字、下線など自由に設定できる。
ホバー表示：マウスを重ねたときの見た目の変化
/* メニューのホバー時の表示設定 */
.navi.cf li a:hover {
text-decoration: underline !important; /* 下線の表示設定 */
background-color: #64A390 !important; /* 背景色の設定 */
font-weight: bold !important; /* 太文字の設定 */
}
⑤サブメニューをホバーしている時のトップメニューの表示の設定コードを入力
設定コード
下記のコードでは、環境依存の記載とデザインカスタマイズの記載に色を付けています。
環境依存 ：テーマやメニュー構造によって変わる。
デザインカスタマイズ：色や太文字、下線など自由に設定できる。
以下のコードは設定手順④の設定コードと同じく、「ホバー表示」を設定していますが、違いが2つあります。
・設定対象
⇒下記のコードでは、特定のメニューに対するホバー表示の設定をしています。
・ホバー条件
⇒下記のコードでは、特定のメニュー項目や、その項目が持つサブメニューにマウスを
重ねた時にホバー表示になるように設定をしています。
/* サブメニューをホバーしている時のトップメニュー表示設定 */
#menu-item-532:hover > a,
#menu-item-532.sub-menu:hover {
background-color: #64A390; /* 背景色の設定 */
}
⑥公開をクリック
まとめ
【注意点】
手順にて記載した「環境依存の記載」箇所はブラウザの検証機能から自身で調べる必要がある調べ方を確認した上で行ってください。わからない状態で探すのは苦労するので。。。
また、「環境依存の記載（例.メニューID）」を含むコードに関しては対象のコンテンツ（例.メニュー）一度削除してしまうと、再度同じ内容で作成しなおしても、同じコードは使えないので注意してください。作り直した際のメニューには新たなメニューIDがつくため。
【気づき】
やはり、コードの知識も多少あったほうが設定できる範囲が広がって楽しいですね。CSS自体は比較的シンプルで分かりやすい言語という印象を受けたため、コードの知識が無くてもネットや生成AIなどを活用すれば取り入れやすそうでした。
コメント