ポップアップの作成
デザインとティーザー
ポップアップ本体、閉じるボタン、背景のオーバーレイ、ティーザーの設定を説明します。
サイズと位置
表示位置
画面内の9か所から選択できます。
- 左上・上・右上
- 左中・中央・右中
- 左下・下・右下
横幅
- 画像のみ：「画像の表示幅」でPC・スマートフォンそれぞれの横幅を設定します。スマートフォンの設定が空欄の場合は、PCと同じ幅で表示されます。
- 動画のみ：横幅・高さは動画に合わせて自動調整します。「動画の最大幅」が上限になります。
- カウントダウン：横幅は画面いっぱい、高さは内容に合わせて自動調整します。
- ブロック・HTML・メールアドレスフォーム：「ポップアップの最大横幅」がポップアップ本体の上限になります。「ポップアップの横幅」で「自動（動画に合わせる）」を選ぶと、動画ブロックが1つだけの画面は動画の幅に合わせます。ほかのブロックがある画面は指定した幅を使用します。
スマートフォンなど画面が狭い場合は、画面内に収まるよう自動的に縮小されます。
角丸と内側の余白
画像のみタイプでは、画像の周囲へ不要な空白を作らないため、角丸と内側の余白は0からの調整をおすすめします。
背景カラーの「なし」を押すと、ポップアップ本体の背景を透明にし、影も消します。丸いバナーなどの透過PNGに利用できます。
ブロック・HTML・メールアドレスフォームでは、文字やボタンが端に近づきすぎないよう内側の余白を設定してください。
動画の「動画の角丸」と、ここで設定するポップアップ全体の「角丸」は別の設定です。動画ブロックだけを配置して余白をなくしたい場合は、ポップアップと動画ブロックの内側の余白を両方0にしてください。
アニメーション
次の表示方法から選択できます。
- フェードイン
- スライドイン（下から）
- スライドイン（上から）
- スライドイン（右から）
- スライドイン（左から）
- 拡大
- なし
閉じるボタン
閉じるボタンは、表示・非表示、大きさ、ポップアップの内側・外側、左右の配置、背景色、アイコン色、枠線色を設定できます。
閉じるボタンを非表示にする場合は、「ポップアップを閉じる」を設定したボタンや、クリックで閉じるオーバーレイなど、お客様が閉じられる方法を用意してください。
コンテンツタイプ「カウントダウン」の閉じるボタンはバーの内側に表示します。「内側・外側」の代わりに「左右位置」と「上下位置」（上・中央・下）を設定します。上下位置の初期値は中央です。
オーバーレイ
ポップアップの後ろに重ねる背景です。色と濃さを設定できます。
| 設定 | 背面のリンク・ボタン操作 | 背面ページのスクロール |
|---|---|---|
| オーバーレイあり | できません | できます |
| オーバーレイなし | できます | できます |
「クリックでポップアップを閉じる」を有効にすると、ポップアップの外側を押して閉じられます。
ティーザーとは
ティーザーは、ポップアップを閉じたページの左下または右下へ表示できる小さなボタンです。押すとポップアップ本体を再表示できます。
設定できる項目は次のとおりです。
- 文言
- 左下・右下
- 背景色
- 文字色
- 角丸
- 枠線の色・太さ
ティーザーにも閉じるボタンを表示できます。ポップアップ本体の閉じるボタンと同様に、表示・非表示、大きさ、内側・外側、左右配置、背景色、アイコン色、枠線色を設定します。
編集画面の「ティーザー」を押すと、本体を閉じた後の見た目を確認できます。
再表示条件との関係
本体を閉じたページでは、ティーザーからもう一度本体を開けます。ティーザーの閉じるボタンを押すと、そのページでは表示されなくなります。
ページ移動・再読み込み後は、本体と同じ再表示条件で判定します。
| 再表示条件 | ページ移動・再読み込み後 |
|---|---|
| 毎回、ページを訪れたとき | 本体が再び表示対象になります |
| 現在の訪問中は一度だけ | 同じ訪問中は本体・ティーザーとも表示しません |
| 閉じた後、指定時間が経過したとき | 待機中は本体・ティーザーとも表示しません |
待機時間は、最後に本体またはティーザーを閉じた時刻から数えます。
表示回数への加算
- ティーザーが表示されただけでは、表示回数に加算されません。
- ティーザーを押してポップアップ本体が開くと、表示回数に加算されます。
- ティーザーを押したこと自体はクリック数に加算されません。
PCとモバイルの違いを確認する
編集画面の「PC」「モバイル」を切り替え、最大横幅や内側の余白、文字の折り返しを確認します。画面幅が狭い場合はポップアップが画面内に収まるよう調整されますが、実際の余白は、最大横幅、内側の余白、コンテンツ、端末の画面幅によって異なります。
カウントダウンの「スマホで別のサイズを使う」は画面幅600px以下に適用します。表示ルールの「モバイル」（767px以下）とは基準が異なります。
保存後は「ストアでプレビュー」を使い、実際のテーマ上でも確認してください。内容が長い場合は、ポップアップ内をスクロールして、ボタンや閉じるボタンまで操作できることも確認します。
閉じた後は、設定した位置にティーザーが表示されます。実際のストアではテーマの固定バーなどと重ならないことも確認してください。