メインコンテンツへスキップ

「ポップアップ編集」画面を開く

  • 更新

「ポップアップの新規作成」から［保存してポップアップを作成］ボタンをクリックするとポップアップの編集画面に移動します。

作成したポップアップの編集画面に移動するときは「ポップアップ一覧」画面で、編集したいポップアップの右端の［編集］ボタンをクリックします。

❗️配信を開始したポップアップの［編集］ボタンは、編集と設定の内容を確認するための［確認］ボタンに切り替わります。 1度配信を開始すると、配信を停止してもポップアップの編集と表示させるページの変更はできません。
💡「配信中」または「停止中」のポップアップの設定を部分的に変更したいときは、複製して変更してください。
詳しくは「ポップアップを複製する」をご確認ください。

「ポップアップ編集」画面を開く

 

「ポップアップ編集」画面

［表示させる条件］を選択している状態

2023-11-09_19-36-39.png

 

①［ポップアップ一覧］ 「ポップアップ一覧」画面に移動します。
② ポップアップ名 このポップアップの名前 「ポップアップ設定」画面で変更できます。
詳しくは「ポップアップ名を変更する」をご確認ください。
③ 背景の日付 直下の「ポップアップとページのプレビュー」に表示している背景のページの日付
④［ページの表示設定］ ページが正しく表示されないときに設定を変更します。
詳しくは「ページの表示方法を設定する」をご確認ください。
⑤［ポップアップ設定］ ポップアップの基本情報や配信するページを設定します。
詳しくは「「ポップアップ設定」画面を開く」をご確認ください。
⑥［表示された状態をプレビュー］ 編集中のポップアップを別のウインドウで表示します。 配信後の表示された状態を実際のウェブブラウザ上で確認できます。
詳しくは「ポップアップが表示された状態を別ウインドウで確認する」ご確認ください。
⑦［配信を開始］ ポップアップの配信を開始します。
💡配信を開始するには、ポップアップの画像を設定してください。
❗️1度配信を開始すると、配信を停止しても「ポップアップの編集」と「表示させるページの変更」ができなくなります。
⑧ ポップアップの背景に表示しているページのURL ポップアップの背景に表示しているページのURL
⑨［ページを選択する］

「ページを選択」ダイアログを開いて、ポップアップの背景に表示しているページを変更できます。詳しくは「ページを選択する」をご確認ください。

新規作成または「ポップアップ設定」の「ポップアップを表示させるページ」の設定によって、表示されるページの一覧の内容が異なります。

「ページの一覧から選択」を選択しているとき：
選択しているページのみの一覧のダイアログを表示します。

「URLの正規表現を入力」を選択しているとき：
トラッキング中のすべてのページの一覧を表示します。
⑩［デバイス］ ページを表示するデバイスを切り替えます。
詳しくは「ページを表示するデバイスを切り替える」をご確認ください。

ポップアップに設定できる画像ファイルは「1つ」です。
「1つ」の画像ファイルは、横幅のサイズに応じてデバイスごとに自動でリサイズされるので、画像の設定後はデバイスを切り替えてポップアップの表示を確認することをおすすめします。

詳しくは「ポップアップに設定できる画像のフォーマットを教えてください。」をご確認ください。
⑪ ポップアップとページのプレビュー ポップアップを表示しているページのプレビュー
⑫ インジケーター：ページのスクロール率 ページのスクロール率
⑬ ポップアップ画像のドラッグ&ドロップエリア ポップアップに設定する画像ファイルを直接ドラッグ&ドロップして設定できます。
ポップアップに設定できる画像ファイルについて、詳しくは「ポップアップに設定できる画像のフォーマットを教えてください。」をご確認ください。
⑭［ファイルを選択］ ポップアップに設定したい画像ファイルを、OSのファイルブラウザから選択します。
⑮［閉じる］ ポップアップを閉じるためのボタンの表示イメージです。

ポップアップに設定した画像のデザインや、ポップアップの背景の不透明度や表示されるページの色彩に合わせて、デザインを5種類の中から選択できます。
詳しくは「ポップアップを［閉じる］ボタンのデザインを変更する」をご確認ください。
💡［閉じる］ボタンの実際の動作は［表示された状態をプレビュー］ボタンをクリックして、別ウインドウ上で確認できます。詳しくは「ポップアップが表示された状態を別ウインドウで確認する」ご確認ください。
⑯ ［編集内容を保存］ 編集した内容を保存します。
クリックすると、編集した内容を［表示された状態をプレビュー］、［配信を開始］に反映します。
❗️内容を変更後［編集内容を保存］ボタンをクリックせずに他の画面に移動すると、編集した内容は反映されません。
⑰［パネルの最小化］ 「ポップアップの編集」パネルの表示を最小化します。
最小化した状態で［パネルの最大化］ボタンをクリックすると、「ポップアップの編集」パネルを再度表示します。
⑱［ポップアップをクリックして移動する先のURL］ ポップアップをクリックして移動する先のURLを入力します。

「http」、「https」、「#」ではじまるURLに対応しています。 空欄のまま配信を開始すると［閉じる］ボタンと背景のクリックで閉じる動作のみのポップアップが表示されます。

詳しくは「ポップアップをクリックして移動する先のURLを設定する」をご確認ください。
⑲［移動後の表示］ ポップアップをクリックして移動したページの表示の動きを選択します。

［オフ］：同じタブで移動先のページを開きます。
［オン］：新しいタブで移動先のページを開きます。
⑳［表示させる条件］ ポップアップを表示させる条件の設定を表示します。
㉑［条件を設定］ ポップアップを表示させる条件を設定する「条件を設定」ダイアログを開きます。
詳しくは「ポップアップを表示させる条件を設定する」をご確認ください。
㉒ 設定した条件 「条件を設定」ダイアログで設定した内容を表示します。

 

［デザイン］を選択している状態

2023-11-09_19-49-07.png

①［ポップアップ一覧］ 「ポップアップ一覧」画面に移動します。
② ポップアップ名 このポップアップの名前 「ポップアップ設定」画面で変更できます。
詳しくは「ポップアップ名を変更する」をご確認ください。
③ 背景の日付 直下の「ポップアップとページのプレビュー」に表示している背景のページの日付
④［ページの表示設定］ ページが正しく表示されないときに設定を変更します。
詳しくは「ページの表示方法を設定する」をご確認ください。
⑤［ポップアップ設定］ ポップアップの基本情報や配信するページを設定します。
詳しくは「「ポップアップ設定」画面を開く」をご確認ください。
⑥［表示された状態をプレビュー］ 編集中のポップアップを別のウインドウで表示します。 配信後の表示された状態を実際のウェブブラウザ上で確認できます。
詳しくは「ポップアップが表示された状態を別ウインドウで確認する」ご確認ください。
⑦［配信を開始］ ポップアップの配信を開始します。
💡配信を開始するには、ポップアップの画像を設定してください。
❗️1度配信を開始すると、配信を停止しても「ポップアップの編集」と「表示させるページの変更」ができなくなります。
⑧ ポップアップの背景に表示しているページのURL ポップアップの背景に表示しているページのURL
⑨［ページを選択する］

「ページを選択」ダイアログを開いて、ポップアップの背景に表示しているページを変更できます。詳しくは「ページを選択する」をご確認ください。

新規作成または「ポップアップ設定」の「ポップアップを表示させるページ」の設定によって、表示されるページの一覧の内容が異なります。

「ページの一覧から選択」を選択しているとき：
選択しているページのみの一覧のダイアログを表示します。

「URLの正規表現を入力」を選択しているとき：
トラッキング中のすべてのページの一覧を表示します。
⑩［デバイス］ ページを表示するデバイスを切り替えます。
詳しくは「ページを表示するデバイスを切り替える」をご確認ください。

ポップアップに設定できる画像ファイルは「1つ」です。
「1つ」の画像ファイルは、横幅のサイズに応じてデバイスごとに自動でリサイズされるので、画像の設定後はデバイスを切り替えてポップアップの表示を確認することをおすすめします。

詳しくは「ポップアップに設定できる画像のフォーマットを教えてください。」をご確認ください。
⑪ ポップアップとページのプレビュー ポップアップを表示しているページのプレビュー
⑫ インジケーター：ページのスクロール率 ページのスクロール率
⑬ ポップアップ画像のドラッグ&ドロップエリア ポップアップに設定する画像ファイルを直接ドラッグ&ドロップして設定できます。
ポップアップに設定できる画像ファイルについて、詳しくは「ポップアップに設定できる画像のフォーマットを教えてください。」をご確認ください。
⑭［ファイルを選択］ ポップアップに設定したい画像ファイルを、OSのファイルブラウザから選択します。
⑮［閉じる］ ポップアップを閉じるためのボタンの表示イメージです。

ポップアップに設定した画像のデザインや、ポップアップの背景の不透明度や表示されるページの色彩に合わせて、デザインを5種類の中から選択できます。
詳しくは「ポップアップを［閉じる］ボタンのデザインを変更する」をご確認ください。
💡［閉じる］ボタンの実際の動作は［表示された状態をプレビュー］ボタンをクリックして、別ウインドウ上で確認できます。詳しくは「ポップアップが表示された状態を別ウインドウで確認する」ご確認ください。
⑯ ［編集内容を保存］ 編集した内容を保存します。
クリックすると、編集した内容を［表示された状態をプレビュー］、［配信を開始］に反映します。
❗️内容を変更後［編集内容を保存］ボタンをクリックせずに他の画面に移動すると、編集した内容は反映されません。
⑰［パネルの最小化］ 「ポップアップの編集」パネルの表示を最小化します。
最小化した状態で［パネルの最大化］ボタンをクリックすると、「ポップアップの編集」パネルを再度表示します。
⑱［ポップアップをクリックして移動する先のURL］ ポップアップをクリックして移動する先のURLを入力します。

「http」、「https」、「#」ではじまるURLに対応しています。 空欄のまま配信を開始すると［閉じる］ボタンと背景のクリックで閉じる動作のみのポップアップが表示されます。

詳しくは「ポップアップをクリックして移動する先のURLを設定する」をご確認ください。
⑲［移動後の表示］ ポップアップをクリックして移動したページの表示の動きを選択します。

［オフ］：同じタブで移動先のページを開きます。
［オン］：新しいタブで移動先のページを開きます。
⑳［デザイン］ ポップアップと背景のデザインの設定を表示します。
㉑［ポップアップ種別］ ポップアップを表示する位置を3種類の中から選択できます。
㉒［画像表示］ 画像表示のオンオフを選択できます。
㉓［画像最大幅］ ポップアップのサイズを、20%（小さい）から100%（大きい）のあいだで、スライダーを操作して1%きざみで調整できます。
㉔［閉じる］ボタン
 ポップアップに設定した画像のデザインや、ポップアップの背景の不透明度や表示されるページの色彩に合わせて、デザインを5種類の中から選択できます。
詳しくは「ポップアップを［閉じる］ボタンのデザインを変更する」をご確認ください。
㉕［スタイル詳細を開く］
 ポップアップの詳細設定ができるパネルが表示されます。

 

［スタイル詳細を開く］ボタンを押下した状態

2023-11-09_20-00-49.png

 

①［ポップアップ一覧］ 「ポップアップ一覧」画面に移動します。
② ポップアップ名 このポップアップの名前 「ポップアップ設定」画面で変更できます。
詳しくは「ポップアップ名を変更する」をご確認ください。
③ 背景の日付 直下の「ポップアップとページのプレビュー」に表示している背景のページの日付
④［ページの表示設定］ ページが正しく表示されないときに設定を変更します。
詳しくは「ページの表示方法を設定する」をご確認ください。
⑤［ポップアップ設定］ ポップアップの基本情報や配信するページを設定します。
詳しくは「「ポップアップ設定」画面を開く」をご確認ください。
⑥［表示された状態をプレビュー］ 編集中のポップアップを別のウインドウで表示します。 配信後の表示された状態を実際のウェブブラウザ上で確認できます。
詳しくは「ポップアップが表示された状態を別ウインドウで確認する」ご確認ください。
⑦［配信を開始］ ポップアップの配信を開始します。
💡配信を開始するには、ポップアップの画像を設定してください。
❗️1度配信を開始すると、配信を停止しても「ポップアップの編集」と「表示させるページの変更」ができなくなります。
⑧ ポップアップの背景に表示しているページのURL ポップアップの背景に表示しているページのURL
⑨［ページを選択する］

「ページを選択」ダイアログを開いて、ポップアップの背景に表示しているページを変更できます。詳しくは「ページを選択する」をご確認ください。

新規作成または「ポップアップ設定」の「ポップアップを表示させるページ」の設定によって、表示されるページの一覧の内容が異なります。

「ページの一覧から選択」を選択しているとき：
選択しているページのみの一覧のダイアログを表示します。

「URLの正規表現を入力」を選択しているとき：
トラッキング中のすべてのページの一覧を表示します。
⑩［デバイス］ ページを表示するデバイスを切り替えます。
詳しくは「ページを表示するデバイスを切り替える」をご確認ください。

ポップアップに設定できる画像ファイルは「1つ」です。
「1つ」の画像ファイルは、横幅のサイズに応じてデバイスごとに自動でリサイズされるので、画像の設定後はデバイスを切り替えてポップアップの表示を確認することをおすすめします。

詳しくは「ポップアップに設定できる画像のフォーマットを教えてください。」をご確認ください。
⑪ ポップアップとページのプレビュー ポップアップを表示しているページのプレビュー
⑫ インジケーター：ページのスクロール率 ページのスクロール率
⑬ ポップアップ画像のドラッグ&ドロップエリア ポップアップに設定する画像ファイルを直接ドラッグ&ドロップして設定できます。
ポップアップに設定できる画像ファイルについて、詳しくは「ポップアップに設定できる画像のフォーマットを教えてください。」をご確認ください。
⑭［ファイルを選択］ ポップアップに設定したい画像ファイルを、OSのファイルブラウザから選択します。
⑮［閉じる］ ポップアップを閉じるためのボタンの表示イメージです。

ポップアップに設定した画像のデザインや、ポップアップの背景の不透明度や表示されるページの色彩に合わせて、デザインを5種類の中から選択できます。
詳しくは「ポップアップを［閉じる］ボタンのデザインを変更する」をご確認ください。
💡［閉じる］ボタンの実際の動作は［表示された状態をプレビュー］ボタンをクリックして、別ウインドウ上で確認できます。詳しくは「ポップアップが表示された状態を別ウインドウで確認する」ご確認ください。
⑯ ［編集内容を保存］ 編集した内容を保存します。
クリックすると、編集した内容を［表示された状態をプレビュー］、［配信を開始］に反映します。
❗️内容を変更後［編集内容を保存］ボタンをクリックせずに他の画面に移動すると、編集した内容は反映されません。
⑰［パネルの最小化］ 「ポップアップの編集」パネルの表示を最小化します。
最小化した状態で［パネルの最大化］ボタンをクリックすると、「ポップアップの編集」パネルを再度表示します。
⑱［ポップアップ種別］

"※ポップアップ種別で「オーバーレイ」と「追従バナー」を選択した場合のみ表示します

＜「オーバーレイ」を選択した場合＞
「オーバーレイ」パネルの表示します。
表示された状態で［💳］ボタンをクリックすると、「オーバーレイ」パネルの表示を最小化します。

＜「追従バナー」を選択した場合＞
「追従バナー」パネルの表示します。
表示された状態で［💳］ボタンをクリックすると、「追従バナー」パネルの表示を最小化します。"
⑲［不透明度］ ※ポップアップ種別で「オーバーレイ」を選択した場合のみ表示します
ポップアップの背景（グレーのエリア）の不透明度を、50%（少し透明）から100%（完全に不透明）のあいだで、スライダーを操作して1%きざみで調整できます。
⑳［背景］ 「背景」パネルの表示します。
表示された状態で［💳］ボタンをクリックすると、「背景」パネルの表示を最小化します。
㉑［余白］ ポップアップの背景の余白を「なし」、「小」、「中」、「大」の4種類の中から選択できます。
㉒［角の丸み］ ポップアップの背景の角の丸みを3種類の中から選択できます。
㉓［テキスト］ 「テキスト」パネルの表示します。
表示された状態で［💳］ボタンをクリックすると、「テキスト」パネルの表示を最小化します。
㉔［タイトル］ ポップアップ内で表示するタイトルのオンオフを選択できます。
㉕［フォントサイズ］ ポップアップ内で表示するタイトルのフォントサイズを13段階から選択できます。
㉖［フォントカラー］
 ポップアップ内で表示するタイトルのフォントカラーを自由に選択できます。
㉗［タイトルを入力］ ポップアップ内で表示するタイトル名を入力します。
㉘［テキスト全体の配置］ ポップアップ内で表示するタイトル名の配置を「左寄せ」、「中央寄せ」、「右寄せ」の3種類の中から選択できます。
㉙［テキスト詳細］ ポップアップ内で表示するテキストのオンオフを選択できます。
㉚［フォントサイズ］ ポップアップ内で表示するテキストのフォントサイズを13段階から選択できます。
㉛［フォントカラー］ ポップアップ内で表示するテキストのフォントカラーを自由に選択できます。
㉜［行間］ ポップアップ内で表示するテキストを行間を「1」、「1.15」、「1.5」、「2」の4種類の中から選択できます。
㉝［テキスト詳細を入力］ ポップアップ内で表示するテキストを入力します。
㉞［テキスト全体の配置］ ポップアップ内で表示するテキストの配置を「左寄せ」、「中央寄せ」、「右寄せ」の3種類の中から選択できます。
㉟［ボタン］ 「ボタン」パネルの表示します。
表示された状態で［💳］ボタンをクリックすると、「ボタン」パネルの表示を最小化します。
㊱［ボタンテキスト］ ポップアップ内で表示するボタンのオンオフを選択できます。
㊲［フォントサイズ］ ポップアップ内で表示するボタンのフォントサイズを13段階から選択できます。
㊳［フォントカラー］ ポップアップ内で表示するボタンのフォントカラーを自由に選択できます。
㊴［ボタンテキストを入力］ ポップアップ内で表示するボタン名を入力します。
㊵［ボタン背景最大幅］ ポップアップの横幅を、50%（短い）から100%（長い）のあいだで、スライダーを操作して1%きざみで調整できます。
㊶［ボタンの背景］ ポップアップ内で表示するボタンの背景カラーを自由に選択できます。
㊷［角の丸み］ ポップアップの背景の角の丸みを3種類の中から選択できます。
㊸［表示位置］ ※ポップアップ種別で「追従バナー」を選択した場合のみ表示します
ポップアップの表示位置を「右下」「左下」の2種類の中から選択できます。
㊹［画像の代替テキスト（alt属性）］ 何らかの理由でポップアップの画像が表示されなかったときに、代替として表示される「alt属性」のテキストを設定できます。
詳しくは「ポップアップの画像の代替テキスト（alt属性）を設定する」をご確認ください。
㊺［閉じる］ ［スタイル詳細を開く］パネルを閉じます。

 

 

 

 

関連記事