FPウェブシュフ

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


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

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

管理画面で「外観」→「メニュー」と進んで「+」タブをクリックしてカスタムメニューを作成します。これについては以下のページがよくまとまっています。
[img-link url=”http://www.koikikukan.com/archives/2012/02/16-015555.php” title=”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;
}

これで完成。

投稿日

カテゴリー:

投稿者:

webshufu

　最終更新日:

タグ: