ハンバーガーメニューの作り方

ハンバーガーメニューの作成方法（かんたん編）

ハンバーガーメニューというのは、３本線で開閉できるメニューのことですね。

これです↓

まずは初心者向けの「ハンバーガーメニュー」の作り方を解説していきます。

メニュー設定を開く

WordPressの黒いバーから「カスタマイズ」を開いて

メニュー設定へと進みます

そうするとメニュー作成画面があるので「メニューを新規追加」を押しましょう。

メニュー名を「ハンバーガーメニュー」として、チェックを入れて「次」に進みます。

あとは、メニューの中に好きな投稿などを入れていけば、完成です。

「 項目を追加」のボタンを押すと、右側から記事を選んでメニューを追加できるようになります。

内容が整ったら「公開」ボタンを押して保存しましょう。

応用編｜ブロックでハンバーガーメニューを組む

JIN:Rでは、ハンバーガーメニューをブロックで組み上げられるようにしました。

ブロックで組んだ方が、圧倒的に自由度の高くてリッチな表示になるようにしていますので、ぜひ試してみてください。

ハンバーガーウィジェットを開く

WordPress管理画面から「外観」>「ウィジェット」へと進みましょう。するとハンバーガーメニューの項目が見つかります。

さて、あとはこの中をブロックで組み立てていくだけです。

ちなみにマニュアルの場合だと、こんな感じで「カラム」の中に「ナビゲーションメニュー」を入れて整理しています。

※ 申し訳ないですが、プレビューはどうしても狂います。実際の画面と照らし合わせながら作成を進めてください。

PCでもハンバーガーメニューを表示させるには？

JIN:Rでは、PCでもハンバーガーメニューが表示できるようになっています。

「カスタマイズ」 > 「サイトデザイン設定」に進むと、ヘッダーの項目に「PCでもハンバーガーメニューを表示」のボタンがあります。

これをONにしてもらうと、PCでハンバーガーを表示できます！

ひつじ

ブロガー / デザイナー

Twitter

WordPressテーマ「JIN」の制作者として、設計とデザインを担当している。

会社員として働くのが嫌すぎて、2016年に収入0円でブログ起業。SEOとアフィリエイトを組み合わせて開始1年で月100万円超の利益を達成する。

しかしその反動でアフィリエイトには飽きてしまい、もともと好きだったデザインを武器に、チームでWordPressの開発をおこなっている。