Wix エディタ:サイドバーメニューを作成する
読了時間:4分
ライトボックスパーツを使用して、素敵なサイドバーメニューを作成しましょう!
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/2016/09/19/c437bea9-4d22-4d97-b701-a1597542ee96.gif)
サイドバーメニューを作成する方法:
- サイトから既存のメニューを削除します。
- エディタ左側で「パーツを追加」
をクリックします。
- 「インタラクティブ 」をクリックします。
- 下図のように、サイドバープリセットを含むライトボックスを選択します:
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2022/11/10/179065c5-4912-490e-b5b1-8796d5eb1e63/7d9984fd-2eac-41c8-b3e2-e1b9678507b9.png)
- ライトボックスをクリックし、「設定」アイコン
をクリックします。
- ライトボックスの名前を「サイドバーメニュー」などの認識しやすい名前に変更します。
- 「ライトボックスの自動表示」下で「オフ」を選択します。
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2022/11/10/6f344d9f-f9d9-4fc8-a774-21d3e9563be4/ab215aea-0ae4-450d-aad1-85a54f9e9728.png)
- ライトボックス内の全てのパーツを削除します。X アイコンは削除しないでください。
- ライトボックスに縦型メニューを追加します。
- メニューをデザインします。メニューフォントは大きめで中央寄せにすることをお勧めします。
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2022/11/10/6893b84b-feae-4115-beef-0bd1b0a3802d/dbd5dc73-74e0-4eef-aa5f-32b7116d5614.png)
ヒント:
サイトに合わせてライトボックスの背景とオーバーレイをカスタマイズしましょう。背景をわずかに透明にして、クールなエフェクトを演出することもできます。
- エディタ左側の「メニュー・ページ」
をクリックして、メニューボタンを追加したいページを選択します。
- メニューボタンのシェイプを追加します:
- エディタ左側で「パーツを追加」
をクリックします。
- 「装飾」をクリックします。
- 「ベーシック」タブをクリックします。
- ベーシックシェイプ下で「もっと見る」をクリックします。
- 検索バーに「メニュー」と入力し、「Enter」キーを押します。
- メニューデザインを選択し、「ページに追加」をクリックします。
- 「デザインを変更」アイコン
をクリックし、メニューボタンをデザインします。
- エディタ左側で「パーツを追加」
ヒント:
独自のメニューボタンをデザインすることもできます。テキストボタン、アイコンボタン、または別のシェイプにすることができます。以下の例をご覧ください:
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/2016/08/25/c4caa6b0-307c-448e-9c97-684e3c86b6e0.png)
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2022/11/10/c86f52ec-5903-4bbd-8159-1269a9485fe9/d5e3a55f-e1cb-4f82-83d2-4087188d9bf8.png)
- サイトをプレビューして、ライトボックスの動作を確認します。
- モバイルエディタにアクセスします。
- ライトボックスにリンクされているメニューボタンをクリックし、「非表示にする」アイコン
をクリックします。
![](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2022/11/10/a809444c-1f1a-46c4-bbf6-f7d0aca3fa47/f8b508e5-64df-4ba9-90aa-e82c8a07d50e.png)
重要:
モバイルサイトのボタンやリンクからライトボックスメニューにアクセスできないようにしてください。サイドバープリセットのある通常のモバイルメニューを使用してください。
お役に立ちましたか?
|