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