【STORK19】スマホで「ハンバーガー・検索」メニューを非表示にしたい

stork19 スマホ メニュー
おかぴーおかぴー

こんにちは、WEBデザイナーのおかぴーです!

プロフィールはこちら。ブログデザインと組み合わせて効果的な収益化が目指せるこちらの記事もおすすめです^^

 

以前書いた「STORK」のハンバーガーメニュー・検索メニューの位置を調整するカスタマイズ記事があるのですが、

それを読んでくれた「高橋さん」からご質問をもらいました^^

あわせて読みたい
【STORK】スマホでヘッダー画像と被らないようにメニューボタン・検索ボタンの位置をずらす方法 「STORK」で、スマホでヘッダーロゴと被らないようにメニューボタンの位置をずらす方法をご紹介します。ロゴが見えないを回避!笑

 

目次

ご相談内容

高橋さん高橋さん
こんにちは。
ストークのカスタマイズをしていてこちらのページにたどり着きました。
位置をずらすという方法の他に、ハンバーガーメニュー、サーチを消すということはできるのでしょうか?
色々調べているのですが解決策がみつかりません。
もしお分かりでしたらご教授いただければ幸いです。
おかぴーおかぴー
こんにちはー
ご質問ありがとうございます!
スマホだけ消して、パソコンでは表示させたまま、ということ合ってますか?
その場合、コードをカスタマイズする必要があるので、一緒にカスタマイズしていきましょうー(o^^o)

 

「高橋さん」が使っているテーマは現在販売されている「STORK19」でしたが、1つ前の「STORK」でも同じコードで対応ができたので、

「STORK・STORK19」でメニューを非表示にしたい人のカスタマイズになります。

 

  • ハンバーガーメニュー
    スマートフォンで上の方(ヘッダー部分)に設定したメニューを折りたたんでくれるものです。下の画像の左上の「三」のマーク。
  • 検索メニュー
    キーワードを入れて検索できる右上の「虫メガネ」マーク。

 

今回は、この2つを↓

幼稚園お受験研究所

 

「いくでござる!」

\ ドロン!/

忍者 ドロン

完成形!

幼稚園お受験研究所

 

途中、どこぞやの忍者が参戦してきましたが(笑)、うまく消せたと思います。

 

今回カスタマイズする時に、高橋さんになぜ非表示がいいのか聞いてみたところ、

下に「固定スマホメニュー」を追加したのでヘッダーのメニューは必要ないそうです。

 

確かに、同じように下の固定メニューある人は使える内容かもしれませんね^^

それでは早速どうぞ!

 

『カスタマイズする前に』 カスタマイズをするときは、子テーマを使って、バックアップをとってから行ってください。カスタマイズについては必ず自己責任でお願いいたします。

カスタマイズするファイル

今回は、「CSS」ファイルにコードを追記してカスタマイズします!

 

 CSSコード
@media screen and (max-width:375px){
.nav_btn,.search_btn{
display:none;
}
}
コードを追記する場所はこちらで詳しく解説しています↓
あわせて読みたい
直接テーマを編集せずにワードプレスでCSSをコピペする手順はこちら ブログに慣れている人なら、さくっと分かりますけど、最初は全く未知の領域ですよね。今回はブログ初心者の方にもわかりやすいように、CSSをカスタマイズするためにワードプレスのどこを操作すればいいのかを解説していきたいと思います。
おかぴーおかぴー
コードの意味はこんな感じです↓
  • @media screen and (max-width:375px){}
    →横幅375pxの幅までの指定をするコード。この中にカスタマイズで適用させたいコードを書いていきます。
  • .nav_btn,.search_btn
    →STORKのハンバーガーメニュー・検索メニューのボタンのデザインコード。
  • display:none;
    →非表示にするコード。

 

「375px」は、最近だとiPhone8とかのサイズに相当します。

つまり、それ以上の大きさのスマホやパソコンだと表示されるようになるため、

もう少し大きいサイズまで意識する場合は「480px」に指定するのもいいかもしれません。

 

高橋さんの感想

高橋さん高橋さん
ぜんぜん答えが見つからず行き詰まっていたところ一瞬で解決し、目ん玉が飛び出る驚きです。
フッダー固定にメニューなど置いていましたので、ヘッダーの重複がとても気になっていました。
ありがとうございます。
当方iphone6s使用ですのでわたしの画面では見事に消えてくれました。
おかぴーおかぴー
おぉ!うまく消せてよかったですね^^
目ん玉飛び出ちゃうほどのサポートができてよかったですw

まとめ

今回はヘッダー部分のメニューを非表示にする方法をご紹介しました。

高橋さんのように、下に固定メニューを表示している人は重複してしまうと思うのでブログのタイトルを「バシッ」と見せる方が視認性も高まるかもしれませんね(*^ω^*)

やっぱり、ユーザーのために見やすく・使いやすい=ユーザビリティを考えて作っていくのは正しいと思います。

 

おかぴーおかぴー

カスタマイズした後は、必ず実際に確認をすることを忘れないようにしましょう。

例えば、今回ならスマホで実際に見てみて、非表示にした確認とその操作感を確認しましょう。

他のカスタマイズもそうですが、僕も変更した後は必ず実際にスマホやパソコンでチェックします。

 

と、カスタマイズもうまく行ったところ、追加でご質問がありました。

 

ご相談内容②

高橋さん高橋さん
もう一つお伺いしてもよろしいですか?
またスマホのフッダー固定を導入したことで、記事内の上に飛ばす(戻る)ボタンが隠れてしまいました。
おかぴー様のように可愛い画像に変更しようと思っていたのですが、位置をずらすことは可能なのでしょうか?もしお分かりでしたら教えていただけると幸いです。
おかぴーおかぴー
はい、可能ですよ!
ご相談いただいた内容はこんな感じです↓

 

よーく見ていくと、右下にうっすら「トップへ戻るボタン」が見え隠れしているのが分かりますか?

下固定メニューを設置したため、隠れてしまっています。

 

これって結構悩んでいる人多いかも・・??

改善カスタマイズ記事は現在作成中です^^(もうちょっと待ってね!)

よかったらシェアしてね!
  • URLをコピーしました!

コメント

コメントする

CAPTCHA

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

目次