テンプレートエディタを使用してポップアップの形式とスタイルを設定する

お知らせ：当社は、お客様により充実したサポート情報を迅速に提供するため、本ページのコンテンツは機械翻訳を用いて日本語に翻訳しています。正確かつ最新のサポート情報をご覧いただくには、本内容の英語版を参照してください。

背景色、画像、ボーダースタイル、影の効果などを簡単に追加することで、ポップアップをより興味深く魅力的に見せることができます。使いやすいテンプレートの中から選ぶか、空のテンプレートを選んで、テンプレートエディタ上に現れる多機能なオプションを使ってポップアップをカスタマイズしましょう。さらに、エディタでは新しい要素を追加したり、要件に基づいて異なるフォームフィールドを選択したりすることもできます。

以下は、テンプレートエディタ内でポップアップの書式とスタイルを設定するために使用できるオプションのリストです：

背景色

テンプレートに目を引く背景色や画像を使用して、重要なメッセージをウェブページ上で目立たせることができます。
背景スタイルを適用するには、ポップアップテンプレートをクリックし、以下のオプションから選択してください：

単色： ポップアップに一様な単一の色を適用するには、カラーピッカーをクリックします。
グラデーションカラー： カラーピッカーをクリックして、2つ以上の色を連続的にブレンドし、1つの色が徐々にフェードアウトして別の色に変わるように適用します。
画像： コンピュータから画像を選択して、ポップアップの背景に適用します。

背景色や画像をポップアップから削除する場合は、透明を選択してください。

パディング

パディングとは、テンプレート内のポップアップの境界線とコンテンツ本体の間のスペースです。各ポップアップテンプレートには、PageSenseに固有のレイアウトと組み込まれたパディングスタイルがあり、必要に応じてピクセル単位でパディングを増減することができます。

テンプレートのパディングを調整するには、ポップアップをクリックして、左側のペインで上部、右側、下部、左側のパディングスライダーをドラッグします。また、テキストボックスに希望の値（ピクセル単位）を手動で入力し、 Enterキーを押します。

情報:

パディングの変更は、モバイルレイアウトに異なる影響を与える場合があるため、モバイルでのパディングの見え方を確認してください。
テンプレートを含むサイトのすべてのページを確認し、バナーやフッターをチェックしてください。
一部のテンプレートには組み込まれたパディングがあり、削除や変更はできません。

マージン

特定のウェブサイトに最適なポップアップの右マージンサイズを設定します。また、このオプションを使用して、ポップアップの周囲全体または特定の側面に視覚的な余白を追加することもできます。

マージンサイズを調整するには、ポップアップをクリックして左ペインのマージンスライダーをドラッグします。また、テキストボックスに希望の値（ピクセル単位）を手動で入力し、 Enterキーを押します。.

ボーダーとシャドウ

PageSenseでボーダーやシャドウ効果を適用して、ポップアップをよりリアルで効果的に見せましょう。ボーダー効果はポップアップにアウトラインを付けて、ウェブページ上でより強調されるようにします。シャドウ効果はポップアップの下に影を付けて、よりリアルに見せるのに役立ちます。

ボーダー効果を適用するには、ボーダースタイル ドロップダウンをクリックし、ポップアップに適用するボーダーラインの種類（点線、破線、二重線など）を選択します。スクリーンショットに示されているように、ボーダーの色、太さ、角の丸みなどをカスタマイズすることもできます。
シャドウ効果を適用するには、ポップアップのための希望するシャドウの色をカラーピッカーから選択し、スクリーンショットに示されているように、位置やぼかしの度合いなどのプロパティをカスタマイズします。

オーバーレイカラー

ポップアップコンテンツにさらなる強調を加えるために、ウェブページやバナー画像の背景にフィルターエフェクトを追加します。デフォルトでは、ポップアップのカラーに合わせたグレーのシェードがオーバーレイカラーとして適用されます。

オーバーレイカラーを適用するには、左のペインに移動し、お好みのオーバーレイカラースタイル（透明、単色、グラデーション、または画像）を選択します。

閉じるアイコン

訪問者がポップアップ上の×アイコンをクリックすると、ポップアップは閉じられ、ウェブページから消えます。PageSenseでは、ポップアップの細部を制御することができ、この閉じる機能のプロパティをカスタマイズすることができます。

閉じるアイコンを編集するには、ポップアップボックスの右上隅にある*アイコンをクリックし、左ペインの閉じるボタンセクションで、スクリーンショットに示すように、ボタンの色、アイコンの色、サイズ、角の半径設定を選択します。