STINGER５を横スクロールナビにカスタマイズしてみたよ！

みんな大好きSTINGERシリーズ！僕もSTINGER5を愛用しています。ENJIさん、素敵なテーマありがとうございます。

さて、今日はメニューバーをカスタマイズしてみたので、その手順を公開してみます。

1
ハンバーガーメニューってダメなの？
2
カスタマイズする前に
3
ヘッダーをカスタマイズ
4
CSS（スタイル）をカスタマイズ
5
補足：つまづいたポイント

ハンバーガーメニューってダメなの？

スマホ表示の時、「メニューの位置が少し遠いかなー」「押しづらいよなー」と思っていたのですが、「ハンバーガーメニューって効果悪いらしいよ」という記事をいろんなところで見かけていたので、ガラッと変えることにしました。

デフォルトのメニューバー

デフォルトのメニュー

カスタマイズのゴール

カスタマイズする前に

今回、メニューバーの変更、横スクロールナビの導入にあたり、コードをシンプルにしてみました。

デフォルトでは、

スマホ表示の時→ハンバーガーメニューのナビ
パソコン表示の時→横並びのナビ

と、2つのコードをメディアクエリで指定しています。

僕がやりたいのは、「横スクロールナビの導入」だったので、ハンバーガーメニューは削除しました。ですので、それを踏まえてご覧ください。

CAUTION

バックアップを取ってからお試しください！

ヘッダーをカスタマイズ

まず、

ワードプレスの管理画面
外観
テーマの編集
header.php

と進み、ハンバーガーメニューを削除します。

※今後ハンバーガーメニューに戻す可能性があるのであれば、コメントアウトの方が良いかもしれません。

body開始タグ直後からwrapper開始タグ直前までのコードがハンバーガーメニューです。

<body <?php body_class(); ?>>
<!-- アコーディオン -->←ここから削除
<nav id="s-navi" class="pcnone">
  <dl class="acordion">
    <dt class="trigger">
      <p><span class="op"><i class="fa fa-bars"></i>&nbsp; MENU</span></p>
    </dt>
    <dd class="acordion_tree">
      <ul>
        <?php wp_nav_menu(array('theme_location' => 'navbar'));?>
      </ul>
      <div class="clear"></div>
    </dd>
  </dl>
</nav>
<!-- /アコーディオン -->←ここまで削除
<div id="wrapper">

次に、メニューのheader閉じタグの直前にある、navの設定をいじります。

  <!-- メニュー -->
  <nav class="smanone clearfix">
    <?php
$defaults = array(
	'theme_location'  => 'navbar',
);
wp_nav_menu( $defaults );
?>
  </nav>
</header>

このコードの「smanone」というクラスで、スマホでは表示しないでくださいという命令がされているので、これを削除します。

▼こうなればOKですね。

  <!-- メニュー -->
  <nav class="clearfix">
    <?php
$defaults = array(
	'theme_location'  => 'navbar',
);
wp_nav_menu( $defaults );
?>
  </nav>
</header>

CSS（スタイル）をカスタマイズ

これでスマホ表示の時にハンバーガーメニューがなくなり、パソコンと同じナビが表示されるようになりました。

次に、スマホの時は横スクロールナビ、パソコンの時はデフォルトのナビになるようにスタイルをカスタマイズします。

ワードプレスの管理画面
外観
テーマの編集
style.css

と進みます。

検索フォームの下にメニューという箇所があるので、そこを見つけてください。デフォルトでは、

/*--------------------------------
メニュー
---------------------------------*/
nav li {
	position: relative;
	float: left;
	font-size: 13px;
	padding-left: 10px;
	display: inline;
	padding-right: 10px;
	border-left-width: 1px;
	border-left-style: dotted;
	border-left-color: #CCC;
	padding-top: 5px;
	padding-bottom: 5px;
}
nav li li {
	float: left;
	font-size: 13px;
	padding-left: 10px;
	display: inline;
	padding-right: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
	border: none;
}
nav li a {
	float: left;
	color: #333;
	text-decoration: none;
}
.menu-navigation-container {
	overflow: hidden;
}
nav li a:hover {
	text-decoration: underline;
}
nav li li {
	float: left;
	font-size: 13px;
	padding-left: 10px;
	display: inline;
	padding-right: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
	border: none;
}
nav li a {
	float: left;
	color: #333;
	text-decoration: none;
}
.menu-navigation-container {
	overflow: hidden;
}
nav li a:hover {
	text-decoration: underline;
}
/*--------------------------------
ページャー
---------------------------------*/

のようなコードですが、これを、

/*--------------------------------
メニュー
---------------------------------*/
nav {
    overflow: hidden;
    overflow-x: auto;
    padding-bottom: 5px;
}
nav li {
	position: relative;
    display: table-cell;
    white-space: nowrap;
	font-size: 13px;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
}
nav li li {
    display: table-cell;
	font-size: 13px;
	padding-left: 10px;
	display: inline;
	padding-right: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
	border: none;
}
nav li a {
	text-decoration: none;
}
nav li a:hover {
	text-decoration: underline;
}
.menu-navigation-container {
	overflow: hidden;
}
/*--------------------------------
ページャー
---------------------------------*/

に変更します。これですでに横スクロールは導入できましたが、パソコンでも同じ表示になるので、パソコンの時はデフォルトのナビになるようにします。

元々あったコードを、パソコン表示時のスタイル指定箇所に追加すると考えれば分りやすいかもしれません。

PCサイズのスタイル指定箇所があるので、

/*media Queries PCサイズ
----------------------------------------------------*/
@media only screen and (min-width: 780px) {

ここに、コードを追加します。

/*media Queries PCサイズ
----------------------------------------------------*/
@media only screen and (min-width: 780px) {
/*--------------------------------
メニュー
---------------------------------*/
nav li {
	position: relative;
	float: left;
	font-size: 13px;
	padding-left: 10px;
	display: inline;
	padding-right: 10px;
	border-left-width: 1px;
	border-left-style: dotted;
	border-left-color: #CCC;
	padding-top: 5px;
	padding-bottom: 5px;
}
nav li li {
	float: left;
	font-size: 13px;
	padding-left: 10px;
	display: inline;
	padding-right: 10px;
	padding-top: 5px;
	padding-bottom: 5px;
	border: none;
}

▲こうなればOKです。これだけで横スクロールナビを導入できます。デフォルトのデザインに飽きた方、横スクロールナビを導入したい方、ぜひお試しください！