ブロックテーマのナビゲーションブロックに行ったカスタマイズいろいろ

ナビゲーションブロックのカスタマイズいろいろ

このページ上部のナビゲーションメニューで実際に行っている内容ですので、実際に見て確認しながら「ふーーん」と納得いただければと思います。

項目別にしているため、同じCSSクラスに対するコードがありますので、使用する対応に応じてまとめてください（もちろんまとめても、そのままでも処理は変わりません）

メニュータイトルがなぜか改行されたりされなかったりするのを防ぐ

なぜかよくわかりませんが、メインメニューやサブメニューを追加した際、英文タイトルだと親メニューの幅を超えても改行なしで表示されるのに、日本語タイトルだと親メニューの幅で改行されてしまうという現象が起きました。

これは以下のコードで対処しました。

.wp-block-navigation-item {
white-space: nowrap;
}

サブメニューの背景を半透明にする

WordPressの標準では、透明度を持った色の設定ができないので、以下のコードを追加して透過させ、ついでに枠線（リップ）を入れ、メインメニューのマウスオーバーからサブメニューが表示されるまでをゆっくりにしてふわっと表示されるようにしています。

.wp-block-navigation__submenu-container {
background-color:#00000095!important;
border:1px solid #333!important;
transition: 1.0s!important;
}

カラーコード（#00000095）は6ケタのHEXコード＋透過度にしていますのでサイトに合わせて調整をしてください。余談：RGBAで指定しなくても、背景のみを透過させることができます（私はこの方が好きです）。

ブロックのスタイルはインラインで出力されていて、優先度が強いので、「!important」を付けて強制しないと適用されませんのでご注意ください

サブメニューの余分な余白をなくす

気になったのが、サブメニューの左右の余白。ちょっと広すぎるので以下で縮小しました。

.wp-block-navigation__submenu-container {
padding: 0.2em 0.2em;
}

サブメニュー内アイテムの体裁を整える

メインメニューの下にあるものすべての項目に対する設定です。サイトエディターで個別に指定していると面倒ですし、サブメニューの親メニュー（ややこしいですが、メインメニュー下でさらにカテゴライズした場合のリンク）には文字装飾機能がないので、CSSで体裁を整えます。

本サイトでは以下のコードで行間を詰め、文字の大きさを少し小さくしています。

.wp-block-navigation__submenu-container {
line-height: 1em;
font-size: 0.9em;
}

親メニューのプルダウンマークを大きくする

サブメニューがある場合、メインメニューの右横に矢印マークが出るのですが、小さすぎるので以下で大きくしました。ついでに色の指定もしています。

.wp-block-navigation .wp-block-navigation__submenu-icon {
height: 1em;
width: 1em;
color:#fff;
}

メインメニューのボタンに透過背景を付ける

背景色が淡色の場合には必要ありませんが、当サイトのように背景画像を使っている場合、画像によっては文字色と被って見にくくなることがあります。文字装飾よりも薄く（透過）で背景色を付けた方がきれいに感じるので、以下のコードで対応しました。

.wp-block-navigation-item {
background-color: #3a3a3a80!important;
}

モバイルのハンバーガーメニューを非表示にする

どうもモバイルメニューの開き方が気に入らないので、以下のコードを使って思い切ってなくすことにしました。

button.wp-block-navigation__responsive-container-open {
display: none;
}

代わりにメニューも含めることができるスライドコンテンツを出力するようにしています。自力で追加したいという方は以下のページを参考にどうぞ（当サイトで配布している「Hima Art Utility」プラグインには搭載されている機能です）。