Diverのスマホ表示用のヘッダーメニュー設定方法|初心者向けマニュアル
Diverのスマホ表示用のヘッダーメニュー設定方法|初心者向けマニュアル
Diverでは、スマホ表示用に下記3つのヘッダーメニューが用意されています。

  • ドロワーメニュー
  • ポップアップメニュー
  • 横スクロールメニュー

今回は、上記それぞれのメニューの設定方法を解説します。

ドロワーメニュー

ドロワーメニューは、画面左上に表示される3本線のメニューです。
「ハンバーガーメニュー」とも呼ばれます。

Diverのドロワーメニュー

Diverのドロワーメニュー

三本線のアイコンをタップすると、設定したメニュー項目が表示されるようになっています。

ドロワーメニューの設定方法

WordPressのダッシュボード左メニューから、 『外観ウィジェット』という順にクリックして進みます。

『外観→ウィジェット』という順にクリック

『外観→ウィジェット』という順にクリック

ウィジェットの設定画面が開きます。
「利用できるウィジェット」から「ドロワーメニュー」のエリアに、メニューに加えたいページやテキストリンクを追加しましょう。

ウィジェット の「ドロワーメニュー」エリア

ウィジェット の「ドロワーメニュー」エリア

これで、ドロワーメニューの設定は完了です。

ポップアップメニュー

ポップアップメニューは、画面右上の虫眼鏡アイコンをタップした時に表示されるメニューです。

Diverのポップアップメニュー

Diverのポップアップメニュー

ポップアップメニューの設定方法

WordPressのダッシュボード左メニューから、 『外観ウィジェット』という順にクリックして進みます。

『外観→ウィジェット』という順にクリック

『外観→ウィジェット』という順にクリック

ウィジェットの設定画面が開きます。
「利用できるウィジェット」から「検索ボックス」のエリアに、メニューに加えたいページやテキストリンクを追加しましょう。

ウィジェットの「検索ボックス」エリア

ウィジェットの「検索ボックス」エリア

これで、ポップアップメニューの設定は完了です。

横スクロールメニュー

横スクロールメニューは、サイトタイトルの下に表示される横長のメニューです。

Diverの横スクロールメニュー

Diverの横スクロールメニュー

横スクロールメニューの設定方法

WordPressのダッシュボード左メニューから、 『外観メニュー』という順にクリックして進みます。

WordPressのダッシュボード左メニューから、 『外観→メニュー』という順にクリック

WordPressのダッシュボード左メニューから、 『外観→メニュー』という順にクリック

横スクロールメニューに設定したいメニューの「メニュー設定」にある『横スクロールメニュー(スマホのみ)』にチェックを入れ、『メニューを保存』ボタンをクリックしましょう。

『横スクロールメニュー(スマホのみ)』にチェックを入れ、『メニューを保存』ボタンをクリック

『横スクロールメニュー(スマホのみ)』にチェックを入れ、『メニューを保存』ボタンをクリック

これで、横スクロールメニューの設定は完了です。

まとめ

今回は、Diverのスマホ表示用のヘッダーメニューの設定方法を解説しました。

Diverのデフォルト設定では、PCで表示されているグローバルメニューがスマホでは表示されないので、必ずヘッダーメニューを設定しておきましょう。

スポンサーリンク

アンケート実施中

テーマニアの内容をさらに充実させるため
アンケートを実施中です。

ご協力お願いいたします。

おすすめの記事