WordPressグローバルナビの横並びメニューをFlexBoxで均等幅表示する方法

WordPressのグローバルナビのメニューを均等幅にしたいという需要は結構あるようです。

僕も、フォーラムなどで何度か質問をいただきました。

通常、「横並びのリスト幅」を均一にするには、CSS3前では以下のような、表(テーブル)の表示方法を用いたCSS指定が一般的だったようです。

ただ、これらの記法は個人的には少しややこしい感じがします。(僕が使い慣れていないだけ)

けれど、CSS3のFlexBoxを使えば、もう少し単純に実装できるので、その方法紹介したいと思います。

イメージにすると、これまではこんなのだったのが

これまでのグローバルナビ表示

こんな感じに均等表示されます。

FlexBoxを利用したグローバル並みの均等幅表示

こんな感じの表示を、FlexBoxを用いて手軽に行うことができます。また拡張性は、こちらの方が高いです。

photo by Rich

スポンサーリンク
レクタングル(大)広告

メニューを1列に均等幅表示する方法

グローバルナビのメニューを1列に均等幅表示するには、簡単に書くと以下のような設定を追加する形になります。(※CSSセレクタは、テーマのものに合わせてください。)

#navi ul{
  display: flex; /*フレキシブルボックス*/
  text-align: center; /*センタリングは好みで*/
}

#navi ul li{
  width: 300px; /*幅は大きめに調節する*/
}

テキストのセンタリングが不要ならば、ulとliにそれぞれ1つずつプロパティーを追加設定するだけで均等幅表示を実現することができます。なんて簡単。

動作確認すると、こんな感じに表示されます。

FlexBoxを利用したグローバル並みの均等幅表示

ただ、Can I use…で確認してみると、FlexBoxは、現行のモダンブラウザでは、ほぼ利用できるようですが、Safariなどは「-webkit-」のようにベンダープレフィックスが必要なようです。

Flexible Box Layout Module

また、IE10、古いアンドロイドブラウザなど、様々なことを考慮すると、以下のように書く必要があるかもしれません。

#navi ul{
  display: -webkit-box; /* Android 2~4 */
  -webkit-box-pack: justify; /* Android 2~4 */
  display: -webkit-flex;
  display: -ms-flex;
  display: flex; /*フレキシブルボックス*/
  text-align: center; /*センタリングは好みで*/
}

#navi ul li{
  width: 300px; /*幅は大きめに調節する*/
  -webkit-box-flex: 1; /* Android 2~4 */
}

こうなると、ちょっと面倒くさいですね。古いIEとかAndroidブラウザとかは無視するとしても、-webkit-だけは、まだ使用しておいた方がよさそうです。

メニューを複数行、均等幅表示する方法

上記の方法だと、メニュー項目が多数あった場合は、親要素の幅に収まりきるように、無理やり幅を調節されてしまうので、以下のようにぎゅうぎゅうに詰まった状態で表示されてしまいます。

FlexBoxにより無理やり幅が調節される

そんな事はないようメニューを、均等幅表示させたい場合、ここまでメニューを置く人は、あまりおられないと思いますが、一応、複数行表示する方法も紹介しておきます。

複数行表示させるには、簡単に書くと以下のように書きます。

#navi ul{
  display: flex;
  flex-wrap: wrap; /*子要素の折り返し設定*/
  text-align: center; /*センタリングは好みで*/
}

#navi ul li{
  width: 152px; /*グローバルナビの幅に合わせて調節*/
}

「flex-wrap: wrap;」で折り返し設定をして、liの幅をグローバルナビ幅に調節するだけで、以下のように複数行に渡り、均等幅表示を行うことができます。

flex-wrapで折り返し設定をする

これは、「リストをテーブル表示にする方法」で実現はできないのではないかと思います。(できるとしても、かなりトリッキーな方法が必要そう。)

ベンダープレフィックスをつけた設定は、以下のようになるかと思います。

#navi ul{
  display: -webkit-box; /* Android 2~4 */
  -webkit-box-pack: justify; /* Android 2~4 */
  display: -webkit-flex;
  display: -ms-flex;
  display: flex; /*フレキシブルボックス*/
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; /*子要素の折り返し設定*/
  text-align: center; /*センタリングは好みで*/
}

#navi ul li{
  -webkit-box-flex: 1; /* Android 2~4 */
  width: 152px; /*グローバルナビの幅に合わせて調節*/
}

注意点

今回のカスタマイズの注意点として、以下のようなことがあります。

  • あくまで一般的なパソコン表示時のグローバルナビ用の設定
  • 上記の設定は、一般的なグローバルナビスタイルに追加する設定
  • サブメニューを表示する場合のことは考慮していません
  • モバイルでメニュースタイルを変更している場合は影響するので修正が必要
  • グローバルナビのCSSセレクターはそれぞれ利用しているテーマに合わせる必要がある

あと、やはりフレックスボックスは新しい機能なので、いろいろなブラウザで動作確認する必要はあるかもしれません。

詳しいフレックスボックスの使い方などは、以下のサイトが分かりやすいと思います。

まとめ

ベンダープレフィックスを書く必要さえなければ、フレキシブルボックスは、数行追加するだけで、使えるようになるので、かなり簡単です。

とりあえず、これからはベンダープレフィックスなしでも対応するブラウザが増えていくと思いますので、何年後かには、利用もさらに手軽になるのではないかと思います。

スポンサーリンク
レクタングル(大)広告
レクタングル(大)広告

スポンサーリンク

『WordPressグローバルナビの横並びメニューをFlexBoxで均等幅表示する方法』へのコメント

  1. 名前:Hidekichi 投稿日:2015/03/21(土) 14:30:01 ID:efbed8e1c

    均等幅もそうですが、設定的にはmin-widthで最小サイズを設定しておき、flex: 1 25%;のような表記で書いておくと便利です。

    例: ウチのサイト(xdomain)の記事内top snsボタン(バイラル)

    ul以下のliは全て同じ設定ですが、コメントボタンが自動で100%まで伸びます。min-widthは使ってませんけれども(汗)
    #sns-group-top ul liのflexを flex: 1 20%にしたり、1 15%あたりも良いかも知れません。1 autoの設定にするとflexboxらしい動作になります。

  2. アバター画像 名前:わいひら 投稿日:2015/03/21(土) 14:57:39 ID:df92dc95e

    この度は、良いCSS設定を教えていただきありがとうございます。
    FlexBox使い出すと楽しいですね。

    あの、コメントボタンはそのような設定になっていたんですね。
    参考にさせていただき、今度何かに使ってみようと思います。