ドラッグ&ドロップエディタでできること

メール配信

※本FAQは、新規メール作成時のテンプレートにて「HTML(ドラッグ&ドロップ)」を選択されたお客様向けです。

ドラッグ&ドロップエディタとは、HTMLエディタを使用し、コンテンツをドラッグ&ドロップすることにより、ご自身でHTLMコードを記述せず簡単にHTMLメールが作成できるエディタです。

1.各コンテンツについて
 ①テキスト
 ②画像
 ③ボタン
 ④ディバイダ
 ⑤ソーシャル
 ⑥HTML

2.構造について

3.ボディについて
 ①コンテンツ領域の幅
 ②Content area alignment
 ③背景色
 ④コンテンツ領域の背景色


1.各コンテンツについて

①テキスト

文章を入力できるコンテンツです。

フォントや文字サイズ、文字色などを変更することも可能です。

URLを記載する場合は「リンクの挿入/編集」よりリンク化の設定をする必要があります。

※テキスト内では半角の<>を利用しないようにお願いいたします。
 タグとみなされ<>で囲った文字が表示されなくなってしまいます。

▼ドラッグ&ドロップエディタを使ってリンクを挿入する方法
https://faq.list-finder.jp/faq/3740

配信停止の差し込み文字を挿入する場合は、差し込み文字をリンクに設定してください。
▼ドラッグ&ドロップエディタを使って差し込み文字を挿入する方法
https://faq.list-finder.jp/faq/3759

②画像

画像を挿入するコンテンツです。

挿入したい画像は、メール作成画面ではなく、事前にListFinder上にアップロードしておく必要があります。
画像サイズは大きすぎると受信側で正常に表示されない、またメールの受信自体ができない可能性がありますので、ファイルサイズは合計2MB以内をお勧めします。

▼ドラッグ&ドロップエディタを使って画像を挿入する方法
https://faq.list-finder.jp/faq/3750

画像をクリックすると、画面右側にコンテンツのプロパティが表示されます。

・画像の自動調整の使い方
  ONの場合は、受信環境によって最適なサイズになるように調整されます。
  サイズを変更したい場合はOFFにし、お好みの大きさに調整してください

・代替テキストの使い方
  受信側のメーラー設定などにより画像が表示されなかった場合に
  代わりにテキストを表示することができます。
  未設定の場合は自動で「image」と表示されます。

・画像リンクの使い方
  受信者が画像をクリックすると、入力したURLへ遷移させる
  画像リンクが作成できます。
  クリックURLなどへの変換も可能です。
  ※クリックURL変換後はURLが {!URL●} と差込文字に代わります。

③ボタン

リンクを目立たせるためのボタンが作成できるコンテンツです。

ボタンをクリックすると、画面右側にコンテンツのプロパティが表示されます。

・リンクの設定方法
  アクションのURL入力欄に、遷移させたいURLを記載してください。
  クリックURLなどへの変換も可能です。
  ※クリックURL変換後はURLが {!URL●} と差込文字に代わります。

・ボタンの変更方法
  ボタン設定にて、ボタンの背景色、テキストの色、ボタンの形などが
  細かく調整できます。

④ディバイダ

区切り線を挿入することができるコンテンツです。

ディバイダをクリックすると、画面右側にコンテンツのプロパティが表示されます。

ディバイダの太さや色、点線などに変更することもできます。

⑤ソーシャル

FacebookやTwitterなど、各SNSへのリンクを作成することができるコンテンツです。

アイコンをクリックすると、画面右側にコンテンツのプロパティが表示されます。

・アイコンコレクションを選択
  アイコンの形や色を規定のものから選ぶことができます。

・各SNSへのリンクの設定方法
  各アイコンのURL入力欄に、遷移させたいURLを記載してください。
  クリックURLなどへの変換も可能です。
  ※クリックURL変換後はURLが {!URL●} と差込文字に代わります。

・アイコンを増やしたい場合
  新しいアイコンを追加より表示させるアイコンを増やすことができます。

・アイコンの順番を変更したい場合
  アイコン左側の Ξ を上下にドラッグ&ドロップすることで変更可能です。

⑥HTML

ご自身で記述したHTMLコードを追加することができるコンテンツです。

HTMLブロックをクリックすると、画面右側にコンテンツのプロパティが表示されます。

赤枠内にHTMLコードを記述してください。
※コードの記述方法のご案内や動作保証はサポート対象外となります。
 テスト配信を実施し、正しく動作しているかご確認ください。


2.構造について

左側に画像、右側にテキストなど、横並びに区切ってコンテンツを作成したい場合に使用します。

行の左右余白あたり(画像の白丸)をクリックすると、画面右側に構造のプロパティが表示されます。

左右の比率や、背景色など細かく設定することが可能です。

構造を表示をクリックすると、白点線にて構造の様子を確認することができます。


3.ボディについて

メール全体に対する設定を行うメニューです。

メールの横幅や、背景色、コンテンツの左寄せ、中央寄せなどを設定することが可能です。

①コンテンツ領域の幅

 メールの横幅を調整することが可能です。

②Content area alignment

 メール全体を左寄せ、中央寄せどちらかに調整することが可能です。
 ※コンテンツ内の文章や画像の位置を変えたい場合は、各コンテンツにて調整する必要があります。

③背景色

 メール全体の背景色を変更することができます。

④コンテンツ領域の背景色

 コンテンツ領域全体の背景色を変更することができます。
 ※コンテンツ別に背景色を変えたい場合は、各コンテンツにて調整する必要があります。