今回は、
サブメニューの境界線
の設定手順をまとめていきたいと思います！
設定箇所
今回の設定対象は「ヘッダー」です。
ヘッダーはサイト内では以下の箇所を示します。
▼設定対象：ヘッダー
Before / After
手順の記載に移る前に設定前後の変化をまとめておきます。
設定を行うことで、以下のように表示が変わります。
▼Before / After
手順
サブメニューの境界線の設定
①WordPressの管理画面から外観をクリック
②カスタマイズをクリック
③追加CSSをクリック
④サブメニューの境界線の設定コードを入力
サブメニューの境界線の設定コード
以下のコードは、サブメニューに1pxの下線を表示する設定です。
最後の「#E8F4F1」で下線の色を設定
※文字位置のコードと違って「!important」の記載がないコードにて優先度の高い記述にしなくとも変更内容が反映されたためです。これは、サブメニューの下線表示の設定はされていなかったもしくは、優先度の高い設定ではなかったためと考えられます。
border-bottom: 1px solid #E8F4F1;/* 下線の表示設定 */
⑤公開をクリック
まとめ
【注意点】
今回の境界線、前回の文字位置同様に追加CSSの設定対象は「sub-menu」です。この対象によって設定が影響する範囲が変わってくるため、対象範囲を良く考えたうえで設定する必要があります。メニュー全体に設定したい項目なのに、サブメニュー、トップメニューでそれぞれ設定してしまうと、変更するたびに2つのコードを設定する必要があり、作業量が増えてしまいます。
しかし、メニュー全体に設定していれば、1つのコードを変更すれば終わるので作業量を減らすことが出来ます。対象範囲を意識して設定するか、そうでないかでかなり変わりますね。
【気づき】
同じ「sub-menu」に対する設定でも文字位置と境界線で違いがありました。それは、変更するのに「!important」が必要か、そうでないかです。
文字位置を設定する時には「!important」を記載しないと設定内容が反映されませんでしたが、境界線を設定する時には「!important」を記載しなくとも設定内容が反映されました。
おそらく、テーマにて設定されているコードでの設定の違いだと考えられます。そもそも、設定されていない場合や優先度を高く設定されていない場合、これらが原因で違いが出たのではないかと考えられます。まだまだ、こういったコードの特性は理解していない内容が多いので、今後も勉強が必要そうです。
コメント