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

【STORK19カスタマイズ】スマホ表示のドロワーメニューと検索のアイコンを中心にする方法を解説!

アイキャッチ画像

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

今回は、2回目のSTORK19のカスタマイズ記事です!

1回目は、スマホ表示でグローバルメニューを消去する方法を解説しました!

まだ見ていない方は、こちらから見てくださいね!

アイキャッチ画像

では、本題に行きましょう!

今回行ったカスタマイズは、「ドロワーメニューと検索アイコンを中心にする!」です!

この記事を読めば、以下のようなカスタマイズができます!(わからないことがあれば、TwitterのDMまで!)

今回の記事は、「Stork19のドロワーメニューと検索アイコンを中心にするガイド」です!

今回の記事は、以下の人におすすめ!
  1. WordPressテーマの「Stork19」を利用している人
  2. 今回のカスタマイズをしたい人
  3. WordPressブログ初心者の方

すぐにコピペをしたい人は、こちら

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

アイキャッチ画像

今回するカスタマイズ

冒頭でも少し説明したのですが、スマホ表示時のドロワーメニューと検索アイコンを中心に寄せたいんです!

PCの表示画面ではドロワーメニューは表示されませんし、検索アイコンも中心にちゃんと揃っているのですが、スマホ表示画面だと、ドロワーメニューも検索アイコンも中心よりもかなり上に表示されています笑

うん、これが不満なんです笑

では、初めにドロワーメニューと検索アイコンについて少し説明します!

ドロワーメニューと検索アイコンについて

では、ドロワーメニューと検索アイコンはどこにあるのでしょうか!

下の画像を見て下さい!(このサイトのトップページです!)

この左右のボタンのことです!

では、それぞれどんなボタンなのでしょうか!

ドロワーメニューとは、

ドロワーメニューとは、別名でハンバーガーメニューと言われるもので「サイト内のコンテンツなど」を表示してくれるメニューです!

三本線のボタンを押すと、コンテンツなどのメニューが画面に表示される仕組みとなっています!

こんな感じ〜!

検索アイコンとは

検索アイコンとは、そのアイコンをクリックしてサイトのコンテンツなどを検索ができる機能です!

こんな感じ!

ここで、検索するとキーワードに該当する記事を探してくれます!

問題点

そして、今回の問題点は下の画像を見てくれればわかります笑

ドロワーメニューと検索のアイコンが上にありますよね!

ロゴを同じぐらいの高さにほしいのに!と思ってしまいました笑

その高さを調整するために、WordPressをカスタマイズしていきたいと思います!

カスタマイズの手順

カスタマイズの手順は、以下の通りです!

  1. ドロワーメニューと検索アイコン(HTML)のクラス名かID名を取得する。
  2. WordPressの追加CSSにコードを記載する。

二回目も前回と同じように、「クラス名やID名を取得して、追加CSSにコードを書き込む」という手順で行っていきます!

HTMLのクラス名やID名の取得方法については、こちらの記事を読んでください!

アイキャッチ画像

CSSのコードは、次のセクションで説明します!

CSSの指定方法

では、実際に今回カスタマイズするCSSコードをまとめましたので、見て下さい!

今回必要となるのは、前回と同じ「スマホ表示のときだけにCSSを反映させるコード」と「ドロワーメニューと検索アイコンの高さを調節するコード」です!

事前に、ドロワーメニューと検索アイコンのID名を調べておきました!(Stork19を使っている方なら同じだと思います!)

  • ドロアメニューのID名は、「stk_menu_btn」でした!
  • 検索アイコンのID名は、「search_btn」でした!

指定コードの紹介

では、まずスマホ表示の時にCSSを反映させるコードを紹介します!

前回も言いましたが、「780px」と書いてあるところは好きな値に変更してください!

「画面の横幅サイズが780px以下のとき、設定したCSSを反映させる」という意味になります!

続いて、ドロワーメニューと検索アイコンの高さを調整するためのコードを紹介します!

「15px」の所も変更してくれて構いません!

ここのコード意味は、ドロアメニューと検索アイコンの上に余白を追加するものです!

自分のサイトに合わせて、値を調整してみてください!

実際のコードを見てみると

実際に、「追加CSS」に記載するコードは、以下の通りです!

@media screen and (max-width:780px;){
  #search_btn{
    margin-top:15px;
  }
  #stk_menu_btn{
    margin-top:15px;
  }
}

カスタマイズ方法

ここからは、実際にWordPressの画面を見ながら使います!(みなさんも一緒に手を動かしてみてください!)

手順

Step1

まずは、下のコードをコピーしてください!

@media screen and (max-width:780px;){
  #search_btn{
    margin-top:15px;
  }
  #stk_menu_btn{
    margin-top:15px;
  }
}

Step2

「WordPressのダッシュボード」→「外観」→「カスタマイズ」→「追加CSS」の順に進んでください!

Step3

追加CSSの欄に、Step1でコピーしたコードを貼り付けてください!

これで完成です!

では、実際に見てみましょう!

実際に見ると、

無事、中心に配置されました!!笑

カスタマイズ完了です!

終わりに、

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

今回で、Stork19のカスタマイズ記事2つ目になりました!

これからもどんどん出していきたいと思います!

「Stork19」のWordPressテーマは、初心者でも扱いやすくデザインもブログにもってこいです!

ブログを書くことに全集中しましょう!

では、次回のカスタマイズで!