ドラッグ＆ドロップエディタのコードを編集する際のテクニック集

General Questions 更新日 9月 15, 2021

ドラッグ＆ドロップエディタにおいてHTMLコードを部分的に編集し、デザインの変更などを行う方法を解説しています。

「該当するブロックのコードを参照する」方法は以下のFAQにて確認しておいて下さい。

FAQ：ドラッグ＆ドロップエディタで作成したメールのHTMLコードを参照できますか？

 

目次

1.  リンクの色を変更する方法/リンクの下線を表示しない方法/アンカーリンクを付け加える方法
2.  フォントの色を変更する方法/リンクの色を変更する方法
3.  複数の画像を並行設置する方法 
4.  カスタムHTMLを利用する際に知っておくべきこと
5.  HTMLを使ってメール内にコンタクトの名前を表示させる方法
6.  自分で編集した項目名をメール編集中に使う方法
7.  フィールド項目に登録されているURLを利用して、項目名にハイパーリンクを挿入させる方法
8.  受信者ごとに異なる内容が表示されるメールを作成する方法
9.  箇条書きテキストの色の変更方法
10.  メールの編集がうまくいかない場合
11.  行間の幅を調整する方法
12.  テキストを上付き、下付きに変更する方法
13.  特別な文字やシンボルを使用する方法
14.  段落ごとに文字列を「右に揃える」「左に揃える」「中央に揃える」方法

 

リンクの色を変更する方法/リンクの下線を表示しない方法/アンカーリンクを付け加える方法

1. アップデートしたいURLを入力してください。
2. HTMLコードの<a href>タグをフォントタグで囲むか、タグのスタイル属性を変更してください。 色(＃FF0000=red)、変更を行うと以下のようになります。
   <font color=red><a href="xyz">mycompanyname.com</a></font>

   <a href>タグの中にスタイル属性を挿入する場合、以下のようになります

   <a href="xyz" style="color:#FF0000">mycompanyname.com</a>
3. 保存、もしくは更新をクリック

リンクの下線を表示しない方法

1. 該当するリンクが含まれるブロックのHTMLコードを参照する。
2. 先程の入力したURLが表示されているテキストを探してください。 以下例となります, https://www.benchmarkemail.com/ExtPricing.
   <a href="https://www.benchmarkemail.com/ExtPricing">Benchmark Email Pricing Plans</a>
3. “text-decoration:none”をタグの最後に加えてください。 下記のようになります。
   <a href="https://www.benchmarkemail.com/ExtPricing" style="text-decoration:none!important;">Benchmark Email Pricing Plans</a>
4. 保存＆閉じるをクリックします。

アンカーリンクを付け加える方法

1. アンカーを設置し表示したいブロックのHTMLコードを参照します。
2. Name要素をアンカーとして付け加えましょう。以下は一例です。
   <a name="disc">This Week's Discounts</a>
3. 保存＆閉じるをクリックします。
4. ブロック編集が終了したら保存をクリックします。
5. 次に、アンカーリンクを設置したいブロックのHTMLコードを参照します。
6. タグに＃と先ほど設定した名前を加えて、以下例のようにアンカーリンクを作成します：
   <a href="#disc">discounts</a>
7. 保存＆閉じるをクリック。
8. ブロックの編集が終了したら保存をクリック。
9. すべての編集が終了したら画面上部の更新ボタンをクリックして保存してください。プレビュー画面を表示し、挿入したコードが機能しているのか確認を行ってください。

フォントの色を変更する方法/リンクの色を変更する方法

 

フォントの色を変更する方法

1. 色を変更するブロックのHTMLコードを参照します。
2. 変更を行う文章を探し、希望の色番号を入力してください。

以下の例では、「メール編集機能について」という文章の色を#fc6462と指定します。

 

リンクの色を変更する方法

1. ブロックのHTMLコードを参照します。
2. 編集を行いたいURLを探してください。
3. タグ、色コードが入力されているスタイル属性に変更を加えましょう。 例：以下サンプル内の色コード（FF0000、red）を希望する色の名前に差し替える、または16進コードを入力してください。
   mycompanyname.com

   上記のコードをスタイルタグで囲います：

   <font color=red><a href="xyz" style="color:#FF0000">mycompanyname.com</a></font>

   もしくは以下のように挿入してください：

   <a href="xyz"><font color=red>mycompanyname.com</font></a>
4. 「保存＆閉じる」をクリックします。
5. ブロックの「保存」をクリックします。

複数の画像を並行設置する方法

1. 編集するテキストブロックをクリックし、編集可能な状態にします。
2. 画面上部の編集メニューから、HTMLコード確認アイコンを選択してください。
3. 下記のコードをコピーし、すでに表示されているコードに上書きしてください。 （この作業はブロック内のコンテンツに上書きされます。）
   <table width="100%"> <tr> <td> image 1 </td> <td> image 2 </td> <td> image 3 </td> </tr> </table>

   <td> image # </td>のコードが複数あることからお分かりいただけるかもしれませんが、これらのコードは3つの画像を挿入する枠の役割をします。 目的によって数を増やす、減らすを行ってください。

4. 「保存＆閉じる」ボタンをクリックします。
5. 以下のようにimage1、image2、image3とセクションが用意されます。
   
6. Image1をクリックしハイライトしてください。
7. 編集オプションより画像挿入アイコンをクリックします。
8. 画像ギャラリーより任意の画像を選択してください。
9. 挿入をクリックします。
10. 必要に応じて画像のサイズを変更してください。(テンプレート内の最大幅は600となっております)
11. image 2 とimage 3も上記の6から11までのステップを繰り返し行い、画像を挿入してください。
12. 画像をそれぞれ選択し、中央寄せボタンを押してください。
13. 保存をクリックして完了です。

カスタムHTMLを利用する際に知っておくべきこと

1. コンテンツを挿入する場合、Spaceタグで行を空けるのではなくTableタグを利用してください。
2. メーラー、メールソフトではインライン記述以外のCSSが無効となってしまいます。このため、Benchmark Emailではメール内のCSSに関してはインラインのみのコーディングを行っていただいております。
3. MSワードなどの外部ソースからのテキスト、画像の参照は行わなず、直接ペーストも行わないでください。 代わりにNotepadへペーストし、そこから編集画面に入力してください。
4. メールの一番良いバランスはテキスト60%、画像40%となります。
5. 不必要なタグの重複は削除してください。
6. スクリプト言語の書き込みはやめてください。
7. <p>タグの使用は控え、代替として<br>を使ってレイアウトの調整を行ってください。
8. 迷惑メールと判断されるリスクが高いため、背景に画像を使用するのは控えてください。
9. 600×800内でメールのデザインは行ってください。

HTMLを使ってメール内にコンタクトの名前を表示させる方法

デフォルトのパーソナライズ機能やグリーティング機能を使うのが難しい、条件に合わないなどといった場合はHTMLを使いましょう。

1. 編集を始めるブロックを選択し、グリーティング用の言葉や個別の挨拶を入力してください。
2. 画面上部の編集メニューから、HTMLボタンを選択してください。
3. グリーティングテキストを選択します。
4. 次のコードを貼り付けしてください： [contact_attribute:firstname]
5. 「保存＆閉じる」ボタンをクリックします。
6. このコードは呼び起こすデータ（Firstname）などの情報がない限り表示されません。
7. コード[contact_attribute:firstname]の後ろにコンマ,を入力してください。
8. あとはほかのテキストを入力して完了となります。
9. 「保存」ボタンをクリックします。

自分で編集した項目名をメール編集に使う方法

パーソナライズ機能以外ではHTMLを編集することで代替が可能となります：

1. 編集を行いたいブロックを選択します。
2. すでに入力されているデフォルトのテキストを削除します。
3. 任意のテキストを入力してください。
4. ブロックのHTMLコードを参照して下さい。
5. テキストの前にカーソルを合わせ、表示したいコンタクト情報を入力してください。
6. テキストから一文字分離し、次のコードをコピー＆ペーストしてください： [contact_attribute:FIELDLABEL]
7. [contact_attribute:FIELDLABEL]内のFIEDLLABELを任意のフィールド項目名に変更してください。 （法人名、役職名、携帯電話など）
8. 「保存＆閉じる」ボタンをクリックします。
9. このコードは受信先で呼び起こすデータ（Firstname）などの情報がない限り表示されません。
10. 先程のコード[contact_attribute:firstname]の後ろにコンマ,を入力し一文字間をあけてください。
11. 残りの文章を入力してください。
12. 「保存」ボタンをクリックします。

フィールド項目に登録されているURLを利用して、項目名にハイパーリンクを挿入させる方法

1. フィールド項目を挿入するブロックを選択します。
2. テキストを入力してください。
3. ブロックのHTMLコードを参照して下さい。
4. 先程入力したテキスト後ろにカーソルを合わせて下さい。
5. 最後の文字から一字開けて、以下のコードを挿入してください。(赤字に該当するフィールド項目名を入力してください):
   <a href="[contact_attribute:field name]" target="_blank"> [contact_attribute:field name] </a>
6. 最初のfieldnameをURLが入力されているフィールド項目名に変更してください。
7. 次のfieldnameをテキストとして表示される内容が登録されているフィールド項目名に変更してください。

受信者ごとに異なる内容が表示されるメールを作成する方法

同じリスト内の購読者に異なった内容のメールを送信したい場合は、条件別コンテンツ表示タグを利用することで可能になります。例えば、関東にお住いの方には東京のイベント開催告知、関西の方には他の大阪にあるイベント会場の告知を同じメールで知らせることができます。

以下のコードをコード編集画面にコピー＆ペーストします。各コードの下に説明を記載しておりますので、併せてご確認ください。

[if:項目名=項目内容] 受信者に登録されている内容が一致しているかどうかを判断します。 一致している場合、このタグ以下に入力されたコンテンツを表示します。

[elseif:項目名=項目内容] 上記のタグ以外の情報を指定し、別のコンテンツを表示します。

[else] どの条件も満たしていない場合に表示するコンテンツとなります。

[endif] 条件別のコンテンツ表示を終了します。

*上記のすべてのタグを入力することで、受信者ごとに異なる内容が表示されるようになります。

作成方法については以下をご覧ください。 ここではコンタクト情報のフィールドに都道府県の「東京」を登録されている受信者へのメール配信となります。

1. メール編集画面にて、条件別コンテンツを作成するブロックを選択します。
2. 右上のメニューからHTMLコード確認アイコンをクリックします。
3. ボックス内に、[if:都道府県=東京]と入力します。
4. 次の行に東京にお住まいの人向けのメッセージを入力します。 例：「東京国際フォーラムでセミナーを開催します。」
5. 次の行に以下のタグを入力します。 [endif]

以下が実際の入力画面となります：

次に、東京にお住いの方向けと大阪に住んでいる人にそれぞれ異なったメッセージを送ってみましょう。

1. メール編集画面にて、条件別コンテンツを作成するブロックを選択します。
2. 右上のメニューからHTMLコード確認アイコンをクリックします。
3. 次のタグを加えてください。 [if:都道府県=東京]
4. 下の行に「東京国際フォーラムでセミナーを開催します。」と入力します。
5. 次の段には [elseif:都道府県=大阪]
6. 下に「大阪万博公園でフリーマーケットをやります。」
7. 最後に[endif]と入力して終了です。

以下が実際に入力した画面となります：

次に東京在住の方と、それ以外の方へのメッセージを配信します。以下のように東京以外の方にはウェビナーの告知が届くように設定できます。

1. メール編集画面にて、条件別コンテンツを作成するブロックを選択します。
2. 右上のメニューからHTMLコード確認アイコンをクリックします。
3. 以下のタグを加えてください。 [if:都道府県=東京]
4. 下の行に「東京国際フォーラムでセミナーを開催します。」と入力します。
5. 次に[else]と入力してください。
6. 「Ustreamでウェビナーを実施します。」と入力します。
7. 最後に[endif]と入力して終了です。

以下が実際に入力した画面となります：

最後に東京と大阪、それ以外の県にお住いの方へのそれぞれ異なったメッセージを送る設定をしてみましょう。

1. メールビルダー画面において、コンテンツを表示するブロックを選択します。
2. 以下のタグを加えてください。 [if:都道府県=東京]
3. 下の行に「東京国際フォーラムでセミナーを開催します。」と入力します。
4. 次の段には [elseif:都道府県=大阪]
5. 下に「大阪万博公園でフリーマーケットをやります。」
6. 次に[else]と入力してください。
7. 「今回はイベントに関する情報はございません。」
8. 最後に[endif]と入力して終了です。

以下が実際に入力した画面となります：

箇条書きテキストの色の変更方法

1. ブロックを選択します。
2. 箇条書きに変更するテキストを入力します。
3. テキストをクリックしてハイライトします。
4. ツールバーより「箇条書き」をクリックします。
5. ブロックのHTMLコードを取得します。
6. <liのタグにカーソルを合わせ、次のコードをコピーペーストしてください: style="color:color# or name;"
7. style="color:color# or name;"の箇所に、色番号もしくは色名を入力してください。
8. 6~7をそれぞれの段落ごとに繰り返してください。
9. 「保存＆閉じる」ボタンをクリックします。

メールの編集がうまくいかない場合

 

勝手に改行されている、余分なスペースがテキストの間に入ってしまう… ワードなど、外部のソースからコピー＆ペーストを行っていることが原因となります。 MSワードからコピー＆ペーストをしたことがない、正しいやり方が分からない場合は以下のFAQをご参照ください。

FAQ：Benchmark Emailへコピー＆ペーストすると、テキストの書式が変わってしまうのはなぜですか？

他のページからコピーしたテキストを正しくペーストする方法をご案内しております。

HTMLコーディングで修正を行う場合は、以下の手順となります。

1. テキストの調整を行いたいブロックのHTMLコード確認アイコンをクリックします。
2. 段落の間に余計なスペースができてしまうことがあるので編集していきます。
3. ワードからペーストした文章には、<p>タグが付きます。
4. 各行に記述されている<p></p>タグを<br/>に置き換えます。2文字分のスペースが欲しい場合は、<br /><br />に置き換えます。 
   

行間の幅を調整する方法

この作業はドラッグ＆ドロップエディタ上でも可能です。

FAQ：フォント・文字サイズ・行間を調整する方法

1. 調整したいテキストブロックのコードを参照します。
2. “Line-Height”コードを確認します。もし存在しない場合は直接入力してください。
   LINE-HEIGHT:20px; FONT-FAMILY:Arial,Helvetica,sans-serif">
3. Line-Heightの値を変更し、行間を調整します。
4. 「保存＆閉じる」ボタンをクリックして完了です。

テキストを上付き、下付きに変更する方法

文字を基準よりも上、もしくは下に表示させるには、SUP、またはSUBボタンをご利用ください。

 

メール内の文字を上付きに変更する方法

1. 変更したい文字のあるブロックのHTMLコードを参照します。
2. ポップアップ画面にHTMLコードが表示されます。上付き文字に変更したいテキストを探します。
3. 文字の前後を<sup>タグで囲ってください。 （^テキスト） 例：商標を表示になる場合は ^&#8482;とご入力いただくと™（商標マーク）が本文に表示されます。
4. 「保存＆閉じる」をクリック.
5. エディタ上で反映されているかご確認ください。

段落ごとに文字列を「右に揃える」「左に揃える」「中央に揃える」方法