WordPressのヘッダーメニューで最後のメニューだけ2個分の幅を使う方法

WordPressテーマ「Cocoon」を使用していて、ヘッダーメニューの奇数個のメニューで最後のメニューが右に寄ってしまうことが気になる方も多いでしょう。この記事では、最後のメニューだけ2個分の幅を使って、均等にメニューを配置する方法を解説します。

ヘッダーメニューの配置に関する問題点

「Cocoon」テーマを使っていると、メニューアイテムが奇数個になると、最後のメニューが右寄りに表示されてしまうことがあります。これは、メニューの配置方法によるものです。奇数個のメニューでは、残りのスペースを均等に分けることができず、最後のメニューだけが右端に寄ってしまいます。

最後のメニューを2個分の幅を使うためには、カスタムCSSを使って調整を行います。以下のコードを「外観」→「カスタマイズ」→「追加CSS」に追加してください。

.menu-item:last-child { width: calc(50% - 10px); }

このコードは、最後のメニューアイテムの幅を、親要素の50%に設定し、少し余裕を持たせるために10pxを引いています。これにより、最後のメニューが他のメニューアイテムとバランスよく配置されます。

CSSを追加した後、ウェブサイトをリロードしてメニューが理想通りに表示されるか確認してください。もし、メニューアイテムの間隔が広すぎる場合は、コードの値を微調整してみてください。

「Cocoon」テーマを使用したWordPressのヘッダーメニューの最後のアイテムを2個分の幅にする方法は、簡単なCSSの追加で解決できます。メニューアイテムのレイアウトを調整することで、よりバランスの良い表示が可能になります。ぜひ試してみてください。