スマホでグローバルメニュー（カテゴリー）を横スクロールするCSS－Simplicity

今回はSimplicityでスマホ表示したときにスクロールする、グローバルメニューの実装の備忘録を残しておきます。

スマホで他のブロガーさんのブログを閲覧したときに、ヘッダーにカテゴリーをスクロールで表示させているブログがあり、「なにこれすごい！」とすっごくテンションが上がりました。

👆後からもう一度出てくる画像ですが、こんなグローバルメニューです。グローバルナビっていうのかな。

いくつかのブログで見かけたので、有名どころのテーマに標準で実装されているのでしょうか。

SangoやSTORKではカンタンに設定できそうですね。

そしてこのグローバルメニュー、とっても分かりやすいしブログを読む方にも使いやすそうなのでぜひ実装したい。

いっそのこと、スマホ版のメニューのところはSango風にしちゃおう💡ﾋﾟｺｰﾝ

そんな野望を持って探してみると、Simplicityでもスクロールするグローバルメニューを取り入れいれているブロガーさんがいました。

Simplicityでもスクロールメニュー（←長いので略しますw）が実装できることが分かって歓喜。

ですがスクロールメニューがうまく実装できたという方々の記事を参考にしてコピペをしても、なぜかうまくいきません😣

レスポンシブ機能がオフだからかな～と思いましたが、なにぶんいつもコピペで乗り切っているため、原因を追究できませんでした。

そして今回もやっぱり、別のブログの記事を参考にコピペで乗り切りました。

CSSコードのこと、きちんと勉強したいな～。

ですのでさやかは後述するコードで表示ができていますが、他の方と違う方法のためうまくいかない可能性があります💦

何か不備があったり、正解が分かる方がいれば教えていただければうれしいです。

INDEX

表示ができるけどスクロールしない
Simplicityのスマホ閲覧時にグローバルメニューを横スクロールするためのCSS
まとめ

表示ができるけどスクロールしない

まず最初に参考にさせていただいたのはこちらの記事です。

dalahast.jp

ダーラハストさんの記事。

プラスガジェット

ひがしさんの記事。

ダーラハストさんはひがしさんの記事を参考にされたそうで、使用しているCSSコードはほぼ同じです。

うむ、このふたつの記事にはさやかが知りたいCSSコードがすべて書いてありますぞ。

とっても分かりやすいし、Simplicityを利用しているブログだし、Simplicityでもスクロールするグローバルメニューが表示できることが分かりました。

これは大きな収穫。

いじるところは2か所

この設定では主に「before-main.php」と「style.css」の2か所をいじっています。

before-main.phpはメインカラム（記事）の上の部分を指すのかな？

そこにリストのタグ<li>でリンクを載せてあげるコードを入力します。

そしてstyle.cssでスクロールにしてあげたり、フォントのサイズや色を決めたり、背景色を決めたりするわけですね。

表示はできるけどスクロールできない

そして意気揚々とコピペ。すると表示はされるものの、なぜかスクロールができないという状態・・・。

スクロールにもなっていないし、なぜか2行に分かれちゃうんですよね。

何か原因があるのだと思うけど、設定をいろいろいじっちゃってるしそこまで詳しくはないので突き止めることができませんでした。

とりあえず表示は出来ているからスクロールするCSSをいじろう

そう思ったのでスクロールするCSSを求めていたところ、今度はこちらのブログで解説されていた記事が参考になりました。

フロントのエンド

shintarowfreshさんの記事です。

スクロールするCSSについて、懇切丁寧に書いてくれています。これぞ今求めていた情報。

こちらを参考に、スタイルシートのCSSをいじってみると・・・おぉ～！スクロールできた！✨

というわけで、スマホ版でスクロールするメニューの完成です✨

Simplicityのスマホ閲覧時にグローバルメニューを横スクロールするためのCSS

それではコピペ、いってみましょう。

before-main.php

まずはbefore-main.phpに貼るコピペです。

before-main.phpはデフォルトの状態だとこんな感じです👇

この下に以下のコードを追加します。


<?php if ( wp_is_mobile() ) : ?>
 
<div id="mb-nume">
<span  class="cate"><a href='●URL●'>●リンク文字●</a></span>
<span  class="cate"><a href='●URL●'>●リンク文字●</a></span>
<span  class="cate"><a href='●URL●'>●リンク文字●</a></span>
<span  class="cate"><a href='●URL●'>●リンク文字●</a></span>
</div>

<?php else: ?>
<?php endif; ?>

こちらはダーラハストさん、ひがしさんと同じCSSコードを使用しています。

style.css

そしてstyle.cssですが、こちらはshintarowfreshさんの記事を参考に以下のようなCSSコードにしました。


#mb-nume{
  overflow-y: hidden;
  overflow-x: scroll;
  display: flex;
  -webkit-overflow-scrolling: touch;
  overflow-scrolling: touch;
  width: 100%;
  text-align: center;
  margin-bottom: 2.5em;
}

#mb-nume a{
 color: #fff;/●文字色●/
 text-decoration: none;
 word-wrap: break-word;
}

#mb-nume .cate{
    background-color: #000000;/●背景色●/
    font-size:0.6em;/●文字の大きさ●/
    padding:1em;
    min-width: 100px;
    max-width: 100px;
}

不安なのはこのstyle.cssの横スクロールのコードです。

スマホ2台でうまく表示されるのを確認しましたのでたぶん大丈夫だとは思うのですが・・・何かあるとしたらこの部分だと思います。