WordPressSTINGER7

STINGER7:スマホ用ナビゲーションを横スクロールメニューに変える方法

eye_stinger7

先日紹介した「レスポンシブな横スクロールメニュー」をSTINGER7に設置してみたいと思います。

三本線のハンバーガーメニューは、ネットに慣れている人ならメニューだと分かるしクリックもするのですが、その三本線の先に情報があるということに気付かない、またはクリックしてわざわざ確認しないという人も少なくはないようです。

STINGERをお使いの方で、スマホでもメニューを常に表示するようにしたい!という方は参考にしてみてください。

子テーマの使用方法

テーマファイルをカスタマイズする時は子テーマを使うことが推奨されています。
子テーマを使用すると、テーマ本体をアップデートしてもカスタマイズ内容が消えないというメリットがあります。

STINGER7での子テーマの使用方法はこちら↓
STINGER7:テーマのインストールと子テーマの使用方法

特にSTINGER7の場合は「header.php」を編集する際には注意が必要です。
こちらの記事を参考にしてください↓
STINGER7:親テーマの任意のファイルを子テーマで編集する方法

スマホ用のハンバーガーメニューを消す場合

まずはウィンドウ幅が小さくなると表示される「ハンバーガーメニュー」を消す場合の作業です。
「header.php」にある以下のコードを削除しちゃいます↓

<!-- アコーディオン -->
<nav id="s-navi" class="pcnone">
<dl class="acordion">
<dt class="trigger">
<p><span class="op"><i class="fa fa-bars"></i></span></p>
</dt>
<dd class="acordion_tree">
<?php
$defaults = array(
'theme_location' => 'primary-menu',
);
?>
<?php wp_nav_menu( $defaults ); ?>
<div class="clear"></div>
</dd>
</dl>
</nav>
<!-- /アコーディオン -->

「アコーディオン」で囲われている部分ですね。
これでウィンドウ幅を狭くしてもハンバーガーメニューが表示されなくなりました。

新しくメニューを設置する

次に新しいメニューを設置します。
「st-header-menu.php」の中身を全て削除して、こちらのコードに置き換えてください↓

<div class="nav-wrap">
  <div class="scroll-nav">
    <ul>
      <li><a href="<?php echo esc_url( home_url( '/' ) ); ?>">メニュー1</a></li>
      <li><a href="<?php echo esc_url( home_url( '/' ) ); ?>">メニュー2</a></li>
      <li><a href="<?php echo esc_url( home_url( '/' ) ); ?>">メニュー3</a></li>
      <li><a href="<?php echo esc_url( home_url( '/' ) ); ?>">メニュー4</a></li>
      <li><a href="<?php echo esc_url( home_url( '/' ) ); ?>">メニュー5</a></li>
    </ul>
  </div>
  <div class="next-btn">></div>
</div>

前回の記事では7つのメニューでしたが、今回は5つにしてみました。

「<a href=”<?php echo esc_url( home_url( ‘/’ ) ); ?>“>」の赤字の部分がリンク先で、これはトップページへのリンクになっています。

メニュー1、メニュー2・・・となっているところが実際に表示される部分です。

例えば当ブログの「wordpress」のカテゴリだとURLは「https://web-ashibi.net//archives/category/wordpress」なので、このように編集します↓

<li><a href="<?php echo esc_url( home_url( '/archives/category/wordpress' ) ); ?>">WordPress</a></li>

このように必要なメニューの分だけ編集してください。

CSSで見た目を調整

最後にCSSで見た目を調整します。
以下のコードを「style.css」に追加してください↓

.nav-wrap {
  position: relative;
}
.scroll-nav {
  width: 100%;
  background: #555; /* メニューの背景色 */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* 慣性スクロール */
}
.scroll-nav ul {
  max-width: 1060px; /* メニューの最大幅 */
  min-width: 750px; /* メニューの最小幅 */
  height: 40px;
  line-height: 40px;
  margin: 0 auto;
  list-style: none;
  padding-right: 25px; /* 右側の固定分余白を空ける */
}
.scroll-nav ul li {
  float: left;
  width: 150px; /* メニューの個別の幅 */
  text-align: center;
}
.scroll-nav ul li:hover {
  background: #222; /* マウスホバー時の背景色 */
}
.scroll-nav ul li a {
  display: inline-block;
  color: #fff; /* メニューの文字色 */
  text-decoration: none;
}
.next-btn { /* 右側に固定する部分 */
  position: absolute;
  top: 0;
  right: 0;
  width: 25px; /* 固定部分の幅 */
  height: 40px; /* メニューの高さに合わせる */
  line-height: 40px;
  background: #fff;
  color: #555;
}
@media only screen and (min-width: 771px) { /* PCサイズでの指定 */
.scroll-nav ul {
  padding: 0;
}
.scroll-nav ul li {
  width: 20%; /* メニューの個別の幅 */
}
.next-btn {
  display: none; /* 右側の固定部分を非表示 */
}
}

上記は5項目のメニュー用のCSSです。

メニューの数によって変える必要があるのは、下から6行目のPC用の指定の部分↓

width: 20%; /* メニューの個別の幅 */

これがメニュー4つなら25%、6つなら16.66%っていう感じです。

あとは背景や文字の色など、サイトに合わせて調整してくださいね!

まとめ

今回のやつは初心者の方には少し難易度が高いかもしれませんが、良かったら挑戦してみてください。
分からない部分などあればコメントかメッセージくださいね。

ではまた〜♪

WordPress
\記事が役に立ったらシェアしてね/
うぇぶあしび

comment

  1. パルック より:

    DICE様

    お世話になっております。

    教えて頂いた通り、設置ができました!
    やっと念願のハンバーガーではないメニュー表示が実現しました。

    どこを探してもこの記事のような方法が見つからなかったので助かりました。
    どうもありがとうございますm(__)m

  2. R より:

    DICE様

    いつも、拝見させていただいています。

    僕のブログは『STINGER Plus』なのですが、カスタマイズのほとんどこの『うぇぶあしび』を元に行っているといっても過言ではありません。

    今回のスクロールメニューのカスタマイズも取り入れさせていただきました。

    一つだけどうしても解決出来ないことがあり、お忙しい身であることは重々承知なのですが、なんとか解決出来る方法はないかと、質問させていただきたい次第でございます。

    通常、stingerのカスタマイズメニューで、《基本カラーと各メニュー設定》のグローバルメニューの色を決める際、《PCメニュー》の《ボーダー右色》でグローバルメニューの項目と項目の間の線の色を決められます。

    今回のカスタマイズで、CSS(小テーマ)から項目と項目の間の線を

    border-right

    で記入すると、グローバルメニュー最後の項目にも反映されてしまい、地味にヘッダーとずれる形になってしまい、どうも気になってしまいます。

    last-child

    で、どうにかなるかなと、CSS(子テーマ)に記入を色々試してみたのですが、どうにも上手くいきません。

    もし、解決方法があればご教示いただければ幸いです。

    • DICEDICE より:

      お返事遅くなってしまってすいません(^^;)
      「【CSS】スマホサイト用にレスポンシブな横スクロールのメニューを設置する方法」の記事内でメニューに区切り線を入れる方法を追記しましたので見てみてくださいね↓
      web-ashibi.net/archives/1029

      • DICE様 より:

        本当にありがとうございます!

        記事にしていただけて、とっても分かりやすく本当に助かります!

        さっそく、実行してみたいと思います。

        いつも影ながら更新を楽しみにしております(^^)

      • R より:

        コメント名前を宛先感覚で間違えてしまいました(汗)

        本当にありがとうございます!

        記事にしていただけて、とっても分かりやすく本当に助かります!

        さっそく、実行してみたいと思います。

        いつも影ながら更新を楽しみにしております(^^)

  3. ひかる より:

    非常に分かりやすい説明で初心者のワタシでも簡単に設置出来ました!
    ありがとうございます!

    あの・・・もしお時間ありましたが最近流行り?のメニューをスクロールした際でも上部に固定する方法も合わせて記事にして記載して頂けないでしょうかヾ(。&gt;﹏&lt;。)?

    • DICEDICE より:

      コメントありがとうございます!
      メニューを固定する方法も時間がある時に追加しますね〜!

  4. ゆう より:

    いつも拝見させていただいています。初心者の私にもわかりやすい説明でとても助かっています。ありがとうございます。

    横スクロールメニューを表示すると右側の>ボタン?が右に出っ張っているせいかスクロールすると左右にぶれてしまいます。

    >ボタンをもう少し内側に設置するにはどこを編集すればよいでしょうか?

    初歩的な質問ですみません。ご返答よろしくおねがします。

    • DICEDICE より:

      この記事の通りにカスタマイズして頂ければ左右にブレることはないと思うので、他の部分で何かはみ出しているものはないでしょうか?
      確認してみてくださいませ。

  5. Kちゃん より:

    他の記事でもコメントして何度もすみません(T . T)
    htmlの初心者でDICEさんのブログにとても助かっています。
    ありがとうございます!!

    こちらの記事にあるカスタマイズはばっちりできたのですが、
    毎度のことで、やはりスマートフォン画面だとメニュー文字が縦並びになってうまくデザインが反映されておりません。

    ご面倒かと思いますがご返信お待ちしております(T . T)

    • DICEDICE より:

      大丈夫ですよ〜コメントありがとうございます!

      スマホで反映されないということは、「@media only screen and (min-width: 781px) 」のようなPC用のメディアクエリの中にコードを書いてしまっているということはないでしょうか?

タイトルとURLをコピーしました