デザインを作成する
ポップアップのデザイン作成方法をご紹介します。
選択したテンプレートに応じて設定する項目が異なるため、必要な項目をご覧ください。
また、テンプレートでカスタムを選択した場合や、「カスタムでデザインする」をクリックした場合の作成手順については
こちら
をご覧ください。
デバイスを選択する
基本設定で選択したデバイスに応じ、切替のタブが表示されます。タブを切り替えることで、デバイス毎のポップアップのデザインをすることが可能です。
ポップアップ設定
ポップアップのサイズ（必須）
ポップアップの縦、横の大きさをピクセル単位で設定できます。数値を直接入力するか、ボタンをクリックし0.1刻みで調整することができます。
背景の色
ポップアップの背景色を設定できます。ボックスをクリックすると、カラーパレットが表示されるので任意の色を選択してください。
カラーパレット内で表示される赤枠部分をクリックすることで、RGB・HLS・カラーコードを指定することも可能です。
ポップアップの表示位置
ポップアップを表示する画面の位置を９つから選択できます。
画像設定
ポップアップに表示させる画像を設定します。画像が複数あるテンプレートを選択した場合、画像設定も複数表示されるので、全て設定してください。
画像選択（必須）
表示する画像のURLを入力してください。
画像サイズ（必須）
画像の大きさをピクセル単位で設定できます。数値を直接入力するか、ボタンをクリックし0.1刻みで調整することができます。
画像位置（必須）
表示する画像の位置をポップアップの上、左を起点としてピクセル単位で設定できます。数値を直接入力するか、ボタンをクリックし0.1刻みで調整することができます。
また、左揃え・中央揃え・右揃えのボタンをクリックすることで自動調整も可能です。
画像のリンク
画像をクリックしたときに遷移させるページのURLを入力してください。
テンプレートにより、表示されない場合があります。
テキスト設定
ポップアップに表示させるテキストを設定します。テキストが複数あるテンプレートを選択した場合、テキスト設定も複数表示されるので、全て設定してください。
テキストのサイズ（必須）
テキストを表示するエリアの大きさをピクセル単位で設定できます。数値を直接入力するか、ボタンをクリックし0.1刻みで調整することができます。
テキストを入力
表示させるテキストを入力します。エディタを使い、フォントや文字サイズなどを変更できます。
テキストにリンクを設定する場合は、テキスト入力後にリンクを設定する文字を選択し、リンクボタンをクリックしてください。
リンク挿入画面が表示されるので、リンクを入力します。
「新しいウィンドウで開く」にチェックが入っていると、リンクをクリックしたときに新しいウィンドウでページが開かれます。
「Use default protocol」にチェックが入っていると、リンクを指定するときにhttps://やhttp://が先頭にない場合、追加されます。
設定後、テキストをクリックすることでリンクの変更・解除ができます。
テキスト位置
表示するテキストの位置をポップアップの上、左を起点としてピクセル単位で設定できます。数値を直接入力するか、ボタンをクリックし0.1刻みで調整することができます。
また、左揃え・中央揃え・右揃えのボタンをクリックすることで自動調整も可能です。
ボタン設定
ポップアップに表示させるボタンを設定します。ボタンが複数あるテンプレートを選択した場合、ボタン設定も複数表示されるので、全て設定してください。
ボタンのサイズ（必須）
ボタンの大きさをピクセル単位で設定できます。数値を直接入力するか、ボタンをクリックし0.1刻みで調整することができます。
ボタンの色
ボタンの背景色を設定できます。ボックスをクリックすると、カラーパレットが表示されるので任意の色を選択ください。
テキストを入力
ボタンに表示させるテキストを入力します。フォントや文字サイズなどエディタを活用することで変更できます。
リンク設定
ボタンをクリックしたときの遷移先を設定できます。
ボタン位置
ボタンの位置をポップアップの上、左を起点としてピクセル単位で設定できます。数値を直接入力するか、ボタンをクリックし0.1刻みで調整することができます。
また、左揃え・中央揃え・右揃えのボタンをクリックすることで自動調整も可能です。
カスタマイズ
お客様ご自身でコーディングし、ポップアップを作成する方法です。
テンプレートでカスタムを選択した場合や、デザイン画面にて「カスタムでデザインする」をクリックした場合のデザイン作成方法です。
タブを切り替えることで、HTML/CSS/JavaScriptの切替ができます。
また、プレビューをクリックすることでコーディング中のデザインが確認できます。