Wix エディタ:メガメニューを追加・設定する
読了時間:7分
メガメニューとは高度な横型メニューにアイテムとして追加できるコンテナのことです。訪問者がライブサイトのメニューアイテムにマウスオーバーすると、コンテナが開きます。
コンテナにパーツを追加して、重要で関連性の高いコンテンツを表示できます。また、外観をカスタマイズして、訪問者にユニークなナビゲーション体験を提供することもできます。
![ライブ Wix サイトでメガメニューを示した GIF。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2023/02/21/daac785c-045b-423a-84c7-ab97b037e256/f5eea30b-7b40-4b62-bba6-531f9d6abe52.gif)
ステップ 1 | 高度な横型メニューを追加・設定する
まず、ページに横型メニューを追加して高度なメニューとして設定します。高度なメニューでは、複数のアイテムとナビゲーションオプションを使用して、訪問者にカスタムで整理されたブラウジング体験を提供することができます。
備考:
メガメニューコンテナは高度なメニューとして設定した横型メニューにのみ追加できます。メガメニューコンテナは、通常のサイトメニューやおすすめメニュー、縦型メニューには対応していません。
高度な横型メニューを追加・設定する方法:
- エディタ左側で「パーツを追加」
をクリックします。
- 「メニュー・アンカー」をクリックします。
- 「横型メニュー」をクリックします。
- メニューデザインをクリックし、ページ上の希望する場所にドラッグします。
- メニューを高度なメニューとして設定します:
- エディタで新しいメニューを選択します。
- 「設定」アイコン
をクリックします。
- 「高度な設定」パネルで「設定する」を選択します。
- ポップアップで「設定する」をクリックします。
![「パーツを追加」パネルの「メニュー・アンカー」タブ。カーソルが横型メニューにマウスオーバーしています。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2023/12/30/50403c2a-5039-46b2-880e-47958b91510d/2ab7b47b-af9f-4900-917f-a56b02d0d70d.jpg)
ステップ 2 | 高度なメニューにメガメニューを追加する
高度な横型メニューを作成したら、メガメニューコンテナをアイテムとして追加して、好きな名前を付けます。「サービス」や「沿革」など、意図するコンテンツを反映したタイトルを使用することをおすすめします。
メガメニューを追加する方法:
- エディタで高度なメニューを選択します。
- 「メニューを管理」をクリックします。
- パネル下部の「+メニューアイテムを追加」をクリックします。
- 「メガメニュー」を選択します。
- コンテナのタイトルを入力します。
- 「完了」をクリックします。
![エディタ内の高度なメニュー用の「メニューを管理」パネル。カーソルがメガメニューを追加するオプションにマウスオーバーしています。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2023/12/30/5e3835af-327b-403a-857c-836f296241f1/395915c6-ae6f-419c-af46-d64fe5038ac6.png)
ステップ 3 | コンテナにコンテンツを追加する
コンテナを追加して名前を付けたら、ボタン、シェイプ、テキストなどのパーツを追加して、必要なコンテンツを作成します。
パーツを追加する方法:
- 「メニューを管理」パネルでメガメニューコンテナにマウスオーバーします。
- 「編集」をクリックします。
- エディタ左側で「パーツを追加」
をクリックします。
- 追加するパーツを選択します。
- パーツをクリックして、コンテナ内の任意の位置にドラッグします。
![「パーツを追加」パネルからメガメニューコンテナにテキストボックスが追加されている様子を示した GIF。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2023/12/30/4c4eda5f-442f-4d32-b1ab-afabe66b98d4/90c2b8fe-0f37-4b7e-9e9f-75b5c795fc1d.gif)
ステップ 4 | メガメニューコンテナのレイアウトを調整する
必要なパーツを追加したら、ページ構造に合わせてメガメニューコンテナのレイアウトを変更します。間隔を調整したり、どのくらいコンテナを引き延ばすかを選択したりできます。
レイアウトを変更する方法:
- メガメニューコンテナをクリックします。
- 「レイアウトを変更」をクリックします。
- オプションを使用してコンテナを調整します:
- レイアウトを選択:コンテナを訪問者の画面の幅いっぱいに引き延ばすか、サイトページの幅(グリッド線内)に引き延ばすかを選択します。
- メニュー・サブメニューの間隔:スライダーをドラッグして、メニューとメガメニューコンテナ間の間隔を調整します。
![Wix エディタ内のメガメニューのコンテナレイアウトパネル。カーソルが間隔スライダーにマウスオーバーしています。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2023/12/30/2a968556-c196-44a2-a6a2-86e4227cbee6/c8dfdd29-318d-45d7-a015-e27e474561f5.png)
ステップ 5 | メガメニューのデザインをカスタマイズする
コンテナのレイアウトを調整したら、枠線や背景などをデザインします。一貫した外観を維持するために、メガメニューに加えた変更は、追加したサブメニューにも適用されます。
コンテナのデザインをカスタマイズする方法:
- メガメニューモードバーで「モードを終了」をクリックします。
![「モードを終了」](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2023/12/30/feb04174-335d-489c-acf0-63a068b7b259/6aa903ef-996c-4069-8199-22b778358dee.png)
2. 高度なメニューをクリックします。
3.「デザインを変更」アイコン
をクリックします。
4.「デザインをカスタマイズ」をクリックします。
5.「何をデザインしたいですか?」ドロップダウンメニューから「サブメニューコンテナ」を選択します。
6. オプションを使用してコンテナをデザインします。
デザインオプションを表示
![Wix エディタでメガメニューコンテナのデザインオプションを示した GIF。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2023/12/30/a1add30f-97a1-4478-b052-d2d4cb3b6aae/b5ab3d0d-a28b-4bc7-b76f-0c996ffacd51.gif)
注意:
サブメニューコンテナに対して作成したデザインオプションのみがメガメニューに適用されます。サブメニューアイテムに加えた変更は、メガメニューコンテナに追加したパーツには適用されません。
次のステップ:
高度な横型メニューではさまざまなオプションを利用することができ、以下の操作が可能です:
- 高度なメニューを管理して希望のアイテムを表示する。
- デザインをカスタマイズしてサイトのテーマを補完する。
- メニューのレイアウトを調整して配置や間隔を設定する。