編集画面ではポップアップに使用する画像の「画像選択」と「ポップアップを編集」パネルが表示されます。
「ポップアップを編集」パネルでは以下の編集ができます。
①リンクを設定
②スクリプトを設定
③表示条件
④デザイン
⑤テキスト
⑥ボタン
1. 画像を設定する
ポップアップに表示させたい画像を設定します。
💡以下のフォーマットの画像ファイルに対応しています。
|
|
💡推奨サイズは横幅 300〜480px です。 ※横幅を優先して縦横の比率を維持します。 |
| 💡ポップアップに設定できる画像ファイルは「1つ」です。 「1つ」の画像ファイルは、横幅のサイズに応じてデバイスごとに自動でリサイズされます。
|
画像選択画面
|
①［画像を設定する］ |
画像ファイルを直接ドロップします。 |
|
②［ファイルを選択］ |
画像ファイルをフォルダから選択します。 |
|
③［メディア一覧から選択］ |
画像ファイルをメディア一覧から選択します。 |
2. ポップアップのリンクを設定またはスクリプトを設定する
リンクを設定
配信中のポップアップの画像エリアをクリック／タップされたときの、移動先のURLを設定できます。
［リンクを設定］のチェックボックスを［オン］にすると、リンクを設定できます。
リンクを設定の入力欄に正しい文字列で移動先のURLを入力します。
移動後のページの表示を設定できます。
［新しいタグで開く］のチェックボックスを［オン］にすると、新しいタブで移動先のページまたはページ内のアンカーリンクの位置を開きます。
［オフ］にすると、ポップアップを表示させたページと同じタブで移動先のページまたはページ内のアンカーリンクの位置を開きます。
URLパラメータの引き継ぎを設定できます。
［URLパラメータをリンク先へ引き継ぐ］のチェックボックスを［オン］にすると、ポップアップをクリックしてページを移動後にURLパラメータを引き継ぎます。
クリック後、ポップアップを閉じるかどうかを設定できます。
［クリック後、ポップアップを閉じる］のチェックボックスを［オン］にすると、ポップアップの画像エリアをクリック／タップされたときにポップアップを閉じます。
スクリプトを設定
配信中のポップアップの画像エリアをクリック／タップされたときの、起動スクリプトを設定できます。
［スクリプトを設定］のチェックボックスを［オン］にすると、スクリプトを設定できます。
詳しくは「ウィジェットをクリックして起動するスクリプトを設定する」をご確認ください。
3. 表示させる条件を設定する
［表示条件］タブをクリックします。
［条件を設定］ボタンをクリックします。
「条件を設定」のダイアログが表示されるので、ポップアップを表示させる条件を設定します。
💡初期設定は、以下の設定になっています。
|
設定の詳しい内容は、以下のページをご確認ください。
「ポップアップを表示させる「アクセスの対象」と「回数の上限」を設定する」
「ポップアップを表示させる条件となるイベントを設定する」
4. デザインを編集する
［デザイン］タブをクリックし、デザインを編集します。
「ポップアップを編集」パネル：［デザイン］タブを選択（オーバーレイ／追従バー）
| ポップアップ種別 | ①［オーバーレイ］ | 画面の中央にポップアップを表示させます。 |
| ②［追従バー］ | 画面の下部にポップアップを固定表示させます。 | |
| ③［追従バナー］ |
画面の右下もしくは左下にポップアップを固定表示させます。 初期設定では右下に表示します。 |
|
| ④［オーバーレイの不透明度］ |
ポップアップの背景（グレーのエリア）の不透明度を、50%（少し透明）から100%（完全に不透明）の間で、スライダーを操作もしくは数字を入力して1%きざみで調整できます。 ※ポップアップ種別で［オーバーレイ］を選択している場合のみ表示されます。 |
|
| ⑤［ポップアップのサイズ］ |
ポップアップのサイズを、20%（小さい）から100%（大きい）の間で、スライダーを操作もしくは数字を入力して1%きざみで調整できます。 |
|
| ⑥ 閉じるボタン |
ポップアップを閉じるためのボタンの表示イメージです。 ポップアップに設定した画像のデザインや、ポップアップの背景の不透明度や表示されるページの色彩に合わせて、デザインを5種類の中から選択できます。 |
|
| ⑦［画像を表示］ |
画像表示の［オン／オフ］を設定できます。 ［オン］：ポップアップに画像を表示する状態 |
|
|
背景 |
⑧［余白］ |
ポップアップに設定した画像と背景の間の余白を調整できます。 |
| ⑨［角の丸み］ |
ポップアップに設定した画像の背景の角の丸みを3種類の中から選択できます。 |
|
| ⑩［画像の代替テキスト（alt属性）］ |
ポップアップの画像が表示されなかったときに代替として表示される「alt属性」のテキストを設定できます。 |
|
「ポップアップを編集」パネル：［デザイン］タブを選択（追従バナー）
| ［表示位置］ |
ポップアップの表示位置を「右下」「左下」の2種類の中から選択できます。 ※ポップアップ種別で［追従バナー］を選択している場合のみ表示されます。 |
|
※その他の編集機能はのポップアップ種別が［追従バー］の場合と同様です。
5. テキストを編集する
［テキスト］タブをクリックし、テキストを設定します。
「ポップアップを編集」パネル：［テキスト］タブを選択
| ①［タイトルテキスト］ |
ポップアップ内に表示するタイトル表示の［オン／オフ］を設定します。 ［オン］：ポップアップにタイトルを表示する状態 |
|
| ②［タイトルを入力］ |
ポップアップ内で表示するタイトル名を入力します。 |
|
| ③［フォントサイズ］ | ポップアップ内に表示するタイトルのフォントサイズをスライダーを操作し13段階で調整できます。 | |
| ④［フォントカラー］ | ポップアップ内で表示するタイトルのフォントカラーを自由に選択できます。 | |
| ⑤［テキストの配置］ | ポップアップ内で表示するタイトル名の配置を「左寄せ」「中央寄せ」「右寄せ」の3種類の中から選択できます。 | |
| ⑥［詳細テキスト］ |
ポップアップ内に表示する詳細テキストの［オン／オフ］を設定します。 ［オン］：ポップアップに詳細テキストを表示する状態 |
|
| ⑦［詳細テキストを入力］ |
ポップアップ内で表示する詳細テキストを入力します。 |
|
| ⑧［フォントサイズ］ |
ポップアップ内に表示する詳細テキストのフォントサイズをスライダーを操作し13段階で調整できます。 |
|
| ⑨［フォントカラー］ |
ポップアップ内で表示する詳細テキストのフォントカラーを自由に選択できます。 |
|
| ⑩［テキストの配置］ |
ポップアップ内で表示する詳細テキストの配置を「左寄せ」「中央寄せ」「右寄せ」の3種類の中から選択できます。 |
|
| ⑪［行間］ |
ポップアップ内で表示する詳細テキストを行間を「1」「1.15」「1.5」「2」の4種類の中から選択できます。 |
|
6. ボタンを編集する
［ボタン］タブをクリックし、ボタンを編集します。
「ポップアップを編集」パネル：［ボタン］タブを選択
| ①［ボタンを表示］ | ポップアップ内に表示するボタンの［オン／オフ］を設定します。
［オン］：ポップアップにボタンを表示する状態 |
|
| ②［ボタンテキスト］ | ポップアップ内で表示するボタン名を入力します。 | |
| ③［フォントサイズ］ | ポップアップ内に表示するボタンのフォントサイズをスライダーを操作し13段階で調整できます。 | |
| ④［フォントカラー］ | ポップアップ内に表示するボタンのフォントカラーを自由に選択できます。 | |
| ボタンデザイン | ⑤［背景カラー］ | ポップアップ内に表示するボタンの背景カラーを自由に選択できます。 |
| ⑥［角の丸み］ | ポップアップに表示するボタンの角の丸みを3種類の中から選択できます。 | |
| ⑦［ボタンサイズ］ | ポップアップの横幅を、50%（短い）から100%（長い）の間で、スライダーを操作もしくは数字を入力して1%きざみで調整できます。 | |
5. 編集内容を保存する
| 💡［テンプレートから作成］で作成したウィジェットはマイウィジェットとして保存されます。 |
すべての編集が完了したら［編集内容を保存］をクリックします。
「テンプレートをマイウィジェットとして保存」のダイアログが表示されるので、ウィジェット名を入力し［マイウィジェットに保存］をクリックします。
「マイウィジェット一覧」に移動し作成したウィジェットが追加されていることを確認できます。