![スマホでブログを見た時に左上に表示されるメニューの作り方](https://blokatu.com/wp-content/uploads/2022/04/hamburger_menu-0.jpg)
スマートフォンでブログを見た時に、左上に表示されている三本線「 ≡ 」のMENU(メニュー)の作り方を説明します。
![](https://blokatu.com/wp-content/uploads/2021/09/titi-icon-1-100_100.jpg)
設定していないデフォルトのままだと、メニューをクリックしても、何も表示されないんですよね。
WordPressテーマのTHE SONICでの作り方です。他のテーマでは作り方が異なると思います。
ちなみに、この三本線「 ≡ 」は、ハンバーガーメニューと呼ばれています。
THE SONICの操作画面では「(モバイル)ハンバーガーメニュー」となっています。
それでは早速。
(モバイル)ハンバーガーメニューの作り方
ウィジェットの一覧ページに移動
WordPressの管理画面にログインして左の外観>ウィジェットをクリック。
![WordPressの管理画面にログイン、左の外観>ウィジェットをクリック。](https://blokatu.com/wp-content/uploads/2022/04/hamburger_menu-1.jpg)
![WordPressの管理画面にログイン、左の外観>ウィジェットをクリック。](https://blokatu.com/wp-content/uploads/2022/04/hamburger_menu-1.jpg)
(モバイル)ハンバーガーメニューに表示させたい項目を選択
ウィジェットのページに移動。
画面をスクロールすると画面中央の最下段に(モバイル)ハンバーガーメニューの項目があります。
![ウィジェットのページ、スクロールすると画面中央の最下段に](https://blokatu.com/wp-content/uploads/2022/04/hamburger_menu-2.jpg)
![ウィジェットのページ、スクロールすると画面中央の最下段に](https://blokatu.com/wp-content/uploads/2022/04/hamburger_menu-2.jpg)
![ウィジェットのページの最下段にモバイルハンバーガーメニューがあります。](https://blokatu.com/wp-content/uploads/2022/04/hamburger_menu-3.jpg)
![ウィジェットのページの最下段にモバイルハンバーガーメニューがあります。](https://blokatu.com/wp-content/uploads/2022/04/hamburger_menu-3.jpg)
ウィジェットの詳細ページに移動
(モバイル)ハンバーガーメニューに表示させたいウィジェットを左の一覧から選択します。
目的のウィジェットの右端の追加ボタンをクリックします。
例として「人気記事」を表示させたいと思います。
![ハンバーガーメニューに人気記事を表示させたいと思います。](https://blokatu.com/wp-content/uploads/2022/04/hamburger_menu-4.jpg)
![ハンバーガーメニューに人気記事を表示させたいと思います。](https://blokatu.com/wp-content/uploads/2022/04/hamburger_menu-4.jpg)
[THE SONIC人気記事]の追加ボタンをクリックして記事詳細に移動します。
表示させたいタイトルを入力し、各項目を設定していきましょう。
![ウィジェットの人気記事詳細に移動します。表示させたいタイトルを入力し、各項目を設定していきましょう。](https://blokatu.com/wp-content/uploads/2022/04/hamburger_menu-5-740x437.jpg)
![ウィジェットの人気記事詳細に移動します。表示させたいタイトルを入力し、各項目を設定していきましょう。](https://blokatu.com/wp-content/uploads/2022/04/hamburger_menu-5-740x437.jpg)
下にスクロールしていき、表示させたい「(モバイル)ハンバーガーメニュー」にチェックを入れ、表示させたい順位をプルダウンから選びます。
![表示させたい(モバイル)ハンバーガーメニューにチェックを入れ、表示させたい順位をプルダウンから選びます。](https://blokatu.com/wp-content/uploads/2022/04/hamburger_menu-6.jpg)
![表示させたい(モバイル)ハンバーガーメニューにチェックを入れ、表示させたい順位をプルダウンから選びます。](https://blokatu.com/wp-content/uploads/2022/04/hamburger_menu-6.jpg)
そして、最後に「ウィジェットを保存」ボタンをクリック。
![そして、最後に「ウィジェットを保存」ボタンをクリック。](https://blokatu.com/wp-content/uploads/2022/04/hamburger_menu-7.jpg)
![そして、最後に「ウィジェットを保存」ボタンをクリック。](https://blokatu.com/wp-content/uploads/2022/04/hamburger_menu-7.jpg)
そうすると、(モバイル)ハンバーガーメニューの欄に人気記事が挿入されました。
![(モバイル)ハンバーガーメニューの欄に人気記事が挿入されました。](https://blokatu.com/wp-content/uploads/2022/04/hamburger_menu-8.jpg)
![(モバイル)ハンバーガーメニューの欄に人気記事が挿入されました。](https://blokatu.com/wp-content/uploads/2022/04/hamburger_menu-8.jpg)
これで完了です。
スマートフォンでハンバーガーメニューをクリックして確認してみます。
![スマートフォンでハンバーガーメニューをクリックして確認してみます。](https://blokatu.com/wp-content/uploads/2022/04/hamburger_menu-0.jpg)
![スマートフォンでハンバーガーメニューをクリックして確認してみます。](https://blokatu.com/wp-content/uploads/2022/04/hamburger_menu-0.jpg)
下の画像のように人気記事が表示されました。
![スマホの左上のメニューをクリックすると人気記事が表示されるようになりました。](https://blokatu.com/wp-content/uploads/2022/04/hamburger_menu-9-342x740.jpg)
![スマホの左上のメニューをクリックすると人気記事が表示されるようになりました。](https://blokatu.com/wp-content/uploads/2022/04/hamburger_menu-9-342x740.jpg)
まとめ
WordPressテーマのTHE SONICで作っているブログを、スマートフォンで見た時に、左上に表示される「≡」ハンバーガメニューの作り方を紹介しました。
初期設定では何も表示されない仕様になっています。この部分どこで設定したらいいかが、いまいちわかりずらい...。
この方法でPC、スマホのヘッダーやフッターなどその他の場所に表示させることもできます。
色々と試して訪問してくれたユーザーが使いやすいメニューの作成をしてみましょう。
ちなみにテキストで ≡ を表示させるには「ごうどう」と打って変換すると出てきますよ。