Wix Studio エディタ：新しいメニューのレイアウトを調整する

この記事内

横型メニューのレイアウトを調整する
縦型メニューのレイアウトを調整する
ハンバーガーメニューのレイアウトを調整する

最新のメニューコンポーネントを使用すると、ブレイクポイントごとに単一のメニューのレイアウトを変更できるため、あらゆる画面サイズでクライアントのサイトをより簡単にデザインすることができます。

メニュータイプ（レイアウト）を選択したら、カスタマイズオプションを使用して、希望の見た目に仕上げます。

横型メニューのレイアウトを調整する

横型ナビゲーションバーのメニューには多くのオプションが用意されており、レイアウトを思い通りにカスタマイズすることができます。オーバーフローアイテムの表示方法を選択したり、ドロップダウンアイコンを有効にしたりすることができます。

横型メニューのレイアウトを調整する方法：

エディタ内のメニューをクリックします。
「レイアウト」アイコンをクリックします。
「メニュータイプ」下で「ナビゲーションバー」をクリックします。
「表示方向」ドロップダウンから「横向き」を選択します。
オプションを使用してレイアウトを調整します：

オーバーフローアイテム

区切り線と内側余白

ドロップダウンアイコン

方向・配置

横型メニューのレイアウトパネルが開いている様子。カーソルが「左から右」の方向をクリックしています。

縦型メニューのレイアウトを調整する

縦型メニューは小さな画面サイズでも綺麗に見えるため、タブレットのブレイクポイントに適しています。「間隔」や「方向」などのオプションを調整して、すべてを配置し、サイトの構造を引き立てます。

縦型メニューのレイアウトを調整する方法：

エディタ内のメニューをクリックします。
「レイアウト」アイコンをクリックします。
「メニュータイプ」下で「ナビゲーションバー」をクリックします。
「表示方向」ドロップダウンから「縦向き」を選択します。
オプションを使用してレイアウトをカスタマイズします：
- 区切り線：「区切りを追加」トグルを選択し、このオプションを有効または無効にして、間隔を調整します：
  - 有効：区切り線とメニューアイテムの間隔を調整します。
  - 無効：アイテム間の間隔を調整します。
- 内側余白：オプションを使用して、メニューとアイテムの周囲の内側余白を調整します。
- ドロップダウンアイコンの間隔：ドロップダウンアイテムとアイコンの間隔を調整します。
- 方向：メニューを左から右に表示するか、右から左に表示するかを選択します。
- 配置：メニューアイテムをコンテナの左、中央、または右に配置するか、均等割付に設定します。

縦型メニューのレイアウトパネルが開いている様子。カーソルが縦形メニューの「アイテムの内側余白」オプションをクリックしています。

注意：

「 ドロップダウンアイコンの間隔」オプションは、以下の条件を満たす場合にのみ表示されます：

横型メニューのレイアウトからドロップダウンアイコンを有効にしていること（縦型メニューではドロップダウンアイコンを有効または無効にすることはできません）。
メニューがコンテナの左、中央、または右に配置されていること。

ハンバーガーメニューのレイアウトを調整する

ハンバーガーメニューでは、メニューアイコンに表示する内容（テキスト、アイコン、またはその両方）を選択し、配置を設定することができます。

また、メニューアイテムを横向きに表示するか縦向きに表示するかを選択して、設定を調整することもできます。

ハンバーガーメニューのレイアウトを調整する方法：

エディタ内のメニューをクリックします。
「レイアウト」アイコンをクリックします。
「メニュータイプ」下で「ハンバーガー」をクリックします。
調整したいメニューの部分に応じて、「レイアウト」パネルを閉じるかとどまるかを選択します：
- メニューアイコン：
  1. 「レイアウト」パネルにとどまります。
  2. オプションを使用してレイアウトをカスタマイズします：
    - 表示する内容を選択：ハンバーガーメニューボタンにテキスト、アイコン、またはその両方を表示するかを選択します。
      注意：メニューに何も表示しないように選択することもできます。ただし、サイト訪問者がメニューを見つけられるよう、他のオプションを選択することをおすすめします。
    - 配置：メニューアイコンをコンテナの左、中央、または右に配置します。
- メニュー自体：
  1. 「レイアウト」パネルを閉じます。
  2. 「メニューを編集」をクリックします。
  3. メニューアイテムを選択します。
  4. 「レイアウト」アイコンをクリックします。
  5. アイテムを横向きに表示するか縦向きに表示するかを選択し、オプションを使用して調整します：

横向き

オーバーフロー：メニュー内に収まらないアイテムの表示方法を選択します：
- ラップ（折り返し）：メニューに別の行が追加され、残りのアイテムが表示されます。
- スクロール：サイト訪問者はスクロールして、残りのメニューアイテムを表示することができます。「スクロールボタンを表示」トグルを有効または無効にします：
  - 有効：メニューにスクロールボタンが表示されます。周囲の余白を調整して、サイズを調整します。
  - 無効：スクロールボタンは表示されず、サイト訪問者はスワイプして残りのメニューアイテムを表示することができます。
    注意：このオプションは、タッチスクリーンデバイスの小さなブレイクポイントでのみ使用することをおすすめします。
区切り線：「区切りを追加」トグルを選択し、このオプションを有効または無効にして、間隔を調整します：
- 有効：区切り線とメニューアイテムの間隔を調整します。
- 無効：アイテム間の縦と横の間隔を調整します。
内側余白：オプションを使用して、メニューとアイテムの周囲の内側余白を調整します。
ドロップダウンのアイコンを表示：トグルを選択して、このオプションを有効または無効にします：
- 有効：ドロップダウンアイテムにアイコンが表示されます。アイコンとアイテムの間隔は調整することができます。
- 無効：ドロップダウンアイテムにアイコンは表示されません。
方向：メニューを左から右に表示するか、右から左に表示するかを選択します。
配置：メニューアイテムをコンテナの左、中央、または右に配置するか、均等割付に設定します。

縦型のハンバーガーメニューのレイアウトパネルが開いている様子。カーソルが縦形メニューの「アイテム間の間隔」オプションをクリックしています。

縦向き

ハンバーガーメニューのレイアウトパネルが開いている様子。カーソルが「配置」下で「中央」オプションをクリックしています。