WordPressの標準テーマ「Twenty Twelve」は、レスポンシブの機能の一つにメインメニューのボタン化があります。
これが好ましくない場合もあると思いますので、構造的にはレスポンシブには対応したまま、メニュー部だけボタン化させない方法をご紹介いたします。
600px以上のメニュー動作を指定しているCSSコード
Twenty Twelveは、600px未満の記述を基本にしたうえで、メディアクエリーで600px以上の記述をしています。
つまり、メニューの標準状態はボタンであるということです。その記述はstyle.cssの578行目の「/* Navigation Menu */」から604行目までです。
578 : /* Navigation Menu */
579: .main-navigation {
~
603 : display: inline-block;
604 : }
そして、意味合い的には600px以上の時にボタン解除ということになり、その記述は1460行目の「.main-navigation ul.nav-menu」から、1534行目の記述までです。
1460 : .main-navigation ul.nav-menu,
1461: .main-navigation div.nav-menu > ul {
~
1532 : .menu-toggle {
1533 : display: none;
1534 : }
これらが、ボタン動作をさせている部分です。
ボタン化解除
上記の部分をそのままメディアクエリのCSSコード外に記述することで、常にメニューをボタンではなくテキスト表示にします。
その際、ついでに無駄になるボタン化のコードも消すことにします。
まず579~604行目を削除します。この部分にメニューのCSSコードを記述するとスマートかなと思うので、「/* Navigation Menu */」だけは残しておいた方が良いかと思います。
そして、先程のボタン解除のCSSコードをカット&ペーストします。この時には上記コードを削除したことにより、恐らく1435~1509行目付近になっていると思います。
ここでもう一点。
先程消した部分の中に「.main-navigation li」のfont-sizeを記述するコードが含まれており、これを消したままだと少し文字サイズが大きくなります。
そこで、ペーストした「.main-navigation li」部分に「font-size: 12px;」を追加します。(恐らく606行目付近になっていると思います。)
606 : .main-navigation li {
607 : margin: 0 40px 0 0;
608 : margin: 0 2.857142857rem 0 0;
609 : position: relative;
610 : font-size: 12px;
611 : }
以上で常にメインメニューがボタン表示ではなくテキスト表示されると思います。
さいごに
この方法には1点だけ注意点があります。
それは、孫メニューを作ると画面の右端からはみ出る可能性が高いということです。子メニューは恐らく問題になりづらいと思います。
TwentyTwelveの標準状態を活かすとすればやむを得ないかと。
なので、できれば孫メニューは(できれば子メニューも)作らない方が無難かと思います。
もしどうしても作る必要がある場合には、また別の方法を考える必要はあります。
というわけで、ボタン表示が必要ないという方は試してみてください。
ピンバック: WordPress TwentyTwelveスマホ表示時にメニューがボタン化されているのでPCと同じく全部並べて表示する方法
ピンバック: TwentyTwelveメニューボタンの削除 | その日ぐらし