メニューを1列に均等幅表示する方法 グローバルナビのメニューを1列に均等幅表示するには、簡単に書くと以下のような設定を追加する形になります。(※CSSセレクタは、テーマのものに合わせてください。) #navi ul{ display: flex; /*フレキシブルボックス*/ text-align: center; /*センタリングは好みで*/ } #navi ul li{ width: 300px; /*幅は大きめに調節する*/ } テキストのセンタリングが不要ならば、ulとliにそれぞれ1つずつプロパティーを追加設定するだけで均等幅表示を実現することができます。なんて簡単。 動作確認すると、こんな感じに表示されます。 ただ、Can I use…で確認してみると、FlexBoxは、現行のモダンブラウザでは、ほぼ利用できるようですが、Safariなどは「-webkit-」のようにベンダープ
![WordPressグローバルナビの横並びメニューをFlexBoxで均等幅表示する方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/c72899b12274fa98ad9bff8df5636bbd40b5507f/height=288;version=1;width=512/https%3A%2F%2Fnelog.jp%2Fwp-content%2Fuploads%2F2015%2F03%2F118272308_7755a41ff9_o1.jpg)