Wix エディタ：ライトボックスをカスタマイズする
8分
ライトボックスをカスタマイズして、希望通りの見た目にしましょう。オーバーレイを選択してライトボックス周囲のページを覆い、ライトボックスの位置を設定し、背景を変更してブランド独自のデザインを作成することができます。
ライトボックスのレイアウトを調整する
ページ上でライトボックスが開く場所を設定します。ライトボックスが表示されるページの隅を選択し、画面の端からライトボックスまでの距離（位置）を調整できます。
ライトボックスのレイアウトを選択する方法：
- エディタに移動します。
- エディタ左側で「ページ・メニュー」
をクリックします。 - 「ライトボックス」クリックします。
- 該当するライトボックスをクリックして開きます。
- エディタでライトボックスを選択します。
- 「レイアウト」アイコン
をクリックします。 - レイアウトの調整方法を選択します：
- 表示位置：グリッド上の長方形をクリックして、ページ上のライトボックスの位置を設定します。
- 横の位置：ボックスを画面上で左右に移動させます。
- 縦の位置：ボックスを画面上で上下に移動させます。
ライトボックスのオーバーレイを設定する
オーバーレイは、ライトボックスの周りのスペースで、サイトの他の部分を遮断します。これにより、訪問者はライトボックスのメッセージに集中することができます。サイト訪問者がオーバーレイをクリックしてライトボックスを閉じるようにするかを選択することができます。
オーバーレイを設定する方法：
- エディタに移動します。
- エディタ左側で「ページ・メニュー」 をクリックします。
- 「ライトボックス」クリックします。
- 該当するライトボックスをクリックして開きます。
- ライトボックスの外側をクリックして任意の場所を選択します。
- 実行する内容を選択します：
- 訪問者がオーバーレイをクリックしてライトボックスを閉じるかどうかを決定します：
- 「オーバーレイ設定」をクリックします。
- 「クリックで閉じる」トグルを有効または無効にします。
注意：このオプションを無効にする場合は、ライトボックスに「X」アイコンまたは「閉じる」ボタンが追加されていることことを確認してください。
- オーバーレイをデザインします：
- 「オーバーレイの背景を変更」クリックします。
- 色、画像、または動画の背景から選択します。
- （オプション）「設定」をクリックしてオーバーレイを調整します。
ヒント：色や画像の背景の不透明度を調整することができます。訪問者がライトボックスの後ろのページは確認できるが、内容がブロックされていることがわかるように、オーバーレイを半透明に設定しておくことをおすすめします
- 訪問者がオーバーレイをクリックしてライトボックスを閉じるかどうかを決定します：
モバイルサイトでのオーバーレイ：
- モバイルサイトではライトボックスオーバーレイを編集することはできません。
- デスクトップで色や画像のオーバーレイを追加すると、モバイルサイトに自動的に適用されます。ただし、動画オーバーレイを追加すると、モバイルサイトでは動画から静止画に変換されます。
ライトボックスの背景を設定する
ライトボックスの背景に、単色、画像、動画のいずれかを選択します。選択したタイプによっては、表示方法や表示位置などの設定を調整することもできます。
ライトボックスの背景を選択する方法：
- エディタに移動します。
- エディタ左側で「ページ・メニュー」 をクリックします。
- 「ライトボックス」クリックします。
- 該当するライトボックスをクリックして開きます。
- エディタでライトボックスを選択します。
- 「デザインを変更」アイコン
をクリックします。 - ライトボックスに使用する背景の種類をクリックします：
- 色：カラーピッカーから色を選択するか、目を引くグラデーションを追加して調整します。
- 画像： 独自の画像、もしくは Wix か Shutterstock から画像を選択します。
- 動画：無料の Wix 動画を選択するか、独自の動画をアップロードします。
- （オプション）「設定」をクリックして、好みに合わせて背景を調整します。
ライトボックスの「閉じる」ボタンをカスタマイズする
訪問者がライトボックスを閉じるためにクリックするボタンの外観とレイアウトを調整します。テキストを選択し、ボタンテキストの配置を設定し、通常時とホバー時用にデザインをカスタマイズして目立たせることができます。
「閉じる」ボタンをカスタマイズする方法：
- エディタに移動します。
- エディタ左側で「ページ・メニュー」 をクリックします。
- 「ライトボックス」クリックします。
- 該当するライトボックスをクリックして開きます。
- エディタでライトボックスを選択します。
- 「閉じる」ボタンをクリックします。
- ボタンのカスタマイズ方法を選択します：
ボタンに表示されるテキストを変更する
ボタンのテキスト配置を調整します：
をクリックします。
ボタンをデザインする
：ボタンの背景色を選択し、表示設定を調整します。
：ボタンに枠線を追加して、ライトボックスとのコントラストを作成します。色を選択し、太さを設定します。
：ボタンの角の表示方法を選択します。各角を個別に調整して、丸くしたり、四角くしたりすることができます。
：ボタンに影を追加すると、クールな 3D 効果が得られます。サイズ、表示、角度などを設定して、インパクトを与えることができます。
：フォント、サイズ、間隔などの設定を使用して、ボタンのテキストをカスタマイズします。また、太字や斜体などの書式設定を追加し、色を選択することもできます。
X アイコンをカスタマイズする
ライトボックス設定パネルで X（ライトボックスを閉じる）アイコンを有効にしている場合は、任意の外観に調整します。さまざまなデザインから選択し、色、表示設定、枠線をカスタマイズします。
X アイコンをカスタマイズする方法：
- エディタに移動します。
- エディタ左側で「ページ・メニュー」 をクリックします。
- 該当するライトボックスを開きます。
- エディタでライトボックスをクリックします。
- 「ライトボックスを閉じる」（X）アイコンをクリックします。
- 「デザイン」アイコン
をクリックします。
- X アイコンのカスタマイズ方法を選択します：
- 新しいデザインを選択する：パネルからプリセットをクリックして、アイコンの新しいデザインを設定します。
- アイコンをカスタマイズする：「デザインをカスタマイズ」をクリックし、アイコンを希望通りに編集します：
- 不透明度・色：カラーピッカーからアイコンの色を選択し、スライダーを使用してアイコンの表示を調整します。
- 枠線：アイコンの枠線の色を選択し、太さ（ピクセル単位）を設定します。
