テンプレートエディターでポップアップの要素をカスタマイズする方法

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

柔軟なテンプレートの設計画面では、ポップアップ画面上の各要素を個別に選択し、自由に変更できます。要素を自由に移動したり、ポップアップ画面の外観をカスタマイズしたりできます。背景色、ボタンの色、画像のサイズ、間隔、配置などを調整できます。たとえば、CTAボタンのサイズや色を変更したり、訪問者がすぐにクリックしたくなるような場所にチェックボックスを配置したりできます。今後は開発者の手を借りなくても、ポップアップ画面を現代的なデザインに仕上げることができます。

この記事では、PageSenseのテンプレートの設計画面を使用して、ポップアップ画面内の要素の形式やスタイルを設定するさまざまな方法を説明します。

背景色

ポップアップ画面を見た訪問者が、何をすべきか、どこをクリックすべきか迷わないようにすることが重要です。テキストボックス、入力欄、テキスト（複数行）、その他のオブジェクトに背景色を適用すると、テキストがWebページ上で埋もれず、目立つようになります。

要素に背景スタイルを適用するには
1. ポップアップ画面で、背景色を適用する要素（テキストボックス、入力欄、テキスト（複数行）、その他）をクリックします。

2. 左側のパネルにある［背景］セクションで、次のいずれかを選択します。

［単色］：カラーピッカーをクリックして、要素全体に1色を均一に適用します。
［グラデーション］：カラーピッカーをクリックして、1つの色から別の色へ徐々に変化する、2色以上の連続したグラデーションを要素に適用します。
［画像］：コンピューターから画像を選択し、要素の背景として適用します。
メモ：要素に適用した背景色や画像を削除する場合は、［透明］を選択します。

余白のスペース

余白の設定を使用して、要素間のスペースを増減できます。テンプレートの設計画面では、要素を含むボックスの各辺（右、上、下、左）に余白を設定できます。

要素の余白を調整するには
1. ポップアップ画面で、余白のスペースを調整する要素（テキストボックス、入力欄、テキスト（複数行）、その他）をクリックします。

2. 左側のパネルにある余白のスライダー（上、右、下、左）を、［余白］セクションで調整します。ポップアップ画面のデザインに合わせて、要素の周囲全体または特定の辺に余白を追加できます。希望する値（ピクセル単位）を手動で入力し、Enterキーを押すこともできます。

罫線のスタイル

テキストボックス、画像、動画、その他の項目に装飾的な罫線や線の効果を追加すると、ポップアップ画面内の各セクションを区切って強調できます。各要素の罫線のスタイル、罫線の色、罫線の幅、線のスタイルは、次の手順でカスタマイズできます。

要素に罫線のスタイルを適用するには
1. ポップアップ画面で、罫線のスタイルを適用する要素（テキストボックス、入力欄、テキスト（複数行）、その他）をクリックします。

2. 左側のパネルにある［罫線と影］セクションで、［罫線のスタイル］のドロップダウンをクリックし、点線、破線、二重線など、要素に適用する罫線の種類を選択します。
スクリーンショットに示すように、［罫線の色］、［罫線の幅］、［罫線の角丸］の各設定を使用して、罫線のプロパティをカスタマイズできます。

影の効果

背景のように見える影の効果を要素に追加してスタイルを整え、ポップアップ画面の重要な部分を強調できます。影の位置、ぼかし具合、要素からの距離など、さまざまな項目を調整できます。

要素に影の効果を適用するには
1. ポップアップ画面で、影の効果を適用する要素（テキストボックス、入力欄、テキスト（複数行）、その他）をクリックします。

2. 左側のパネルにある［罫線と影］セクションで、カラーピッカーから要素に適用する影の色を選択し、位置やぼかし具合などのプロパティをスクリーンショットに示すようにカスタマイズします。

内側の余白

内側の余白は、要素の罫線とその内側にあるメインコンテンツとの間隔を調整するために使用します。内側の余白の値を調整しても、ポップアップ画面上の異なる要素間の距離には影響しません。

要素の間隔を調整するには：
ポップアップ画面上の要素をクリックします。左ペインの［間隔］セクションで、必要に応じて間隔のスライダー（上、右、下、左）をドラッグして調整します。希望する値（ピクセル単位）をテキストボックスに直接入力することもできます。その後、［Enter］キーを押します。

表示設定

ポップアップ画面内での要素の配置（例：左、右、中央）や、各要素に設定する幅と高さを、ブラウザーのウィンドウサイズに合わせて指定します。

要素の表示設定をカスタマイズするには：
ポップアップ画面上の要素（テキストボックス、入力欄、テキストエリアなど）をクリックします。左ペインの［表示］セクションで、次のいずれかを行います。

要素の位置を、［左］、［右］、［中央］、または［均等割り付け］のいずれかで変更します。
要素の幅と高さをスライダーで、スクリーンショットのように変更します。

ボタンの色

左ペインのカラーパレットを使用して、ポップアップ画面のアクションボタンの色を変更します。CTAボタンに明るい色を使用すると、訪問者の注意を引いてすぐにクリックしてもらいやすくなり、その結果、Webサイトのコンバージョン向上につながります。

ボタンに色を適用するには：
ポップアップ画面上のボタンをクリックします。左ペインの［ボタンの色］セクションで、CTAに適用する色を選択します。

マウス操作

マウスオーバー効果を設定すると、ユーザーがポップアップ画面のボタンにマウスポインターを合わせるたびに、ボタンの背景とテキストの色を変更できます。これにより、訪問者はポップアップ画面の各要素に対する操作を明確に把握でき、その結果、重要なCTAをすばやくクリックしやすくなります。

ボタンにマウスオーバー効果を適用するには：
ポップアップ画面上のボタンをクリックします。左ペインの［マウス操作］セクションで、マウスオーバー時またはクリック時に表示する背景とテキストの色を、スクリーンショットのように選択します。