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

おかぴーおかぴー

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

絵を描く仕事をしたかった僕が、WEBデザイナーになった理由はこちらのプロフィールへ。稼げるブログを作りたい人はこちらへ。

 

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

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

質問をもらった記事

おかぴー こんにちは、WEBデザイナーのおかぴーです! 絵を描く仕事をしたかった僕が、WEBデザイナーになった理由はこちらのプロフィールへ。稼げるブログを作りたい人はこちらへ。   ズラタン[…]

 

ご相談内容

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

 

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

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

 

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

 

今回は、この2つを↓

幼稚園お受験研究所

 

「いくでござる!」

\ ドロン!/

忍者 ドロン

完成形!

幼稚園お受験研究所

 

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

 

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

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

 

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

それでは早速どうぞ!

 

『カスタマイズする前に』 カスタマイズをするときは、子テーマを使って、バックアップをとってから行ってください。functions.phpも必ず子テーマにインストールして、そちらを作業で使用してください。

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

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

 

@media screen and (max-width:375px){
.nav_btn,.search_btn{
display:none;
}
}
コードを追記する場所はこちらで詳しく解説しています↓
関連記事

おかぴー こんにちは、WEBデザイナーのおかぴーです! 絵を描く仕事をしたかった僕が、WEBデザイナーになった理由はこちらのプロフィールへ。稼げるブログを作りたい人はこちらへ。 みみこ 「CS[…]

追加CSS カスタマイズ
おかぴーおかぴー
コードの意味はこんな感じです↓
  • @media screen and (max-width:375px){}
    →横幅375pxの幅までの指定をするコード。この中にカスタマイズで適用させたいコードを書いていきます。
  • .nav_btn,.search_btn
    →STORKのハンバーガーメニュー・検索メニューのボタンのデザインコード。
  • display:none;
    →非表示にするコード。

 

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

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

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

 

高橋さんの感想

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

まとめ

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

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

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

 

おかぴーおかぴー

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

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

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

 

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

 

ご相談内容②

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

 

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

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

 

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

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

ブログ収益化

>2020/4/5 テーマ「THE THOR」でリニューアル!

2020/4/5 テーマ「THE THOR」でリニューアル!

2年近く「STORK」を愛用してきた当ブログは、これから「THE THOR」でデザインも新たに生まれ変わりました。(STORK、今までありがとう!)

これからも当ブログではブログ作りに役立つ情報を発信していきます。よろしくお願いします(o^^o)

CTR IMG