Wix エディタ:ライトボックスを追加・設定する
読了時間:5分
ポップアップライトボックスを追加して、訪問者の注意を引き付け、重要なお知らせや情報を紹介しましょう。ポップアップメッセージにパーツを追加したり、いつ表示させるかを決定したり、訪問者がポップアップメッセージを閉じる方法を選択したりすることができます。
![Wix ライブサイトでライトボックスが表示されている GIF。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/651c25b0-2d60-43c8-addf-1df2fd575568/2022/08/17/dd7218c2-742b-451c-a6b4-dd943cfc9ac4/b2661a45-ec9a-4dd6-a99b-0a6264e77514.gif)
ステップ 1 | ライトボックスを追加する
ライトボックスを追加して、インタラクティブかつ訪問者にとって有益なページ・ポップアップを作成しましょう。「ようこそ」や「お問い合わせ」など、さまざまなテンプレートやタイプからお選びいただけます。
ライトボックスを追加する方法:
- エディタ左側で「パーツを追加」 をクリックします。
- 「インタラクティブ」をクリックします。
- 「ライトボックス」下でカテゴリーを選択します。
- ライトボックスをクリックまたはドラッグして、ページに追加します。
![エディタの「パーツを追加」パネル。ライトボックスタブが開いています。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2024/01/02/80602a9f-f3f0-4204-8aff-e1f5157366a4/291f9dbf-ffee-4dad-a907-4df30fe8d72c.png)
ステップ 2 | ライトボックスにパーツを追加する
ライトボックスにパーツを追加して、コンテンツと外観を構築します。ライトボックス内に収まるように、パーツはライトボックスよりも小さくしてください。テキストやボタンなどを追加して、ライトボックスに必要なものをすべて含めることができます。
ライトボックスにパーツを追加する方法:
- 「メニュー・ページ」パネルから該当するライトボックスを開きます。
- エディタ左側で「パーツを追加」 をクリックします。
- オプションからパーツタイプを選択します。
- パーツをクリックしてライトボックス内の選択した場所にドラッグし、「ライトボックスに移動」メッセージが表示されたらドロップします。
注意:
ライトボックスを追加すると、ライトボックスモードに入ります。これにより、ライトボックスを設定および編集できます。通常のエディタに戻るには、トップバーの「モードを終了」をクリックしてください。
![エディタ内の「パーツを追加」パネル。エディタはライトボックスモードになっていて、カーソルがテキストパーツにマウスオーバーしています。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2024/01/02/c3b21c91-ae84-47e0-b713-dfd736d21936/dd94b438-ad52-4460-acf2-643a360447fe.png)
ステップ 3 | ライトボックスの表示設定を行う
ポップアップメッセージをデザインしたら、ライトボックスの開き方を決定します。ページの読み込み時に自動的に表示されるように設定したり、訪問者がクリックする必要があるパーツにリンクするように設定することができます。
ライトボックスの表示設定を行う方法:
- 「メニュー・ページ」パネルから該当するライトボックスを開きます。
- ライトボックスをクリックします。
- 「表示設定」クリックします。
- 「ライトボックスの自動表示」下のオプションをクリックします:
- オン:ページが読み込まれるとライトボックスが自動で表示されます。
- 「表示するページ」をクリックし、ライトボックスを表示するページを選択するか、「訪問者が最初に開いたページ」チェックボックスを選択します。
- 「待機時間」スライダーをドラッグして、ページが読み込まれてからアニメーションが表示されるまでの時間を調整します。
注意:このスライダーは、すべてのライトボックスに表示されるわけではありません。
- オフ:サイト訪問者がページにアクセスしてもライトボックスは自動的には表示されません。代わりに、サイトのパーツからリンクすることができます。
- オン:ページが読み込まれるとライトボックスが自動で表示されます。
- (オプション)ライトボックスを表示する期間を設定します。これは、期間限定の商品やサービスを表示する場合に役立ちます:
- 日付:オプションを使用して、ライトボックスを表示する開始日と終了日を選択します。
- 時間:ライトボックスを表示する開始時間と終了時間を選択します。
- タイムゾーン:ドロップダウンからタイムゾーンを選択します。
- スケジュールをクリア:設定したライトボックスの表示予定を削除します。
![「ライトボックス設定」パネルで、待機時間のオプションにマウスオーバーしている様子を示したスクリーンショット。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2024/01/02/7bd6b072-daa8-4a34-afe2-916b8a317cb8/27846402-00a6-41e7-b364-fb6d56b9b4d1.png)
ステップ 4 | 訪問者がライトボックスを閉じる方法を選択する
訪問者がメッセージを読んだ後にライトボックスを閉じる方法を選択します。ボックスを閉じる方法は複数選択することも、1つだけ選択することもできます。たとえば、訪問者がライトボックスの後ろにあるオーバーレイをクリックして閉じられるようにしながら、より明確な「閉じる」ボタンを追加することができます。
ライトボックスに「閉じる」ボタンまたは「X」アイコンを追加する方法:
- 「メニュー・ページ」パネルから該当するライトボックスを開きます。
- ライトボックスをクリックします。
- 「設定」アイコン をクリックします。
- 「ボックスを閉じる方法」下でオプションを選択します。 :
- X アイコン:訪問者は X アイコンをクリックしてライトボックスを閉じます。
- テキストボタン:訪問者は「閉じる」ボタンをクリックしてライトボックスを閉じます。
![ライトボックス設定パネル。ライトボックスを閉じるオプションがハイライトされています。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2024/01/02/ba8f855b-60c9-401d-961b-60d16174b2d6/dad4e9ba-e9cb-45c8-a007-9be2198c075c.png)
訪問者がオーバーレイからライトボックスを閉じることができるようにする方法:
- 「メニュー・ページ」パネルから該当するライトボックスを開きます。
- エディタでオーバーレイ(ライトボックスの周りのスペース)をクリックします。
- 「オーバーレイ設定」をクリックします。
- 「クリックで閉じる」トグルをクリックします:
- 有効化:サイト訪問者はオーバーレイをクリックしてライトボックスを閉じることができます。
- 無効化:サイト訪問者はオーバーレイをクリックしてライトボックスを閉じることはできません。
![オーバーレイ設定パネル。カーソルが「クリックで閉じる」トグルにマウスオーバーしています。](https://d2x3xhvgiqkx42.cloudfront.net/12345678-1234-1234-1234-1234567890ab/43afd84c-813c-43a2-baab-131b6878accd/2024/01/02/43aaab31-956d-48d5-b18d-f5352f9c944c/b0527c4c-62f9-4c5c-9326-b6704732254a.png)
次のステップ:
ライトボックスのデザインと位置をカスタマイズして、サイトの告知をさらに編集します。ライトボックスをカスタマイズする方法はこちら
よくある質問
以下をクリックして、ライトボックスに関するよくある質問とその回答をご覧ください:
1つのページに複数のライトボックスを表示するように設定することはできますか?
変更内容をライブサイトに反映させる前にライトボックスをプレビューすることはできますか?
ライトボックスへのリンクを共有することはできますか?