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

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

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

背景の色、画像、罫線のスタイル、影の効果などを簡単に追加して、ポップアップ画面をより魅力的で印象的に仕上げることができます。すぐに使えるテンプレートまたは空のテンプレートを選択し、テンプレートの設計画面に状況に応じて表示される多彩な選択肢を使用して、ポップアップ画面のカスタマイズを開始できます。また、要件に応じて、テンプレートの設計画面でポップアップ画面に新しい要素を追加したり、さまざまなフォームの項目を選択したりできます。
テンプレートの設計画面でポップアップ画面の形式やスタイルを設定する際に使用できる選択肢は、次のとおりです。

背景の色

テンプレートに目を引く背景の色や画像を使用すると、重要なメッセージを強調し、Webページ上で目立たせることができます。
背景のスタイルを適用するには、ポップアップ画面のテンプレートをクリックし、次の選択肢から選択します。

  • ［単色］：カラーピッカーをクリックすると、ポップアップ画面全体に1つの色を均一に適用できます。


  • ［グラデーションの色］：カラーピッカーをクリックすると、1つの色から別の色へ徐々に変化する、2色以上の連続したグラデーションを適用できます。


  • ［画像］：パソコンから画像を選択し、ポップアップ画面の背景として適用できます。


    ポップアップ画面から背景の色または画像を削除する場合は、［透明］を選択します。

間隔

間隔とは、テンプレート内のポップアップ画面の罫線と本文コンテンツの間にあるスペースです。各ポップアップ画面のテンプレートには、PageSenseで独自のレイアウトと既定の間隔スタイルが設定されています。必要に応じて、間隔のピクセル値を増減できます。
テンプレートの間隔を調整するには、ポップアップ画面をクリックし、左側のペインにある［上］、［右］、［下］、［左］の各スライダーをドラッグします。テキストボックスに希望する値（ピクセル単位）を直接入力し、Enterキーを押すこともできます。

情報：
  1. 間隔の変更はモバイルのレイアウトに異なる影響を与える場合があるため、モバイルでの表示を確認してください。
  2. テンプレートを含むWebサイト内のすべてのページ、およびバナーやフッターを確認してください。
  3. 一部のテンプレートには既定の間隔が設定されており、削除または変更できません。

余白

ポップアップ画面の周囲の余白を、Webサイトに適したサイズに設定します。この選択肢を使用すると、ポップアップ画面の周囲全体または特定の辺に空白の余白を追加して、見た目を引き立たせることもできます。

余白のサイズを調整するには、ポップアップ画面をクリックし、左側のペインにある余白のスライダーをドラッグします。テキストボックスに希望する値（ピクセル単位）を直接入力し、Enterキーを押すこともできます。

罫線と影

PageSenseで罫線と影の効果を適用すると、ポップアップ画面をよりリアルで効果的に見せることができます。罫線の効果では、ポップアップ画面に輪郭線を適用してWebページ上で強調できます。影の効果では、ポップアップ画面の下に影を追加し、よりリアルに見せることができます。

  1. 罫線の効果を適用するには、［罫線のスタイル］のドロップダウンをクリックし、ポップアップ画面に適用する罫線の種類（点線、破線、二重線など）を選択します。スクリーンショットに示すように、［罫線の色］、［罫線の幅］、［罫線の角の丸み］の選択肢を使用して、罫線のプロパティをカスタマイズできます。

  2. 影の効果を適用するには、カラーピッカーでポップアップ画面に使用する影の色を選択し、スクリーンショットに示すように、位置やぼかしなどのプロパティをカスタマイズします。


オーバーレイの色

Webページまたはバナー画像の背景にフィルター効果を追加すると、ポップアップ画面のコンテンツをさらに強調できます。初期設定では、ポップアップ画面の色を引き立てるグレー系の色がオーバーレイの色として適用されます。

オーバーレイの色を適用するには、左側のペインに移動し、使用するオーバーレイの色のスタイルとして、［透明］、［単色］、［グラデーションの色］、または［画像］を選択します。

閉じるアイコン

訪問者がポップアップ画面の×アイコンをクリックすると、ポップアップ画面が閉じてWebページから消えます。PageSenseでは、ポップアップ画面の細かな部分を調整でき、閉じる機能のプロパティもカスタマイズできます。

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

2. ［プレビュー］アイコンを使用して、ポップアップ画面がデスクトップとモバイルのデバイスでどのように表示されるかを確認します。


3. 続いて、［次へ］をクリックし、ポップアップ画面のオーディエンス設定に進みます。

重要：ポップアップ画面を表示するすべてのURLに、Zoho PageSenseのコードスニペットがインストールされていることを確認してください。