Wix Studio エディタ:ハンバーガーメニューを使用する
6分
この記事内
- ハンバーガーメニューを追加する
- ハンバーガーメニューを管理する
- ハンバーガーメニューをカスタマイズする
ハンバーガーメニューは、訪問者がメニューアイコンをクリックしたときだけ表示される、すっきりとしたスペース効率の良いメニューです。
Wix Studio エディタでは、ハンバーガーメニューのデザイン要素を完全に制御できるため、クライアントの特定のブランディングやスタイルに合わせてカスタマイズすることができます。この柔軟性により、クライアントのビジョンに合わせた直感的なナビゲーション体験を作成することができます。

ハンバーガーメニューを追加する
ハンバーガーメニューは、「要素を追加」パネルからいつでも追加可能です。クライアントのニーズに応じて、サイトに複数のメニューを追加し、個別に管理・カスタマイズすることができます。
ハンバーガーメニューを追加する方法:
- エディタ左側で「要素を追加」
をクリックします。 - 「メニュー・検索」をクリックします。
- 「ハンバーガーメニュー」をクリックします。
- 該当するメニューをページ上の希望する場所にドラッグアンドドロップします。

ハンバーガーメニューを管理する
サイトにハンバーガーメニューを追加したら、それに表示するメニューを選択します。個々のハンバーガーメニューに異なるメニューを表示し、それが属するページ / セクションに固有のコンテキストを提供することができます。
ハンバーガーメニューを管理する方法:
- ハンバーガーメニューアイコンを選択します。
- 「メニューを編集」をクリックします。
- 縦型メニュー要素を選択します。
- 「メニューを管理」をクリックします。
- 「表示するメニューを選択」下のドロップダウンをクリックします。
- 既存のメニュー:ドロップダウンからメニューを選択します。
- 新しいメニュー:
- 「サイトメニューを管理」をクリックします。
- 「+メニューを追加」をクリックし、カスタムメニューを作成します。

ヒント:
パネル下部の「+アイテムを追加」をクリックすると、選択したメニューにアイテムを追加できます。
ハンバーガーメニューをカスタマイズする
ハンバーガーメニューを追加したら、サイトのデザインと操作感に合わせてメニューのあらゆる部分をカスタマイズします。
ハンバーガーメニューをカスタマイズする方法:
- ハンバーガーメニューアイコンを選択します。
- カスタマイズするものを選択します:
ハンバーガーメニューアイコン
メニューコンテナとオーバーレイ
縦型メニュー
閉じるボタンアイコン


をクリックし、表示するアイコンやテキストを決定します。
をクリックして、アイコンやテキストの配置を調整します。アイコンとテキストの両方を表示している場合は、それらの間の間隔とアイコンの位置を設定できます。
をクリックして、画面全体に表示するか、キャンバス上でサイズを調整します。
をクリックして、背景オーバーレイを表示するかどうか、およびコンテナの外側をタップしてコンテナを閉じるオプションを選択します。

をクリックして、メニューアイテムとサブメニューの矢印の配置を変更します。
