Wix エディタ:縦型メニューを追加・設定する
読了時間:3分
縦型メニューはクリーンで洗練されたデザインです。さまざまなテンプレートが用意されているので、カスタマイズして、目を引く、サイトのテーマに合ったメニューを作成できます。
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2021/07/29/605f14f3-0b52-4ae3-80d2-3afcab280cfa/a30ad6b5-bca1-4f8a-89b9-0ec3619ff4dc.png)
下記をご確認ください:
縦型メニューを追加する
エディタから縦型メニューを追加して、サイト訪問者のインタラクションや注意を促すメニューの作成を開始します。
縦型メニューを追加する方法:
- エディタ左側で「パーツを追加」 をクリックします。
- 「メニュー・アンカー」をクリックします。
- 「縦型メニュー」を選択します。
- メニューをクリックまたはドラッグして、ページに追加します。
![Wix エディタの縦型メニューオプションのスクリーンショット](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2023/04/06/8361909d-7f2b-4338-b698-ef34ef5ef3fc/405f461d-6232-4bd3-b04d-055737dd5191.png)
メニューデザインをカスタマイズする
カスタマイズオプションを使用すると、メニューを希望通りにデザインできます。メニューには 3 つの異なる状態(通常時、ホバー、クリック)があり、各状態はサイトのニーズに合わせて個別にカスタマイズできます。
- 通常時:サイト訪問者がメニューを操作する前のメニューの表示方法。
- ホバー:マウスオーバーした際のメニューの表示方法。
- クリック:サイト訪問者がクリックしたときのメニューの表示方法。
メニューデザインをカスタマイズする方法:
- 「デザインを変更」アイコン をクリックします。
- 「デザインをカスタマイズ」をクリックします。
- 編集するメニューの状態(通常時、ホバー、クリック)を選択します。
- 下記のオプションから選択して、各設定を調整します:
- 不透明度・色:メニューの塗りつぶし色を選択し、不透明度を調整します。
- 枠線:メニューの枠線の太さと色を調整します。
- 角:メニューとサブメニューの角の丸みを調整します。
- 影: 影を有効にし、角度、サイズ、ぼかし、色と位置を調整します。
- テキスト:フォントやサイズ、書式などのメニューのテキスト設定を編集します。
- 間隔:スライダーを使用して、メニューの間隔と位置を調整します。
![縦型メニューのデザインオプションのスクリーンショット](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2023/04/06/a572609c-764a-40a1-b9bd-8c22e5b6d780/57d3d239-818b-4fd5-9823-1bb8ff818827.png)
メニューのレイアウトを調整する
サイトのニーズに合わせて、メニューのレイアウトを調整していきましょう。メニューアイテムの配置方法を変更し、サブメニューの展開方法(右または左)を選択します。
メニューのレイアウトを調整する方法:
- 「レイアウト」アイコン をクリックします。
- 下記のオプションから選択します:
- アイテムの配置:メニューアイテムを左・中央・右に配置します。
- サブメニューの展開方向:サブメニューの展開方向(右へ展開、左へ展開)を選択します。
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2023/04/06/71ca0f4d-b18c-49bb-8623-dca43715f356/35a9330d-e167-4e1e-b084-5146bb213b33.png)