Wix エディタ:横型メニューのデザインをカスタマイズする
読了時間:12分
メニューのデザインをカスタマイズしたり、サイトの外観に合わせて色を変更したり、新しいフォントサイズ、スタイルなどを選択したりできます。
メニューとサブメニューの両方を調整でき、メニューアイテムの3つの状態:通常時、ホバー、現在のページに異なるデザインを使用できます。
重要:
- この記事では、追加パネルの横型メニューについてのみ説明し、サイトに追加できるおすすめメニューについては触れません。
- 利用可能なデザインオプションは、選択したプリセットによって異なります。
カスタマイズについては下記をご確認ください:
メニューコンテナをカスタマイズする
メニューコンテナは、アイテムの周りのスペースです。
枠線や塗りつぶしなどのオプションを使用して、コンテナをデザインし、目を引くメニューを作成しましょう。
メニューコンテナをカスタマイズする方法:
- エディタでメニューを選択します。
- 「デザイン」アイコン
をクリックします。
- 「デザインをカスタマイズ」をクリックします。
- 「何をデザインしたいですか?」下で「メニュー」をクリックし、オプションを使用してコンテナをカスタマイズします。
こちらをクリックして詳細を確認しましょう
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2021/11/25/c6d08ca1-5820-4204-bd76-4b129c6c0fd9/598c8208-62bb-4a8c-9112-ed6545dc9046.png)
メニューアイテムをカスタマイズする
サイトメニューでのアイテムの表示方法を調整します。
デザインをカスタマイズしてメニューをスマートに保ち、サイト訪問者がクリックしてサイトを探索できるようにしましょう。
メニューアイテムをカスタマイズする方法:
- エディタでメニューを選択します。
- 「デザイン」アイコン
をクリックします。
- 「デザインをカスタマイズ」をクリックします。
- 「何をデザインしたいですか?」下で「アイテム」を選択します。
- 通常時、ホバー、または現在のページモードでアイテムをデザインし、タブを使用してアイテムをカスタマイズします。
こちらをクリックして詳細を確認しましょう
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2021/11/25/dd2729fe-6132-4186-a7aa-9b5660145639/4641517e-9135-48dc-9ec3-daf95f83003f.png)
サブメニューコンテナをカスタマイズする
サブメニューコンテナをカスタマイズして、独自の洗練された方法でサブメニューアイテムを表示しましょう。
メインメニューに似たデザインにすることも、サイト訪問者の興味を引くようなデザインにすることもできます。
サブメニューコンテナをカスタマイズする方法:
- エディタでメニューを選択します。
- 「デザイン」アイコン
をクリックします。
- 「デザインをカスタマイズ」をクリックします。
- 「何をデザインしたいですか?」下で「サブメニューコンテナ」を選択し、オプションを使用してデザインを調整します。
こちらをクリックして詳細を確認しましょう
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2021/11/25/b0d21d02-aec6-47e2-ac05-5032b6bdb5cf/05caaa7a-fae6-41c9-ad0e-a1701a1d811e.png)
サブメニューアイテムをカスタマイズする
利用可能なオプションを使用して、サブメニューアイテムのデザインを変更します。
テキスト設定を編集したり、影を追加したりして、サイトのデザインに合わせることができます。
サブメニューアイテムをカスタマイズする方法:
- エディタでメニューを選択します。
- 「デザインを変更」アイコン
をクリックします。
- 「デザインをカスタマイズ」をクリックします。
- 「何をデザインしたいですか?」下で「サブメニューアイテム」を選択します。
- 通常時、ホバー、または現在のページモードでアイテムをデザインし、タブをクリックしてアイテムをカスタマイズします。
こちらをクリックして詳細を確認しましょう
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2021/11/25/6943062c-209f-4d78-b18b-5cdaf1af315c/a248b1d2-dfca-4edb-ad9f-a2477e0b4fb3.png)
注意:
サブメニューのデザインをカスタマイズするオプションが表示されない場合は、サイトに新しい横型メニューを追加する必要があります。詳細はこちらをご覧ください。