今回は、
ヘッダーメニューの表示幅と文字位置
の設定手順をまとめていきたいと思います！
設定箇所
今回の設定対象は「ヘッダー」です。
ヘッダーはサイト内では以下の箇所を示します。
▼設定対象：ヘッダー
Before / After
手順の記載に移る前に設定前後の変化をまとめておきます。
設定を行うことで、以下のように表示が変わります。
▼Before / After
手順
メニューの表示幅の設定
①WordPressの管理画面からCocoon設定をクリック
②ヘッダーをクリック
③トップメニュー幅を設定
※デフォルト：176
※サブメニュー幅と同じ値を設定
④サブメニュー幅を設定
※デフォルト：240
※トップメニュー幅と同じ値を設定
⑤変更をまとめて保存をクリック
メニュー項目の文字位置の設定
①WordPressの管理画面から外観をクリック
②カスタマイズをクリック
③追加CSSをクリック
④サブメニューの文字位置の設定コードを入力
文字位置の設定コード
以下のコードは、サブメニューの文字に左側2emの余白をつけ、見やすく配置する設定です。
※「!important」は、CSSで指定したスタイルの優先度を一番高くするための記述。
※「em」は文字サイズを基準にした単位で、1emはその要素の文字サイズと同じ大きさになる。
/* ■グローバルメニューの設定 */
/* サブメニューの文字位置の設定 */
.sub-menu li a {
padding-left: 2.0em !important;/* 先頭位置の設定 */
}
⑤公開をクリック
まとめ
【注意点】
「メニュー項目の文字位置の設定」の設定にて追加CSSがうまく反映されないことから優先度を一番高くするために「!important」を使用しましたが、使用時には注意が必要です。
「!important」は多用すると今後の設定時にどの設定が反映された状態なのかが分かりにくくなってしまうため、よく考えて使用する必要があります。
【気づき】
追加CSSは設定内容ごとに分けて作成できないため、追記する際は注意して行った方がよさそうです。今回の設定では、コメントや改行などで設定項目の区切りが分かるように記載してみましたが、今後、追記していく中でより良い書き方が無いか考えていきたいですね。
コメント