ドロワーメニューとは、ハンバーガーメニューをクリックした際に画面の左側からスライドインするメニューパネルです。パソコン[PC]の表示とスマホ・タブレット[SPTB]の表示が指定できます。

ドロワーメニュー[PC]の表示例

下記図は、ハンバーガーメニュー[追従]を指定した表示例です。ハンバーガーメニュー[追従]は、スマホ表示時に画面の右下に浮かぶメニューボタンです。

ドロワーメニュー[SP]の表示例

メニューの設定

メニューは、WordPress管理画面の外観メニューから設定します。メニュー画面の「新しいメニューを作成しましょう。」をクリックし、新規メニューを追加します。

新しいメニューの作成

メニュー名(例 ドロワーメニュー)を入力し、「メニューを作成」ボタンをクリックします。

新しいメニューの作成

次にメニューの位置を設定します。パソコンでWebサイト閲覧時にドロワーメニューを表示したい場合、ドロワーメニュー[PC]にチェックを入れます。 スマホ・タブレットでWebサイト閲覧時にドロワーメニューを表示したい場合は、ドロワーメニュー[SP・TB]にチェックを入れてください。

メニュー項目の追加

ドロワーメニュー[PC] ・ドロワーメニュー[SP・TB]に表示したいメニュー項目をチェックし、「メニューに追加」ボタンをクリックします。

メニュー項目に関する詳細な設定手順は、ヘッダーメニューの設定を参照してください。

ハンバーガーメニューの設定

ドロワーメニューの表示には、ハンバーガーメニューの設定が必須です。外観>カスタマイズ>デザイン設定のハンバーガーメニュー設定でハンバーガーメニューの設定をおこないます。

外観>カスタマイズ>デザイン設定

ドロワーメニューとハンバーガーメニューの関係は次の通りです。

表示したいメニューハンバーガーメニュー設定
ドロワーメニュー[PC]ハンバーガーメニュー[PC]にチェック
ドロワーメニュー[SP・TB]ハンバーガーメニュー[SP・TB]にチェック
ドロワーメニュー[SP・TB]ハンバーガーメニュー[追従]にチェック

ドロワーメニューのデザイン設定は、デザイン設定をご確認ください。