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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  5. CSSクラスを入力する

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

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

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

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

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

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

Twitterで

コメントを残す

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