Wix Studio エディタ：メニューのドロップダウンをデザインする
読了時間：8分
ドロップダウンを追加・設定した後、希望の見た目にカスタマイズすることができます。コンテナとメニューの両方の外観と配置を変更して、クライアントのためのカスタムの外観を作成し、ブランドを強化しましょう。
始める前に：
この記事では、以下の項目について説明します：
ドロップダウンのレイアウトを調整する
ナビゲーションバー、ハンバーガーなどのメニュータイプに応じて、「レイアウト」パネルを使用して、ドロップダウンの表示や幅を設定できます。メインメニューのデザインに合わせて、間隔と配置を調整することもできます。
ドロップダウンのレイアウトを調整する方法：
- エディタにアクセスします。
- メニューまたはメニューボタンをクリックします。
- （ハンバーガーメニュー）「メニューを編集」をクリックして、ハンバーガーメニュー編集モードを開き、メニューを選択します。
- 「レイアウト」アイコン
をクリックします。
- 「ドロップダウン」タブを選択します。
- オプションを使用してレイアウトを調整します：
- コンテナの幅：ドロップダウンコンテナの幅を選択し、希望通りに調整します：
- 伸縮：ドロップダウンのコンテナは画面の全幅に引き延ばされます。間隔をピクセル単位で設定することで、幅を調整することができます。
- メニューに合わせる：ドロップダウンは、メインの親メニューと同じ幅です。
- コンテンツに合わせる：コンテナはドロップダウンアイテムを「ハグ」します。配置はメインメニューの左、中央、右から選択することができます。
- アイテムの表示設定：ドロップダウンメニューのアイテムを折りたたむか、常に展開するかを選択します。
- コンテナ上の間隔：ドロップダウンとメインメニューまでの間隔を調整します。
- 列数：ドロップダウンメニューに表示する列の数を選択します。
- 間隔：ドロップダウン内のアイテムの間隔を調整します。サブアイテムを追加した場合は、サブアイテムとサブアイテムの間隔を調整することもできます。
- アイテム間の間隔：ドロップダウンアイテム間の横と縦の間隔を入力します。
- サブアイテム間の間隔：サブアイテム間の間隔を調整します。
- サブアイテム上の間隔：メニュー内のサブアイテム上の間隔を選択します。
- 余白：ニーズに合わせてドロップダウンの各部分の周囲のスペースを調整します：
- アイテムの余白：ドロップダウンメニューのアイテムの周囲のスペースを調整します。
- サブアイテムの余白：ドロップダウンメニューで、サブアイテムの周囲のスペースを調整します。
- コンテナの余白：ドロップダウンコンテナの周囲のスペースを必要に応じて調整します。
- 配置：ドロップダウンアイテムとサブアイテムをコンテナの左、右、または中央に配置します。
- コンテナの幅：ドロップダウンコンテナの幅を選択し、希望通りに調整します：
注意：
表示されるオプションは、メニュータイプ（ナビゲーションバーまたはハンバーガー）と、メニューの表示方向（横向きまたは縦向き）によって異なります。
ドロップダウンのデザインをカスタマイズする
ドロップダウンは、コンテナからアイテムやサブアイテムまで、メインメニューのデザインや操作性に合わせてデザインすることができます。
ドロップダウンのデザインをカスタマイズする方法：
- エディタにアクセスします。
- メニューまたはメニューボタンをクリックします。
- （ハンバーガーメニュー）「メニューを編集」をクリックして、ハンバーガーメニュー編集モードを開き、メニューを選択します。
- エディタ右上の「要素設定パネルを開く」矢印アイコン
をクリックします。 - 「デザイン」までスクロールダウンします。
- 4. デザインするパーツを選択します。
- ドロップダウンのコンテナ
- ドロップダウンメニューのコンテナ
- ドロップダウンのアイテム
- ドロップダウンのサブアイテム
- （ドロップダウンアイテム / ドロップダウンサブアイテム）該当する状態（通常時、ホバー時、または現在のページ）を選択します。
- 利用可能なオプションを使用してドロップダウンをデザインします：
- 背景の塗りつぶし：ドロップダウンの背景色を変更したり、目を引くグラデーションを追加したりできます。不透明度を調整し、デザインニーズに合わせて複数のレイヤーを追加することができます。
- 枠線：ドロップダウンコンテナの枠線の幅と色を調整します。
- 角：丸みを調整して、ドロップダウンの角をより丸くまたは四角にします。
- テキスト：ドロップダウンアイテムとサブアイテムのスタイルと書式を調整します。
- 影：ドロップダウンに影を追加し、角度、色、位置などをカスタマイズします。
コンテナはそれぞれどう違いますか？
- ドロップダウンコンテナ：ここには、ドロップダウンアイテムに追加したすべてのパーツとメニューが表示されます。
- ドロップダウンメニューコンテナ：ここには、ドロップダウンメニューアイテムのみが表示されます。ドロップダウンコンテナ内でネストされています。
ドロップダウンを個別にデザインする
ドロップダウンのデザインとレイアウトに加えた変更は、メニュー内のすべてのドロップダウンに適用されます。ただし、横型ナビゲーションバーメニューのドロップダウンを「切り離し」て、個別にカスタマイズすることは可能です。
注意：
このオプションは、ハンバーガーメニューや縦型のナビゲーションバーメニューではご利用いただけません。
個々のドロップダウンを切り離してカスタマイズする方法：
- エディタで横型メニューをクリックします。
- 「メニューを管理」をクリックします。
- 該当するドロップダウンにマウスオーバーし、「編集」をクリックします。
- ドロップダウンをデザインする方法を選択します：
コンテナのレイアウトを調整する
ドロップダウンメニューのレイアウトを調整する
コンテナのデザインをカスタマイズする
メニューのデザインをカスタマイズします：
注意：
「このドロップダウンのみを編集」トグルは、「レイアウト」パネルと「要素設定パネル」に接続されているため、1つのトグルを無効または有効にすると、もう 1つのトグルも自動的に無効または有効になります。