比較表のブロックを追加しました!
メニュー

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

wp-jintest
<景品表示法に基づく表記> 当サイトの記事内に商品プロモーションを含む場合があります。

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

この作り方について解説をしていきます。

ハンバーガーメニューの作成方法

メニュー作成に進む

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

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

 メニューを新規追加

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

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

その状態で「次」のボタンを押します。

メニュー作成

あとはメニューを組んでいくだけです!

あとはメニューを組んで「公開」ボタンを押すだけ!

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

公開すれば完成!

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

すると、こんな感じでスマホでのメニューが組まれているのが確認できると思います↓

メニュー設定を開く

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

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

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

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

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

あとはメニューを組んで「公開」ボタンを押すだけ!

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

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

サブコピーを添える

サブコピーを添えて、よりおしゃれに仕上げることも可能です!

「外観」>「メニュー」に進む

外観>メニュー

WordPressの管理画面から「外観」>「メニュー」に進むと、このような画面になります。

「表示オプション」を開いて「説明」にチェック

画面右上にある「表示オプション」のタブをクリックしてください。そうすると「説明」という項目がありますので、これにチェックを入れましょう。

「説明」の部分にサブコピーを入力

メニューのタブを開くと「説明」の項目が追加されています。ここにサブコピーを入力しておきましょう。

メニュー名にアイコンを添える方法

メニュー名にJINアイコンを添えることも可能です!

「外観」>「メニュー」に進む

WordPressの管理画面から「外観」>「メニュー」に進みます。

添えたいアイコンを選ぶ

JIN:Rアイコンリスト」から、メニューに添えたいアイコンを選んで、コードをコピーしてきてください。

コピーしたアイコンコードを、メニュー名の箇所に貼り付ける

あとはアイコンコードを「ナビゲーションラベル」の箇所に貼り付けてください

ちょっと画像が切れていてわかりにくいですが、ナビゲーションラベルの中には、このように入力しています↓

<i class="jin-ifont-telephone" aria-hidden="true"></i> 電話をかける

「アイコンコード」+「メニュー名」を入力しているだけです。

アイコンコードとメニュー名の間に、半角スペースを入れてあげるとより綺麗に仕上がります!

公開すればメニュー完成

この状態で公開すると、アイコンが添えられているのが確認できると思います。

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

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

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

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

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

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

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

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

JSONエラーでウィジェットが保存できない場合
レンタルサーバーの「WAF設定」が保存の邪魔をしている可能性があります。サーバーにログインして、セキュリティ設定の「WAF設定」をOFFにしてお使いください。

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

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

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

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

他の記事も読んでみましょう
ABOUT ME
ひつじ
ひつじ
ブロガー / デザイナー
WordPressテーマ「JIN」の制作者として、設計とデザインを担当している。

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

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

限定コミュニティへのご案内

  • 参加費は永年無料
  • ブログ仲間が作れる
  • 困ったら相談OK
  • ブログ診断のイベントあり
参加者は3,000人超え!

すでに参加してくれている方は、「BlogCamp wiki」でブログ診断(アーカイブ)の限定動画を閲覧可能です。

wiki内にブログ勉強用の動画がたくさんあります!ぜひ役立ててくださいね。

ひつじくん
ひつじくん
記事URLをコピーしました