何かお困りですか?よくある質問とその回答をまとめました。

サポートページ aero-right ドラッグ&ドロップエディタのコードを編集する際のテクニック集

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

テンプレート&メールエディタ 更新日 9月 19, 2019

ドラッグ&ドロップエディタにおいて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. すべての編集が終了したら画面上部の更新ボタンをクリックして保存してください。プレビュー画面を表示し、挿入したコードが機能しているのか確認を行ってください。
Top
フォントの色を変更する方法/リンクの色を変更する方法

 

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

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

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

<span style="color:#fc6462;">メール編集機能について</span>

 

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

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

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

    <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. ブロックの「保存」をクリック
Top
複数の画像を並行設置する方法
  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. 上記の7から11までのステップを繰り返し行い、画像を挿入してください
  12. 画像をそれぞれ選択し、中央寄せボタンを押してください
  13. 保存をクリック
Top
カスタムHTMLを利用する際に知っておくべきこと
  1. コンテンツを挿入する場合、Spaceタグで行を空けるのではなくTableタグを利用してください。
  2. メーラー、メールソフトではインライン記述以外のCSSが無効となってしまいます。このため、Benchmark Emailではメール内のCSSに関してはインラインのみのコーディングを行っていただいております。
  3. MSワードなどの外部ソースからのテキスト、画像の参照は行わなず、直接ペーストも行わないでください。 代わりにNotepadへペーストし、そこから編集画面に入力してください。
  4. メールの一番良いバランスはテキスト60%、画像40%となります。
  5. 不必要なタグの重複は削除してください。
  6. スクリプト言語の書き込みはやめてください。
  7. <p>タグの使用は控え、代替として<br>を使ってレイアウトの調整を行ってください。
  8. 迷惑メールと判断されるリスクが高いため、背景に画像を使用するのは控えてください。
  9. 600×800内でメールのデザインは行ってください。
Top
HTMLを使ってメール内にコンタクトの名前を表示させる方法

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

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

パーソナライズ機能以外では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. 保存をクリック
Top
フィールド項目に登録されている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をテキストとして表示される内容が登録されているフィールド項目名に変更してください.
Top
受信者ごとに異なる内容が表示されるメールの作成方法

内容によっては購読者によって違うものが表示されると、一つのメールを用意するだけでいいので便利です。 以下に記す、条件別コンテンツ表示タグを利用することによって可能となります

 

例えば、関東にお住いの方に対して東京でイベントを開催することを告知するメールと、関西の方へまた別の会場の告知を同じメールで知らせることができます。

 

下記のコードを編集画面にペーストしてください

:

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

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

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

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

*これらすべてのタグを入力して初めて機能します

以下は条件別コンテンツの作成方法となります。 ここではコンタクト情報として都道府県に「東京都」と登録されている受信者へのメール配信となります.

  1. ステップ4メールビルダー画面、条件別コンテンツを作成するブロックを選択します
  2. [if:都道府県=東京]と入力してください
  3. 次の行にメッセージを入力してください。 例:「東京国際フォーラムでセミナーを開催します」
  4. さらに次の行で以下のタグを入力してください[endif]

実際の入力画面となります:

 

先程の例に加えて、大阪の人にもメッセージを送ってみましょう。以下をご参照くださいませ:

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

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

 

次に東京在住の方と、それ以外の方へのメッセージを配信します。 以下ご参照ください:

  1. メールビルダー画面において、コンテンツを表示するブロックを選択します
  2. 以下のタグを加えてください。 [if:都道府県=東京]
  3. 下の行に「東京国際フォーラムでセミナーを開催します」と入力します
  4. 次に[else]と入力してください
  5. 「Ustreamでウェビナーを実施します」と入力します
  6. 最後に[endif]と入力して終了です

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

さらに東京、大阪以外の方へのメッセージを付け加えてみましょう:

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

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

これで東京在住の方にはセミナー情報が、大阪在住の方にはフリーマーケット、それ以外の都道府県に在住している人にはイベント情報がない旨のメッセージをそれぞれ表示させることが可能になりました。

 

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

 

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

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

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

 

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

:

  1. テキストの調整を行うブロックの編集アイコンをクリック。 例では段落の間に余計なスペースができてしまっています:
  2. 対象ブロックのHTMLコードを取得
  3. ワードからペーストした文章にはこのように<p>タグが付きます:

    各行に記述されている<p></p>タグを<br/>に置換してください:

    これで余分なスペースがなくなりました:

Top
行間の幅を調整する方法

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

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

  1. 調整したいテキストブロックのコードを参照する。
  2. “Line-Height”コードを確認する。もし存在しない場合は直接入力してください。
    LINE-HEIGHT:20px; FONT-FAMILY:Arial,Helvetica,sans-serif">
  3. Line-Heightの値を変更し、行間を調整する。
  4. 保存&閉じるをクリックする。
Top
テキストを上付き、下付きに変更する方法

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

 

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

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

 

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

  1. 変更したい文字のあるブロックのHTMLコードを参照します。
  2. ポップアップ画面にHTMLコードが表示されます。下付き文字に変更したいテキストを探します。
  3. 文字の前後を<sub>タグで囲ってください。 (<sub>テキスト</sub>) 例:商標を表示になる場合は同じく <sub>&#8482;</sub>と入力すると(商標マーク)が本文に表示されます。
  4. 保存&閉じる」をクリック
  5. エディタ上で反映されているかご確認ください。
プレビュー、テストメールの送信でも変更が正常に表示されているか確認を行いましょう。
特別な文字やシンボルを使用する方法

メールマガジンに特別な文字やシンボルを使用する場合は、HTMLナンバーもしくはネームコードを使用する必要があります。

なお配信したメールやレポートにエラーが起こる可能性がございますので、ご使用は推奨いたしません。

  1. シンボルを挿入したいテキストブロックのHTMLコードを参照します。
  2. コード参照のポップアップ画面に、使用したいHTMLナンバーもしくはネームコードを置き換えて下さい。頻繁に使用される特別な文字例 :
    シンボル HTMLナンバー HTML ネーム
    © © ©
    ® ® ®
    £ £ £
    ¢ ¢ ¢

    HTMLナンバーやネームはこちらのサイトで参照頂けます。 http://www.webmonkey.com/2010/02/special_characters/

  3. 「保存&閉じる」をクリック
  4. エディタ上で反映されているかご確認ください。
これでプレビューもしくはテストメールを送信してシンボルが正しく表示されているかの確認が出来ます。
Top
段落ごとに文字列を「右に揃える」「左に揃える」「中央に揃える」方法
  1. 編集したいテキストブロックをクリックし、HTMLの取得を行います、
  2. 表示されるHTMLコードをNotepad、Textpad等のテキスト編集ソフトにコピー&ペーストしてください
  3. <br/ >、 を<p> ~ </p>もしくは
    <div> ~ </div>

    タグに置き換えてください。

    以下スクリーンショットは編集を加えていない状態のコードです

    タグを<p> ~ </p> に置き換えている場合、以下のスクリーンショットを参照してください

    タグを <div> ~ </div> に置き換えた場合、以下のスクリーンショットを参照してください

  4. 変更したコードをHTMLコピー&ペースト画面に貼り付けて、保存&閉じるボタンをクリック

これで各段落、文章ごとに「右に揃える」「左に揃える」「中央に揃える」を指定できるようになります。以下の手順に従って作業を進めてください:

  1. 設定を行いたい段落にカーソルを合わせてください
  2. ツールバーより左に揃える, 右に揃える, 中央に揃える両端に揃えるを選択してください
  3. ブロックの「保存」をクリックしてください

これを段落別に行うことで各段落の設定変更が可能です

Top
>>「メール作成:編集操作」のまとめページに戻る
FAQの情報は役に立ちましたか?
0 0

Benchmarkから業界トレンド&最新情報をお届けします

ご登録頂きありがとうございます!

登録を完了させるには、認証メールのご確認をお願いします。

質問の回答が見つかりませんか?

サポートへお問い合わせ'

お問い合わせ履歴を閲覧する