テンプレートを編集する-画像ポップアップ

編集画面ではポップアップに使用する画像の「画像選択」と「ポップアップを編集」画面が表示されます。

 

「ポップアップを編集」画面では以下の編集ができます。

①ポップアップをクリックして移動する先のURL

②移動後の表示

③URLパラメータの引き継ぎ

④表示させる条件

⑤デザイン

 

1. 画像を設定する

ポップアップに表示させたい画像を設定します。

💡以下のフォーマットの画像ファイルに対応しています。 JPEG形式／PNG形式／GIF形式 データ容量が最大300KB

💡推奨サイズは横幅 300〜480px です。 ※横幅を優先して縦横の比率を維持します。

💡ポップアップに設定できる画像ファイルは「1つ」です。 「1つ」の画像ファイルは、横幅のサイズに応じてデバイスごとに自動でリサイズされます。 スマートフォンでは、横幅 300px 以上の画像は、横幅 300pxに自動でリサイズされます。 パソコン・タブレットでは、横幅 480px 以上の画像は、横幅 480pxに自動でリサイズされます。

 

画像選択画面

 

①［画像ファイルをドロップ］	画像ファイルを直接ドロップします。
②［ファイルを選択］	画像ファイルをフォルダから選択します。
③［メディア一覧から選択］	画像ファイルをメディア一覧から選択します。

 

2. ポップアップをクリック後の遷移先を設定する

ポップアップをクリックしてページを移動する場合は［ポップアップをクリックして移動する先のURL］に移動先のURLを入力します。

ポップアップをクリックしてページを移動しない場合は未入力の状態にしておきます。

 

ポップアップをクリックしてページを移動後に新しく別タブでページを開きたい場合は［新しいタブに開く］にチェックをいれた状態にしておきます。

同じタブでページを移動したい場合はチェックを外してください。

 

ポップアップをクリックしてページを移動後にURLパラメータを引き継ぎたい場合は［リンク先へ引継ぐ］にチェックを入れてください。

 

3. 表示させる条件を設定する

［表示させる条件］タブにある［条件を設定］をクリックしポップアップを表示させる条件を設定します。

 

「条件を設定」のダイアログが表示されるので、ポップアップを表示させる条件を設定します。

💡初期設定は、以下の設定になっています。 すべてのデバイスにポップアップを表示させます。 すべてのアクセスに対して、回数の制限なくポップアップを表示させます。 サイト訪問者の閲覧の開始と同時にポップアップを表示させます。 URLパラメータがついている場合もパラメータに関係なくポップアップを表示させます。

 

設定の詳しい内容は、以下のページをご確認ください。
「ポップアップを表示させるデバイスを設定する」
「ポップアップを表示させる「アクセスの対象」と「回数の上限」を設定する」
「ポップアップを表示させる条件となるイベントを設定する」
「ポップアップを表示させるURLパラメータを設定する」

 

4. デザインを編集する

ポップアップのデザインを変更したい場合は［デザイン］タブをクリックします。

［デザイン］画面が表示されるので表示したいデザインを選択します。

 

［デザイン］画面

 

ポップアップ種別	①［オーバーレイ］	画面の中央にポップアップを表示させます。
	②［追従バー］	画面の下部にポップアップを固定表示させます。
	③［追従バナー］	画面の右下もしくは左下にポップアップを固定表示させます。 初期設定では右下に表示します。
画像の表示	④［オン／オフ］	画像表示のオンオフを選択できます。
⑤［ポップアップの最大幅］		ポップアップのサイズを、20%（小さい）から100%（大きい）の間で、スライダーを操作もしくは数字を入力して1%きざみで調整できます。
⑥閉じるボタン		ポップアップを閉じるためのボタンの表示イメージです。 ポップアップに設定した画像のデザインや、ポップアップの背景の不透明度や表示されるページの色彩に合わせて、デザインを5種類の中から選択できます。
⑦［スタイルの詳細を開く］		ポップアップの詳細を設定するためのパネルが表示され、デザイン変更やテキストの追加ができます。

 

スタイル詳細画面（オーバーレイ／追従バー）

 

オーバーレイ	①［不透明度］	ポップアップの背景（グレーのエリア）の不透明度を、50%（少し透明）から100%（完全に不透明）の間で、スライダーを操作もしくは数字を入力して1%きざみで調整できます。 ※ポップアップ種別で［オーバーレイ］を選択している場合のみ表示されます。
背景	②［余白］	ポップアップに設定した画像と背景の間の余白を調整できます。
	③［角の丸み］	ポップアップに設定した画像の背景の角の丸みを3種類の中から選択できます。
テキスト	④タイトル	ポップアップ内に表示するタイトル表示のオンオフを選択できます。
	⑤［フォントサイズ］	ポップアップ内に表示するタイトルのフォントサイズをスライダーを操作し13段階で調整できます。
	⑥［フォントカラー］	ポップアップ内で表示するタイトルのフォントカラーを自由に選択できます。
	⑦［タイトルを入力］	ポップアップ内で表示するタイトル名を入力します。
	⑧［テキストの配置］	ポップアップ内で表示するタイトル名の配置を「左寄せ」「中央寄せ」「右寄せ」の3種類の中から選択できます。
	⑨詳細テキスト	ポップアップ内に表示する詳細テキストのオンオフを選択できます。
	⑩［フォントサイズ］	ポップアップ内に表示する詳細テキストのフォントサイズをスライダーを操作し13段階で調整できます。
	⑪［フォントカラー］	ポップアップ内で表示する詳細テキストのフォントカラーを自由に選択できます。
	⑫［行間］	ポップアップ内で表示する詳細テキストを行間を「1」「1.15」「1.5」「2」の4種類の中から選択できます。
	⑬［詳細テキストを入力］	ポップアップ内で表示する詳細テキストを入力します。
	⑭［テキストの配置］	ポップアップ内で表示する詳細テキストの配置を「左寄せ」「中央寄せ」「右寄せ」の3種類の中から選択できます。
ボタン	⑮［ボタンテキスト］	ポップアップ内に表示するボタンのオンオフを選択できます。
	⑯［フォントサイズ］	ポップアップ内に表示するボタンのフォントサイズをスライダーを操作し13段階で調整できます。
	⑰［フォントカラー］	ポップアップ内に表示するボタンのフォントカラーを自由に選択できます。
	⑱［ボタンテキストを入力］	ポップアップ内に表示するボタン名を入力します。
	⑲［ボタン背景最大幅］	ポップアップの横幅を、50%（短い）から100%（長い）の間で、スライダーを操作もしくは数字を入力して1%きざみで調整できます。
	⑳［ボタンの背景］	ポップアップ内に表示するボタンの背景カラーを自由に選択できます。
	㉑［角の丸み］	ポップアップに表示するボタンの角の丸みを3種類の中から選択できます。
㉒［画像の代替テキスト（alt属性）］		ポップアップの画像が表示されなかったときに代替として表示される「alt属性」のテキストを設定できます。 詳しくは「ポップアップの画像の代替テキスト（alt属性）を設定する」をご確認ください。
㉓［全体デザインに戻る］		［スタイル詳細を開く］パネルを閉じます。

 

スタイル詳細画面（追従バナー）

 

配置

［表示位置］

ポップアップの表示位置を「右下」「左下」の2種類の中から選択できます。 ※ポップアップ種別で［追従バナー］を選択している場合のみ表示されます。

※その他の編集機能はのポップアップ種別が［追従バー］の場合と同様です。

 

5. 編集内容を保存する

💡［テンプレートから作成］で作成したウィジェットはマイウィジェットとして保存されます。

 

すべての編集が完了したら［編集内容を保存］をクリックします。

 

「テンプレートをマイウィジェットとして保存」のダイアログが表示されるので、ウィジェット名を入力し［マイウィジェットに保存］をクリックします。

 

「マイウィジェット一覧」に移動し作成したウィジェットが追加されていることを確認できます。