Twenty Twelveでメニューをボタン化させない方法

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の標準状態を活かすとすればやむを得ないかと。

なので、できれば孫メニューは(できれば子メニューも)作らない方が無難かと思います。

もしどうしても作る必要がある場合には、また別の方法を考える必要はあります。

というわけで、ボタン表示が必要ないという方は試してみてください。

スポンサードリンク

Twenty Twelveでメニューをボタン化させない方法」への2件のフィードバック

  1. ピンバック: WordPress TwentyTwelveスマホ表示時にメニューがボタン化されているのでPCと同じく全部並べて表示する方法

  2. ピンバック: TwentyTwelveメニューボタンの削除 | その日ぐらし

twitterまたはFacebookでもコメントして頂けます