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

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

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

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

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

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

stinger5-nav-1

 

デフォルトのメニュー

stinger5-nav-2

 

カスタマイズのゴール

stinger5-nav-3

カスタマイズする前に

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

デフォルトでは、

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

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

 

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

CAUTION

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

ヘッダーをカスタマイズ

まず、

  1. ワードプレスの管理画面
  2. 外観
  3. テーマの編集
  4. 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(スタイル)をカスタマイズ

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

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

  1. ワードプレスの管理画面
  2. 外観
  3. テーマの編集
  4. 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です。これだけで横スクロールナビを導入できます。デフォルトのデザインに飽きた方、横スクロールナビを導入したい方、ぜひお試しください!

補足:つまづいたポイント

コードもシンプルになってスッキリしました。「テーブルセルにしてー」「ブロック要素にしてー」と思考錯誤しながら取り掛かったのですが、苦労しました。

テーブルセルにしたところまでは良かったのですが、文字が縦になってしまいお手上げ状態。その時出会ったのが、

white-space: nowrap;

というコードです。初心者には見慣れないコードでした(汗)

 

このコードは「自動的に改行しちゃダメだよ!」と命令してくれるコードで、これのおかげで無事にカスタマイズできました。

まだまだ勉強不足ですね…!これからも頑張ります!

キャリアアップ ブラックな求人広告を見分けてホワイト企業に応募する方法。

キャリアアップ 給料が安い?残業が多い?仕事を辞めたい20代の転職ハック。

キャリアアップ 初めての就職・転職が不安な方におすすめの転職エージェント

この記事が良かったらいいね!最新情報が届きます!

この記事を書いた人 :

WEBメディア「MORIAWASE」の運営者。求人広告会社の元施設長で、趣味は音楽制作(DTM)。育児に奮闘中です!