Wix Harmony エディタ:メニューを追加・管理する
15分
この記事内
- メニューを追加する
- メニューアイテムを追加・管理する
- メニューにドロップダウンを追加する
- メニューのレイアウトを変更する
- 縦型メニューと横型メニューをデザインする
- モバイルでのヘッダーメニューを調整する
- よくある質問
この記事では、2026年1月にリリースされた新 Wix Harmony エディタについて説明します。Wix Harmony エディタまたは Wix エディタのどちらを使用しているか不明な場合は、こちらで詳細を確認してください。
メニューを追加すると、訪問者がサイト内をスムーズに移動して、あなたのコンテンツをすばやく見つけることができるようになります。メニューには、重要なページやリンクを選択して、外観や動作を自由にカスタマイズすることができます。これにより、どのデバイスでも美しく表示されて機能するメニューを、サイトに整えておくことができます。

メニューを追加する
メニューは、訪問者がサイト内のページを移動するのに役立ちます。「パーツを追加」パネルの「メニュー」カテゴリーで「横型メニュー」、「縦型メニュー」、「ハンバーガーメニュー」を選択すると、簡単にサイトページと連動したサイトメニューを追加することができます(新しいページを作成すると、自動的にそのページがメニューに表示されます)。
また、特定の領域に個別のカスタムメニューを追加して、それを横型メニュー、縦型メニュー、またはハンバーガーメニューとして表示することもできます。たとえば、サイトのフッターや独自のナビゲーションが必要なページに、カスタムメニューを作成することが可能です。
メニューを追加する方法:
- エディタに移動します。
- エディタ左上で「+追加」をクリックします。
- 「メニュー」カテゴリーを選択します。
ヒント:カテゴリー横の「矢印」アイコン
をクリックすると、一覧を表示することができます。 - 追加したいメニューの種類に応じて、以下の手順に従います:
サイトメニュー
カスタムメニュー
ヒント:
ヘッダーにメニューバーを追加すると、モバイルでは自動的にハンバーガーメニューになります。これにより、訪問者がさまざまなモバイル端末からメニューを表示してアクセスできるようになっています。

メニューアイテムを追加・管理する
メニューを追加したら、表示するアイテムを選択します。通常のサイトページ、複数のアイテムから成る Wix のアプリや CMS のすべてのページ、または複数のアイテムから成るページから特定のページを選択することができます。ドロップダウンコンテナやリンクを追加して、クライアントのニーズに合わせてメニューアイテムをカスタマイズすることも可能です。
既存のメニューとそこに表示されるアイテムは、いつでも編集することができます。コンテンツを最新の状態に保つために、アイテムを追加したり、不要なアイテムを削除したり、アイテムの順序を変更したりすることができます。
メニューを管理する方法:
- エディタに移動します。
- メニューをクリックします。
- 「メニューを管理」をクリックします。
- 実行する内容を選択します:
メニューアイテムを追加する
メニューアイテムのリンクを変更する
メニューアイテムの名前を変更する
メニューからアイテムを削除する
メニューアイテムを並べ替える

メニューにドロップダウンを追加する
ドロップダウンを追加すると、関連するページを 1つのメニューアイテムにまとめることができます。ページやリンクなどの親アイテムを選択し、その下に他のページをネストすることで、ドロップダウンを作成することができます。
ドロップダウンを追加・設定する方法:
- エディタに移動します。
- メニューをクリックします。
- 「メニューを管理」をクリックします。
- ドロップダウンタイトルにするメニューアイテムを指定します。
- 最初のメニューアイテムをドロップダウンに移動させます:
- ドロップダウンタイトルの下に該当するメニューアイテムをドラッグします。
- ドラッグしたアイテムにマウスオーバーし、「その他アクション」アイコン
をクリックします。 - 「(ページ名)の下に移動」を選択します。
- ドロップダウンに移動させたい他のアイテムについても、上記の手順 5 を繰り返します。

代わりにマウスでドラッグする:

以下の GIF のように、メニューアイテムを他のメニューアイテムの右下にドラッグアンドドロップすると、そのアイテムを該当するメニューアイテムのサブアイテムに素早く変更することができます。

メニューのレイアウトを変更する
メニューのレイアウトを分かりやすいものに変更にすると、訪問者が一目で移動したいページを見つけられるようになります。すべてのアイテムを行または列で表示したい場合は、「メニューバー」を選択してください。訪問者の画面にアイテムを表示する十分なスペースがない場合でも、横型メニューではその際の動作を制御することができます。一方、コンパクトなアイコンでナビゲーションを開きたい場合は、「ハンバーガーメニュー」を選択してください。これは、シンプルでミニマムなレイアウトや、モバイルなどでスペースが限られている場合に適しています。
メニューのレイアウトを変更する方法:
- エディタに移動します。
- メニューをクリックします。
- アクションバーで「形式を変更」をクリックします。
- 「メニュー」下で該当するオプションを選択します:
- メニューバー:メニューアイテムがバーに表示されます。「表示方向」下で、バーを横向きまたは縦向きにするかを選択します。
ヒント:横型メニューで、訪問者の画面にアイテムを表示する十分なスペースがない場合は、アイテムの動作を選択することもできます。「テキストに合わせる」を選択してメニューがテキストに合わせて広がるようにするか、「Fit to scroll(スクロールで表示)」を選択してスクロールでさらにアイテムを表示できるボタンを追加することができます。 - ハンバーガー:訪問者には、クリックするとメニューが開く小さなアイコンが表示されます。これは、サイトをすっきりとさせて、ミニマムなレイアウトにするのに適しています。
- メニューバー:メニューアイテムがバーに表示されます。「表示方向」下で、バーを横向きまたは縦向きにするかを選択します。

縦型メニューと横型メニューをデザインする
メニューは、色、枠線、テキスト、角、レイアウトなどを細かくカスタマイズすることができます。縦型メニューの場合でも横型メニューの場合でも、メニューバーとそのアイテムの外観をカスタマイズしたり、ドロップダウンのデザインや間隔を調整したりすることができます。
ハンバーガーメニューをデザインしている場合:
ハンバーガーメニューについての詳細は、こちらからご覧ください。ボタンからコンテナに至るまで、さまざまな部分をデザインすることができます。
縦型メニューまたは横型メニューをデザインする方法:
- エディタに移動します。
- メニューをクリックします。
- アクションバーで「すべてのデザインオプション」アイコン
をクリックします。 - 「Choose a Menu bar part(メニューバーのパーツを選択)」下で、該当するメニューのパーツを選択します。
メニューバーとメニューアイテム
ドロップダウンとドロップダウンアイテム

モバイルでのヘッダーメニューを調整する
スマートフォンでは、サイトのヘッダーがモバイル用にシンプルに表示されます。デスクトップ用のヘッダーパーツ(ナビゲーションリンク、SNS アイコンなど)はコンパクトなハンバーガーメニューの中に格納され、上部には必要なもののみが残ります。このモバイルメニュー内のパーツは、必要に応じて移動させたり、削除したりすることができます。
モバイルでのヘッダーメニューを調整する方法:
- エディタに移動します。
- ページ右上の「モバイル」アイコン
をクリックします。 - ハンバーガーメニューアイコンをクリックします。
- 「Regular Mode(通常モード)」ドロップダウンをクリックし、「ハンバーガーメニュー」を選択します。

- 実行する内容を選択します:
- コンテナ内のパーツを再配置する:ハンバーガーメニューのコンテナ内で、パーツをドラッグして移動させます。
- コンテナにパーツを追加する:「パーツを追加」パネルを使用して、ハンバーガーメニューのコンテナにさらにパーツを追加します。これらのパーツはモバイル専用であるため、デスクトップには表示されません。
- パーツをヘッダーに戻す:パーツを右クリックし、「ヘッダーに移動」を選択します。

よくある質問
詳細については、以下の質問をクリックしてください。
メニューバーのサイズを変更することはできますか?
ヘッダーに複数のメニューを追加することはできますか?
メニューからページを削除すると、サイトからもそのページが削除されますか?
メニューにすべてのサイトページを表示する必要はありますか?


をクリックし、名前を変更または削除します。




を押しながら、希望の位置にドラッグします。
:ブランドカラーまたはカスタムカラーのいずれかを選択し、メニューの色を変更します。
:メニューの枠線の色、太さ、スタイルを変更します。「個々の枠線を編集」アイコン
をクリックすると、それぞれの枠線を個別にデザインすることができます。
:フォント、色、書式設定、配置、文字間隔などを変更して、メニューアイテムをデザインします。
:「半径」下のスライダーをドラッグし、メニューの角の丸みを調整します。「個々の角を編集」アイコン
:内側と外側の影を適用し、位置、ぼかし、色などを調整して、メニューが立体的に見えるようにします。
:余白を追加し、アイテム間の間隔を調整します。
:このメニューにサイトの方向(左から右または右から左)を適用するかどうかを選択します。縦型メニューの場合は、メニューアイテムの幅を選択したり、ドロップダウンを開いた状態と閉じた状態のどちらで表示するか選択することもできます。