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

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

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

Healerのドロワーメニューのデモ

Healerのドロワーメニューのデモ

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

fixed-menu-thumbnail
ヘッダーに固定されるメニューの表示方法を紹介します。 このメニューはスマホ閲覧時にのみ表示されます。 PC・タブレットでは表
global-menu-setting-thumbnail
ヘッダー画像と背景の設定に引き続き、 今回は固定ページとグローバルメニューの設定をおこないます。 ヘッダー画像と背景の設定がまだの方

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

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

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

    メニューの設定はカスタマイズからおこないます

    メニューの設定はカスタマイズからおこないます

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

    メニューを選択します。

    [メニュー]の項目をクリックします

    [メニュー]の項目をクリックします

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

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

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

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

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

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

    drawer-menuという名前でメニューを新規作成し、[ドロワーメニュー]にチェックします

    drawer-menuという名前でメニューを新規作成し、[ドロワーメニュー]にチェックします

  5. CSSクラスを入力する

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

    追加したメニューすべての[CSSクラス]に、drawer-menu-itemと入力します

    追加したメニューすべての[CSSクラス]に、drawer-menu-itemと入力します

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

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

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

    [公開]をクリックして完成です

    [公開]をクリックして完成です

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

この記事が良かったら、いいねして
最新記事をチェックしてください!

Twitterで

コメントを残す

入力エリアすべてが必須項目です。メールアドレスが公開されることはありません。