スマホ閲覧時にドロワーメニューを表示する
2018年12月22日
カスタマイズ
カスタマイズ

スマホ用ドロワーメニューの設定方法について紹介します。
ドロワーメニューを設定すると、サイトタイトル右にバーが表示され、タップすると横に開くドロワーメニューが使えるようになります。

Healerのドロワーメニューのデモ
ドロワーメニューを設定すると、スマホ閲覧時の「ヘッダー固定メニュー」と「グローバルメニュー」は強制的に非表示となります。

ヘッダーに固定されるメニューの表示方法を紹介します。
このメニューはスマホ閲覧時にのみ表示されます。
PC・タブレットでは表

ヘッダー画像と背景の設定に引き続き、
今回は固定ページとグローバルメニューの設定をおこないます。
ヘッダー画像と背景の設定がまだの方
ドロワーメニューの設定手順
-
管理画面 > 外観 > カスタマイズへ進む
WordPress管理画面から
> と進みます。 -
[メニュー]を選択する
メニューを選択します。
-
[メニューを新規作成]をクリックする
メニューを新規作成をクリックします。
-
[ドロワーメニュー]用のメニューを作成する
drawer-menuという名前でメニューを作成し、
ドロワーメニュー(スマホ)にチェックを入れます。 -
CSSクラスを入力する
追加したメニューすべてのタブを開き、
CSSクラスにdrawer-menu-item
と入力します。追加したメニューすべての[CSSクラス]に、drawer-menu-itemと入力します
CSSクラスの入力項目が表示されていない方は、
> の後、ページ上部の表示オプションからCSSクラスにチェックを入れてください。 -
[公開]をクリックする
をクリックすると保存されます。
以上、ドロワーメニューの設定手順となります。