毎日、Twitterで日々の成果や頑張りをツイートしてします!

【STORK19カスタマイズ】スマホで表示されるグローバルメニューを消す方法

アイキャッチ画像

みなさん、お疲れ様です!カズトンです!

最近、WordPressのテーマをコツコツとカスタマイズしています!

すごく楽しいですよね!(CSSが反応しなくて、イライラすることもありますが笑)

自分がカスタマイズした方法を紹介していくので、よかったら見ていってくださいな!

(あと、自分が見返せれるように笑)

ちなみに、自分が使っているWordPressのテーマは「Stork19」です!

では、本題に参ります!

今回行ったカスタマイズは、「スマホ時のグローバルメニューを消去する!」です!

この記事を読めば、以下のようにカスタマイズすることができます!

(もしわからないことがあれば、TwitterのDMからでも聞いて下さい!)

今回の記事は、「Stork19のグローバルメニュー(スマホ時)を消し方ガイド」です!

この記事は、こんな人におすすめ!
  1. WordPressのテーマ「Stork19」を利用している人
  2. HTMLやCSSがわからない人

知識はゼロで、コピペだけでカスタマイズしたいという方もいると思います!そんな方は、下のリンクから飛んでください!

コピペだけしたい方は、こちら

WordPreesのカスタマイズの方法を詳しく知りたい人は、こちらの記事を読んで下さい!

アイキャッチ画像

今回するカスタマイズ

冒頭でも少し説明しましたが、スマホ時の「グローバルメニュー」を消去するカスタマイズをしていきます!

スマホ時はグローバルメニューを使わずに、ハンバーガーメニューだけのほうがスッキリして見えますよね!

なので、今回はスマホ時にグローバルメニューを非表示にするカスタマイズをしようと思います!

まずは、グローバルメニューとは?

グローバルメニューとは?

グローバルメニューとは、サイト内の主要なコンテンツをまとめたメニューです!

よく、サイトの一番上にあることが多いです!

このサイトのトップページにもあります!(トップページはこちら!)

これは、PC版の画面表示です!

問題点

PC版の表示は全然問題ないんですが、スマホ版の表示では問題があったんです!

では、スマホ表示を見てみましょう!

えっ!グローバルメニューいらなくね?って思いました笑

ごちゃごちゃしてるし、「お問い合わせ」が途中で切れていてその上にボタンがかぶっている笑

これは、いやだ!と同じ気持ちの人いませんか?笑

ハンバーガーメニューがあるんだから、グローバルメニューいらないよなって思いました笑

なので、赤枠で囲んだ部分を消したいと思います!

ハンバーガーメニューは、ボタンをクリックするとグローバルメニューを表示してくれるものだと思ってもらっていいです!

カスタマイズの手順

今回の手順は、以下の通りです!

  1. グローバルメニューのクラス名またはID名を取得する。
  2. カスタマイズの追加CSSにコードを記述する。

クラス名やID名の調べ方について、詳しく知りたい場合はこちら↓↓↓

アイキャッチ画像

今回の記事では、クラス名/ID名の取得は割愛します!

「Stork19」のテーマを使っている方は、ID名が「g_nav」となっていると思います!もし適応されない場合は、上の記事で説明しているような「Google chromeからの検証」で取得してください!

CSSの指定方法

では、実際にCSSの指定方法をまとめてみました!

「スマホ表示のときだけにCSSを反映させるコード」と「実際にグローバルメニューを消すコード」の2つが必要になります!

指定コードを紹介

スマホ表示にCSSを当てるためのコードは、

「780px」と書いているところは、好きな値に変更できます!

スマホの横画面サイズを指定してください!

「780px」と設定したときは、横幅が780px以下の時にCSSを反映させるという意味です!

グローバルメニューを消すCSSは、

今回のグローバルメニューのID名は、「g_nav」だったので、「#g_nav」と指定しました。

ID名やクラス名は、Google chromeの検証から探して下さい!

探し方がわからない方は、こちらから確認してください!

アイキャッチ画像
  • クラス名で指定する場合は、「.g_nav」のように、前にピリオドをつけて下さい。
  • ID名で指定する場合は、「#g_nav」のように、前にシャープをつけて下さい。

実際のコードで見ると、

実際には、さきほどのコードたちを合体させます!

以下のコードを、WordPressの追加CSSにコピペしたら完成です!

/*スマホ表示の時に、グローバルメニューを非表示*/
@media screen and (max-width:780px){
 #g_nav{
  display:none;
 }
}

カスタマイズ方法

ここからは、実際にWordPressの画面を追いながら説明していきます!

画像を使いながら説明していくので、手元を動かして見ていってください!

手順

Step1

下のCSSコードをコピーしてください!

/*スマホ表示の時に、グローバルメニューを非表示*/
@media screen and (max-width:780px){
 #g_nav{
  display:none;
 }
}

Step2

「WordPressのダッシュボード」→「外観」→「カスタマイズ」→「追加CSS」の順番に画面を進めていってください!

Step3

追加CSSの欄に先ほどのコードを貼り付けたら終わり!

実際に見ると、

無事に消えました!

よかった!!

みなさんもうまくいきましたか?

コピペでうまく行かなかった方は、クラス名やID名が間違えている可能性がありますので、Google chromeの検証機能で確認してください!

終わりに、

最後まで、読んでいただきありがとうございます!

無事にできましたかね?

これからもどんどん「Stork19」のカスタマイズも出していきます!(100記事ぐらい書いてる頃には、すんごいカスタマイズができるようになっているのだろうか笑)

「Stork19」は、初心者でも使いやすく初期デザインが良いです!

ブログを始めたばかりの方は、ブログを書くことに全集中できますし、カスタマイズもしやすいと思います!

では、また!

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です