STORK19のハンバーガーメニューを消す方法

このブログでは、ハンバーガーメニューと検索アイコンを非表示にしています。

その設定の方法をご紹介します。

・ハンバーガーメニューを非表示にしたいです。

上記の悩みを解決します。

この記事では、次のことを書いています。

・ハンバーガーメニューを非表示にした理由
・非表示にするCSSコードの説明
・非表示に設定する手順

この記事に書いてある方法で、画面左のハンバーガーメニューと、画面右の検索アイコンが非表示になり、とてもスッキリしたデザインになります。

^{（ハンバーガーメニューと検索アイコンがない）}

タップできる目次

なぜハンバーガーメニューを非表示に？

STORK19 ではデフォルトで、ハンバーガーメニューが表示されますが、このブログでは非表示にしています。

^{（デフォルトの画面）}

それは、次の理由からです。

・トップページで必要なかった
・デザインがスッキリする

トップページでは、ハンバーガーメニューの使い道がありませんでした。

記事ページでは、ハンバーガーメニューに目次が入ってました。
記事の途中でも、好きな見出しにジャンプできるようにするためです。

ですがトップページには目次がありませんので、ハンバーガーメニューは空になってしまいます。

^{空のハンバーガーメニュー}

どうしようかとも思いましたが、調べてみるとハンバーガーメニューを消しているブログが多くありました。

それらを見て、「ハンバーガーメニューと検索アイコンはない方がいい」と思ったんですね。

結局ハンバーガーメニューは非表示にすることにしました。

そのデザインがスッキリしていて、結果的に良くなったと思います。

ハンバーガーメニューを消すと、検索アイコンも非表示になります。

それはハンバーガーメニューを表示させるコードは、STORK19では検索アイコンを表示させるコードと一緒だからです。

そのあたりのケアも必要になってきます。

・非表示にする CSSコードの紹介
・検索アイコンの代わりの設置

非表示にするCSSコードは私の環境の、子テーマ stork19_custom の style.css に、次のように書いてあります。

1: /* @media screen and (max-width:375px){ */
2:     .nav_btn,.search_btn{
3:         display:none;
4:     }
5:/* } */

これは、おかぴーさんのブログを参考にしました。

内容は次のとおりです。

@media screen and (max-width:375px)
横幅375pxの幅までを指定するコードです。コメントアウトしてるのは、PCでも非表示するためです。スマホのみにしたいときはコメントアウトを外します。
.nav_btn,.search_btn
STORK19のハンバーガーメニュー、検索メニューのボタン
display:none
非表示にするコード

これをコピペして、stork19_custom の style.css に追加するだけで非表示にできます。

お分かりのように、私は @media screen… の行はコメントアウトしてます。
これはPC表示でも非表示にするためです。