スマホでのmenu表示を改造~WordPress Twenty Twelveカスタマイズ

更新


スマホでTwentyTwelveを閲覧している場合、デフォルトではmenuボタンを押すことでmenuがプルダウン表示されます。これを、menuボタンを押すことで予めページ下部に作っておいたメニューリストに飛んでいくように改造しました。

  1. サイドバーにカスタムメニュー作成
  2. デフォルトのmenuボタンを撤去
  3. サイドバーのメニューへのページ内リンクを作る
  4. ページ内リンクにスタイルをあててボタン化する

サイドバーにカスタムメニュー作成

管理画面で「外観」→「メニュー」と進んで「+」タブをクリックしてカスタムメニューを作成します。これについては以下のページがよくまとまっています。
WordPress カスタムメニューの使い方(その1:基本): 小粋空間

最後まで読んで、カスタムメニューをサイドバーに表示させるところまでやってください。するとスマホで閲覧時にページ下部にカスタムメニューが表示されるようになります。

デフォルトのmenuボタンを撤去

次に、classとしてmenu-toggleがあてられている以下のようなデフォルトのボタンをheader.phpから削除します。

<h3 class="menu-toggle"><?php _e( 'Menu', 'twentytwelve' ); ?></h3>

次に、先ほど作ったカスタムメニューを実際に表示させてHTMLソースを見ます。

すると、カスタムメニューを囲むaside要素にidがつけられています。ウェブシュフの場合こんな感じになりました。

<aside id="nav_menu-3" class="widget widget_nav_menu">
<h3 class="widget-title">カテゴリー</h3>
<div class="menu-sidebar-container">
<ul id="menu-sidebar" class="menu">
<li>…</li>
<li>…</li>
<li>…</li>
</ul>
</div>
</aside>

aside要素のidを確認したら、先ほどボタンを撤去した跡地に、カスタムメニューへのページ内リンクを作ります。ウェブシュフは以下のようなリンクを作りました。

<a class="menu-mobile" href="#nav_menu-3">Menu</a>

これで、「Menu」というアンカーテキストで、カスタムメニューの場所まですっ飛んでいく、ページ内リンクが出来ました。

ページ内リンクにスタイルをあててボタン化する

このままでは、見た目はMenuというただのリンクテキストです。

そこで、styleをあてていきます。このリンクは、main-navigationというclassが当てられたボックスの中の、menu-mobileというclassが当てられたa要素なので、

.main-navigation a.menu-mobile

に対して、スタイルをあてていきます。スタイルはお好みにカスタマイズすればいいのですが、ウェブシュフは以下のようにしてみました。

.main-navigation a.menu-mobile{
display: block;
text-decoration:none;
padding: 7px 10px;
padding: 0.5rem 0.714285714rem;
font-size: 14px;
font-size: 1rem;
line-height: 1.7142857;
font-weight: bold;
color: #ffffff;
background-color: #000000;
background-repeat: repeat-x;
-moz-border-radius:7px;
-webkit-border-radius:7px;
-khtml-border-radius:7px;
border-radius:7px;
-moz-border-radius:0.5rem;
-webkit-border-radius:0.5rem;
-khtml-border-radius:0.5rem;
border-radius:0.5rem;
box-shadow: 0 1px 2px rgba(64, 64, 64, 0.1);
}

これを、style.cssの/* Navigation Menu */のところに書き込めば、冒頭の画像のようにポチっと押すとメニューリストまですっ飛んでいくようなボタンが出来ます。

しかし、このままだとスマホ以外の画面の幅が広いデバイスでも、MENUボタンが表示されてしまうので、/* Minimum width of 600 pixels. */のところに、以下のような記述を入れます。

.main-navigation a.menu-mobile{
display:none;
}

これで完成。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です