スマホ閲覧時にドロワーメニューを表示する

スマホ用ドロワーメニューの設定方法について紹介します。

ドロワーメニューを設定すると、サイトタイトル右にバーが表示され、タップすると横に開くドロワーメニューが使えるようになります。

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

スマホ閲覧時にヘッダーに固定されるメニューを表示する

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

2018年06月23日

【初期設定③】固定ページとグローバルメニューの設定

ヘッダー画像と背景の設定に引き続き、 今回は固定ページとグローバルメニューの設定をおこないます。 ヘッダー画像と背景の設定がまだの方

2016年06月18日

ドロワーメニューの設定手順

1. 管理画面 > 外観 > カスタマイズへ進む

   WordPress管理画面から外観 > カスタマイズと進みます。

   

2. [メニュー]を選択する

   メニューを選択します。

   

3. [メニューを新規作成]をクリックする

   メニューを新規作成をクリックします。

   

4. [ドロワーメニュー]用のメニューを作成する

   drawer-menuという名前でメニューを作成し、
   ドロワーメニュー（スマホ）にチェックを入れます。

   

5. CSSクラスを入力する

   追加したメニューすべてのタブを開き、
   CSSクラスにdrawer-menu-itemと入力します。

   

   ここを忘れる方が多いです。
   メニューのデザインが反映されなくなるので注意してください。

6. [公開]をクリックする

   公開をクリックすると保存されます。

   

以上、ドロワーメニューの設定手順となります。