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

こちらの記事では、ハンバーガーメニューの設定方法についてご説明しています。

ハンバーガーメニューとは

サイト内の三本線のナビゲーションメニューで、主にスマートフォンのＵＩデザインとして用いられており、
クリックすると隠れている情報が表示される仕組みです。

スマートフォンでは、パソコンと比べて画面サイズに制限があるため、グローバルナビゲーションなどを表示させると
画面上が情報過多になったり、デザインが崩れてしまうため、
ハンバーガメニューの中に隠すことで、スッキリと情報を整理することが可能です。

スマホ版のスライドにハンバーガーメニューを設定すると、以下のように画面をスクロールしてもメニュー位置を固定で表示することができます。

メニューの設定方法

1. [サイト設定]の[メニュー]をクリックします。
2. 下記のような画面になりますので、作成したページのデザインに合うように設定を行ってください。
   
   ・表示デバイス共通設定
   　- PC・スマホどちらにも表示したい場合は両方チェックしてください。
   　- チェックをつけたデバイスで表示される全ページに適応されます。
   　  (一部のページだけには設定できません。)
   ・表示位置 (右上 / 左上 / 右下)
   ・メニューアイコンの色
   ・メニューアイコンの背景色
   ・デザイン(円タイプ / 角タイプ)
   
   
3. 最後に[保存する]をクリックして設定完了となります。

メニューリストの表示名・順番について

メニューリストの表示名・順番は、管理画面上のページの並びと同じになるような仕様となっておりますので、必要に応じてページ名の変更、ページの並び替えを行ってください。

ページ名･パス名の変更・ページ並び替え方法はこちら