Wix Harmony エディタ：ハンバーガーメニューを使用する
8分
この記事内
- ハンバーガーメニューを追加する
- メニューを開くボタンをカスタマイズする
- ハンバーガーメニューのコンテナをカスタマイズする
- メニューを閉じるボタンをカスタマイズする
この記事では、2025年12月にリリースされた新 Wix Harmony エディタについて説明します。Wix Harmony エディタは、現在一部のユーザー様のみご利用いただけます。Wix Harmony エディタまたは Wix エディタのどちらを使用しているか不明な場合は、こちらで詳細を確認してください。
ハンバーガーメニューは、訪問者がメニューアイコンをクリックしたときだけ表示される、すっきりとしたスペース効率の良いメニューです。
ハンバーガーメニューの設定やデザインなどは、特定のブランドやスタイルに合わせてカスタマイズすることができます。
ハンバーガーメニューを追加する
サイトにハンバーガーメニューを追加するには、「パーツを追加」パネルから新しいハンバーガーメニューを追加する方法と、アクションバーから既存のメニューをハンバーガーメニューに切り替える方法の 2種類があります。
ハンバーガーメニューを追加する方法：
- エディタに移動します。
- 実行する内容を選択します：
新しいハンバーガーメニューを追加する
既存のレイアウトをハンバーガーに変更する
ヒント：
デスクトップのヘッダーに横型メニューまたは縦型メニューを追加すると、モバイルでは自動的にハンバーガーメニューとして表示されます。これにより、訪問者があらゆるデバイスからメニューにアクセスできるようになります。
メニューを開くボタンをカスタマイズする
サイトの重要なナビゲーションパーツであるハンバーガーメニューのボタンは、あなたのスタイルに合わせてカスタマイズすることができます。アイコンやボタンテキストを編集したり、ボタンの塗りつぶし色、間隔、アニメーションなどを細かく調整したりすることができます。
「開く」ボタンをカスタマイズする方法：
- エディタに移動します。
- ハンバーガーメニューアイコンをクリックします。
- ボタンのカスタマイズ方法を選択します：
アイコンを変更する
をクリックします。ボタンのテキストを設定する
をクリックします。ボタンをデザインする
をクリックします。ハンバーガーメニューのコンテナをカスタマイズする
訪問者がハンバーガーメニューをクリックすると、読みやすいようサイトメニューがオーバーレイ付きの大きなコンテナ内に表示されます。コンテナ、メニュー、オーバーレイの色は調整することができるほか、コンテナにはロゴやソーシャルバーなどのパーツを追加することもできます。
ハンバーガーメニューのコンテナをカスタマイズする方法：
- エディタに移動します。
- コンテナにアクセスします：
- ハンバーガーメニューアイコンをクリックします。
- 「Regular Mode（通常モード）」ドロップダウンをクリックし、「ハンバーガーメニュー」を選択します。
- 実行する内容を選択します：
コンテナをデザインする
：ブランドカラーまたはカスタムカラーのいずれかを選択し、コンテナの背景色とオーバーレイの色を変更します。
：コンテナの枠線の色、太さ、スタイルを変更します。「個々の枠線を編集」アイコン 
をクリックすると、それぞれの枠線を個別にデザインすることができます。
：「半径」下のスライダーをドラッグし、コンテナの角の丸みを調整します。「個々の角を編集」アイコン 
をクリックすると、それぞれの角を個別にデザインすることができます。
：内側と外側の影を適用し、位置、ぼかし、色などを調整して、コンテナが立体的に見えるようにします。
：コンテナの周りの余白を調整して、コンテナにゆとりを持たせます。
：閉じるボタン、コンテナ内のメニュー、およびページに対するコンテナの位置など、すべてのパーツを配置する場所を決定します。コンテナが占めるスペース（例：ページの 3分の1、半分など）も選択することができます。メニューを管理・デザインする
コンテナにパーツを追加する
編集は完了しましたか？
フローティングバーの「編集中：ハンバーガーメニュー」横の「完了」をクリックしてページに戻ります。
メニューを閉じるボタンをカスタマイズする
ハンバーガーメニューを閉じるために訪問者がクリックするボタンをカスタマイズします。アイコンを変更したり、「閉じる」などの分かりやすいテキストを追加したり、好みに合わせてカスタマイズすることができます。
「閉じる」ボタンをカスタマイズする方法：
- エディタに移動します。
- 「閉じる」ボタンにアクセスします：
- ハンバーガーメニューアイコンを選択します。
- 「Regular Mode（通常モード）」ドロップダウンをクリックし、「ハンバーガーメニュー」を選択します。
- 「閉じる」ボタンをクリックします。
- アクションバーから次に実行する内容を選択します：
アイコンにテキストを追加する
アイコンをカスタマイズする
「閉じる」ボタンをデザインする
編集は完了しましたか？
フローティングバーの「編集中：ハンバーガーメニュー」横の「完了」をクリックしてページに戻ります。