STINGER7STINGER7:スマホ用ナビゲーションを横スクロールメニューに変える方法WordPress2019.06.19先日紹介した「レスポンシブな横スクロールメニュー」をSTINGER7に設置してみたいと思います。三本線のハンバーガーメニューは、ネットに慣れている人ならメニューだと分かるしクリックもするのですが、その三本線の先に情報があるということに気付かない、またはクリックしてわざわざ確認しないという人も少なくはないようです。STINGERをお使いの方で、スマホでもメニューを常に表示するようにしたい!という方は参考にしてみてください。新しくメニューを設置するCSSで見た目を調整まとめ子テーマの使用方法テーマファイルをカスタマイズする時は子テーマを使うことが推奨されています。子テーマを使用すると、テーマ本体をアップデートしてもカスタマイズ内容が消えないというメリットがあります。STINGER7の場合は「header.php」を編集する際には注意が必要です。こちらの記事を参考にしてください↓STINGER7:親テーマの任意のファイルを子テーマで編集する方法スマホ用のハンバーガーメニューを消す場合まずはウィンドウ幅が小さくなると表示される「ハンバーガーメニュー」を消す場合の作業です。-->「アコーディオン」で囲われている部分ですね。これでウィンドウ幅を狭くしてもハンバーガーメニューが表示されなくなりました。新しくメニューを設置する次に新しいメニューを設置します。class="next-btn">></div></div>前回の記事では7つのメニューでしたが、今回は5つにしてみました。?>“>」の赤字の部分がリンク先で、これはトップページへのリンクになっています。メニュー1、メニュー2・・・となっているところが実際に表示される部分です。?>">WordPress</a></li>このように必要なメニューの分だけ編集してください。最後にCSSで見た目を調整します。*/}}上記は5項目のメニュー用のCSSです。*/これがメニュー4つなら25%、6つなら16.66%っていう感じです。あとは背景や文字の色など、サイトに合わせて調整してくださいね!まとめ今回のやつは初心者の方には少し難易度が高いかもしれませんが、良かったら挑戦してみてください。分からない部分などあればコメントかメッセージくださいね。〜♪WordPressSTINGER7\記事が役に立ったらシェアしてね/TwitterFacebookはてブPocketコピーDICEうぇぶあしび同じカテゴリーの記事WordPressSTINGER7/Plus:apple-touch-icon(Webクリップアイコン)を設置する方法WordPressSTINGER7/Plus:テーマのインストールと子テーマの使用方法WordPressFTPソフトCyberduckの使い方。PMDICE様お世話になっております。教えて頂いた通り、設置ができました!やっと念願のハンバーガーではないメニュー表示が実現しました。どこを探してもこの記事のような方法が見つからなかったので助かりました。PMDICE様いつも、拝見させていただいています。Plus』なのですが、カスタマイズのほとんどこの『うぇぶあしび』を元に行っているといっても過言ではありません。今回のスクロールメニューのカスタマイズも取り入れさせていただきました。一つだけどうしても解決出来ないことがあり、お忙しい身であることは重々承知なのですが、なんとか解決出来る方法はないかと、質問させていただきたい次第でございます。通常、stingerのカスタマイズメニューで、《基本カラーと各メニュー設定》のグローバルメニューの色を決める際、《PCメニュー》の《ボーダー右色》でグローバルメニューの項目と項目の間の線の色を決められます。今回のカスタマイズで、CSS(小テーマ)から項目と項目の間の線をborder-rightで記入すると、グローバルメニュー最後の項目にも反映されてしまい、地味にヘッダーとずれる形になってしまい、どうも気になってしまいます。last-childで、どうにかなるかなと、CSS(子テーマ)に記入を色々試してみたのですが、どうにも上手くいきません。解決方法があればご教示いただければ幸いです。AM本当にありがとうございます!記事にしていただけて、とっても分かりやすく本当に助かります!さっそく、実行してみたいと思います。AMコメント名前を宛先感覚で間違えてしまいました(汗)本当にありがとうございます!記事にしていただけて、とっても分かりやすく本当に助かります!さっそく、実行してみたいと思います。AM非常に分かりやすい説明で初心者のワタシでも簡単に設置出来ました!ありがとうございます!あの・・・もしお時間ありましたが最近流行り?のメニューをスクロールした際でも上部に固定する方法も合わせて記事にして記載して頂けないでしょうかヾ(。PMいつも拝見させていただいています。初心者の私にもわかりやすい説明でとても助かっています。ありがとうございます。横スクロールメニューを表示すると右側の>ボタン?が右に出っ張っているせいかスクロールすると左右にぶれてしまいます。>ボタンをもう少し内側に設置するにはどこを編集すればよいでしょうか?初歩的な質問ですみません。ご返答よろしくおねがします。PMこの記事の通りにカスタマイズして頂ければ左右にブレることはないと思うので、他の部分で何かはみ出しているものはないでしょうか?確認してみてくださいませ。T)htmlの初心者でDICEさんのブログにとても助かっています。毎度のことで、やはりスマートフォン画面だとメニュー文字が縦並びになってうまくデザインが反映されておりません。」のようなPC用のメディアクエリの中にコードを書いてしまっているということはないでしょうか?返信コメントをキャンセルメールアドレスが公開されることはありません。超オススメ!iMacの周辺機器&アクセサリ【オシャレ&機能的】タイトルとURLをコピーしました。