サポートページ aero-right HTMLコード

メール全体またはブロックごとの背景を変更する方法

メール全体の背景色を変更する方法 背景カラーはメールエディタの 「全体のスタイル」タブで調整することが出来ます。 1. 作成中のメールのエディタを開きます。 2. 画面左上の全体のスタイルタブをクリックします。 3. カラー設定にて、メールのテーマ色を選択できます。 4. ブロックごとにカラー設定をする場合には、それぞれのブロック編集メニューを開いて設定します。 ブロックごとの背景色を変更する方法 1. 編集したいブロックにカーソルを合わせ、クリックします。 2. 画面左側の設定タブにて「背景の色」をクリックします。 3. 新たな色を選択します。 4. 「保存」ボタンをクリックして完了です。 変更を加えても色が変化しない場合は、背景画像が原因と考えられる為、背景画像の変更または削除をお試し下さい。 <トラブルシューティング> 複数のカラムを横並びに挿入した際、各カラムの背景色の範囲がバラバラになってしまい、空白ができてしまう事がございます。その場合は、セクション設定からカラム毎に背景色を選ぶことで空白をなくすことができます。 セクション設定を使ってカラムに出来た空白を埋める方法 1. 編集したいメールエディタを開きます。 2. メール本文内の右側にカーソルを合わせるとセクション機能が表示されます。 3. 鉛筆アイコンをクリックします。 4. セクション設定の画面下に表示される「左カラム」「中央カラム」「右カラム」より空白を埋めたいカラムをクリックします。 5. 背景色の下に表示される円をクリックし、背景色を選択して完了です。 ブロックごとに背景画像を設定する方法 注意:こちらの作業にはHTMLコーディングの知識が必要になります。 1. 使いたい画像のURLを取得します。画像ギャラリーにアップロード済の背景画像がある場合は、ギャラリーより画像URLを取得が可能です。 2. 背景画像を挿入したいブロックをクリックします。 3. 右上のメニューをクリックし、コード参照アイコン</>をクリックします。 4. ポップアップでHTMLコード参照ボックスが表示されます。 5. ボックス内の最初の行の<div style="line-height: 150%;" の後に以下のコードを追加してください。 style="background-image:url(画像ファイルのURL);" 6.「保存&閉じる」ボタンをクリックし、背景画像が正しく表示されているか確認します。 7.  左下の「保存&閉じる」ボタンをクリックしてブロックの編集を終了します。 ご注意:背景の画像はメーラーによっては正しく表示されないこともあります。 画像ギャラリーの画像URLを取得する方法については以下のFAQをご参照ください。 FAQ:画像ギャラリー内の画像URLを取得する方法とは? HTMLコードを参照する方法の詳細については、以下のFAQをご覧ください。 FAQ:どのようにHTMLコードを表示しますか?     >>「メール作成:編集操作」のまとめページに戻る

テンプレート&メールエディタ 4月 27, 2021

登録フォームの作り方は?

登録フォームは、ウェブサイトやブログ、ソーシャルメディアプラットフォームで購読者を効果的に獲得できる方法です。ここでは、登録フォームの種類や作成方法などをご説明します。 目次 登録フォームのタイプ 登録フォームの作成方法 スライド資料(PDF) 登録フォームのURLを取得する方法 WordPressプラグインで登録フォームを設置   登録フォームのタイプ ・埋込型フォーム(多項目):従来の埋込型フォームより自由なカスタマイズが可能 ・ポップアップフォーム:ページ閲覧中に表示させるポップアップ登録フォームの作成、カスタマイズ ・埋込型フォーム:フッターやサイドバーに埋め込めるシンプルな登録フォーム ・連携フォーム:プラグインを利用した登録フォーム 登録フォームの作成方法 1. 左のダッシュボードメニューより「コンタクトリスト」>「登録フォーム」を選択 2. ページ右側の「登録フォームの作成」をクリック 3. 登録フォームのタイプを選択し「次へ」をクリック 4. 登録フォームの作成・編集 ・登録フォームの各セクションにカーソルを合わせると、左側に緑色の「︙」が表示されますのでクリックします。フォーム項目の追加やデザインの変更などカスタマイズが可能です。 ・「登録ステップの設定」をクリックすると、オプトイン設定や登録確認メールの編集が可能です。詳しくはFAQをご覧ください。 FAQ:オプトイン完了 / オプトイン未完了とは何のことですか? ・「登録ステップの設定」の下に灰色で表示された「標準設定」ボタンをクリックすると、以下の項目の編集が可能になります。 幅変更:バーを右にスライドし、登録フォームの横幅を変更することができます。 背景色:クリックするとカラーパレットが表示されますのでお好きな色を選択します。また、CSSカラー(HEX値)を直接入力することも可能です。 ボーダー:pxの数字が大きいほど、外枠の幅は大きくなります。色の変更も可能です。0のままですと、外枠は無い状態です。 コーナー半径:登録フォームの四隅を丸くすることができます。pxの数字が大きいほど角は丸くなります。(以下の例:20px) reCAPTCHA:右にスライドすると、reCAPTCHAがオン(青色)に、灰色はオフの状態です。 Benchmarkリンク:リンクを登録フォームの下に表示することができます。スライドバーで切り替えが可能です。 デザイン例:フォントの色やサイズから登録ボタンの大きさまで簡単にカスタマイズできます。画像の挿入も可能です。 5. 編集完了後、「保存&出力」をクリック>フォーム出力画面が表示されるので、「次へ」をクリック 6. 登録フォームコードがポップアップで表示されるので、ドロップダウンでコードタイプを選択 7. 「コピー」をクリックして、ウェブサイトに掲載 各種登録フォームの作成方法の詳細は、以下のスライド資料(PDF)をご覧ください。 スライド資料(PDF):登録フォームの作成 注意点: ・無料アカウントご利用のお客様は1日に75件まで、有料アカウントのお客様は無制限に登録可能です。 ・ご契約プラン数を超えたフォームへの登録は、リスト内には保存されません。 ・旧インターフェースをお使いのお客様は、埋込型フォーム(多項目)はご利用になれません。 ・新インターフェースでは、「クラシックフォーム」は「埋込型フォーム(多項目)」に変更されました。クラシックフォームの全機能は「埋込型フォーム(多項目)」でご利用できます。 ・オプトインアラートを設定すると、登録のあったフォーム名がお知らせメールの件名に表示されます。 ・登録フォームからメールアドレスが追加されることによって、ご契約のリストプラン数を超過する可能性がある場合は、必ず事前にアップグレードをお願いします <登録フォーム設置後に、デザインや設定を変更した場合について> Javascriptコード(トラッキング付きも含む):自動的にウェブサイトの登録フォームに反映されますので、コードを更新する必要はありません。 HTMLコード(トラッキング付きも含む):自動的にウェブサイトの登録フォームには反映されません。変更後、再度登録フォームを保存し公開する必要があります。新しいHTMLコードをコピーし、ウェブサイトへ貼り付けを行なってください。この作業は、コードを変更・更新毎に行う必要があります。 登録フォームページのURLを取得する方法 「埋込型フォーム(多項目)」形式で作成したフォームは、独自ページとしてBenchmark Emailサーバー上に作成されます。 URLは下記の方法で取得することができます。 1. 埋込型フォーム(多項目)を作成 2. 「STEP2 デザイン」段階へ進む 3. 「公開用URL」をクリック 4. 「公開用URL」ウインドウ内の登録フォームURLをコピー *2018年9月より、中国本土で多数のGoogle関連サービスに制限がかかっており、一部地域にてreCaptcha機能がご利用頂けませんのでご注意ください。 WordPressプラグインで登録フォームを設置 WordPressで制作されたサイトをお持ちの場合は、WordPressプラグイン「Benchmark Email Lite」でサイトのデザインに合わせた登録フォームを簡単に作成・設置することができます。 詳細は以下のブログをご参照ください。 ブログ記事: WordPressプラグインでメルマガ配信する方法を図解してみた なお、登録フォームのデザインについての記事は以下をご覧ください。 ブログ記事:メルマガ登録フォームはWebサイトのデザインを壊さずに目立つのが大事   ご不明な点がございましたらこちらよりサポートチームにお問い合わせください。     >>「登録フォーム」のまとめページに戻る

登録フォーム 6月 1, 2021

購読者毎の情報をメールや件名に差し込む方法(パーソナライズ機能)

パーソナライズ機能を使ってメルマガの中でリストに保存された顧客情報を反映させることが可能です。名前、電話番号、カスタマーIDナンバーなど、どの項目でも顧客リストにある情報は差込することができます。 ※複数のリストへ配信する場合は、各リストでフィールド名を統一して設定したか確認してください。  例:「国」「国1」「Country」「国籍」「くに」など別の名前に設定していると、機能しません。 目次 ドラッグ&ドロップでの設定方法 件名をパーソナライズする方法 リンクURLにパーソナライズ情報を追加する方法 コンタクトを指定してプレビューを表示する方法 受信メールの宛先欄に「様」などの敬称を表示させる方法 ドラッグ&ドロップでの設定方法 1. ダッシュボード左のメニューより「メール」をクリックし、編集したいメールをクリックします。 2. メール作成チェックリストの中から、「本文&デザイン」または「編集」ボタンをクリックします。 3. パーソナライズ化したいテキストブロックを選択します。 4. 右上のメニューより、「挿入機能」をクリックし、ドロップダウンより「パーソナライズ」を選択します。 5. 配信先の顧客リストにある情報が個々に反映されます。(例:「名」を選択すると、個々の名前がテキストボックス内に表示されます。) 顧客リストのフィールド項目に保存されていれば、どのような情報であってもメールが配信される際に置き換えられます。 下記の例をご参照ください: [contact_attribute:姓]様,: 例えば田中太郎さんがメールを受け取った場合、"田中様"と表示されます。 連絡先の詳細が存在しない場合、フィールドは空白になります。 プレビューにて、連絡先の詳細が置き換えられているかどうかを確認することができます。 Benchmark Emailにおいて使えるタグ一覧は以下のFAQをご確認ください。 FAQ: BenchmarkEmailで利用可能なタグ一覧   件名をパーソナライズする方法 Benchmark Emailはメールの件名に受信者の名前を追加する事は推奨しておりません。迷惑メールは件名に個人情報を利用する事多いため、追加をする事で迷惑メール報告率の増加に繋がる可能性があります。 以上を踏まえた上で、パーソナライズを利用する場合は以下の手順に従ってください。 ・件名に直接、登録情報表示をしたい部分に[contact_attribute:項目名]と入力する。 ・項目名の部分に、リスト内の表示させたい項目名を入れる。 例)件名に名前を表示させたい場合 「[contact_attribute:last name] 様、新商品のご紹介です」と入力します。 *タグは下記のように日本語表記でも可能です。 名:[contact_attribute:名] 姓:[contact_attribute:姓] 田中太郎様がメールを受信した際には、件名には「田中様、新商品のご紹介です」と表記されます。 注意: ・メールアドレスの項目のみ日本語表記が使用できない仕様となっております。 メールアドレスの項目につきましては、こちらのタグをご使用くださいませ:[contact_attribute:email] ・タグの項目名を英語で入力する際は、項目名が「first name」や「Extra 3」など複数の単語で構成されている場合、必ず単語の間にスペースを入れてください。スペースを削除すると、タグが正常に反映されません。  正しい書き方:[contact_attribute:first name]   誤った書き方:[contact_attribute:firstname] ・タグ付けしたフィールド項目名がリストに登録されていない場合は、パーソナライズしたタグは反映されません。 ・プレビュー画面では件名部分は反映されません。 ・件名のパーソナライズの反映を確認するには、ご自身のメールアドレスに実際にメールを配信してください。テストメールでも、配信リストに登録されているアドレスに送信した場合は反映の確認が可能です。   リンクURLにパーソナライズ情報を追加する方法 登録したIDや会員番号を、URLの後ろに追加することが可能です。 1. エクセルファイル上で各読者に固有のIDを割り振る。(例:I列に個々のIDを入力) 2. リストをエクセルファイルとしてアップロードする際、そのIDを任意のフィールド項目(例:「その他1」)にアップロードします。詳細は以下のスライド資料(PDF)P11,12をご覧ください: 顧客リストインポート 3. リスト内のフィールド項目にIDが登録される。(例:abcde@benchmarkemail.comの登録情報の「その他1」に「12345」というIDが登録される。) 4. リンクを設置する際、URLの後ろに[contact_attribute:フィールド名(例:その他1)]と記載する。 ※フィールド項目名は任意で構わないが、「その他1」の部分に該当する項目名を記入する。(例:ウェブサイトURLにhttps://www.benchmarkemail.com/jp=[contact_attribute:その他1]と記入) 5. メールを配信すると、受信者によってクリックした際のURLが変わる。(例:abcde@benchmarkemail.comが受信したメールで、パーソナライズ設定したリンクをクリックすると、https://www.benchmarkemail.com/jp=12345に遷移する) 6. メール配信に複数のリストを使用する際は、必ずIDをアップロードするフィールドを統一し、フィールド名を編集する際はどのリストも同じ名前にするようにしてください。   コンタクトを指定してプレビューを表示する方法 1. パーソナライズタグを挿入したメールを作成します。 2. 編集画面下の「テスト」ボタンをクリックし、「コンタクトを指定して表示」を選択します。 3. 配信リスト内から任意のメールアドレスをひとつ入力し「プレビュー」をクリックします。 4. (3)で入力したメールアドレスに登録された情報が表示されます。(ただし件名に挿入したパーソナライズタグは確認することができません。) 注意:通常のプレビューでは、パーソナライズ情報はリスト内にあるコンタクトを無作為に選択されて表示されるようになっております。   受信メールの宛先欄に「様」などの敬称を表示させる方法 残念ながら受信メールの宛先欄に敬称を表示させる機能はございません。 しかし、コンタクトリストに「姓」または「名」部分が登録されている場合、受信メールの宛先欄に反映され、受信者の名前として表示される為、「姓」または「名」部分を利用し、敬称を登録する事で表示が可能になります。 例1:「姓」部分に「田中花子」と入力し、「名」の部分に「様」と入力 例2:「姓」部分に「田中様」と入力し、「名」の部分は空白 また、「姓」「名」ともに空白の場合、宛先欄にはアドレスのみが表示されます。   コンタクトリストの項目設定や編集方法は以下のFAQをご覧ください。 FAQ:コンタクトリストの情報を更新・編集する方法は? リストアップロードにおけるトラブルシューティングは以下のFAQをご覧ください。 FAQ:リストアップロードにおけるトラブルシューティング ご不明な点がございましたらこちらよりサポートへご連絡下さいませ。     >>「メール作成:編集操作」のまとめページに戻る

メール配信 6月 9, 2021

メールクライアントによってHTMLメールがうまく表示されないのはなぜですか?

メールクライアント(Gmail、YahooやOutlookなど)やブラウザは、Benchmark Emailからの配信メールのHTMLコードをそれぞれ異なった形で解読・表示します。 メールがどのように表示されるかは受信側のメールクライアントまたはブラウザによって異なり、コードに異常がある場合は、受信環境によっては正しく解読できないことがあります。 例えば、Gmailでは簡単に修正できる問題であっても、Outlookでは修正ができずにレイアウトが崩れることがあります。このような場合のメール表示トラブルはその特定の受信環境に限られることになります。 他の例として、一部のテキストがOutlook上では全て左寄りで表示されていたとしても、他のメールクライアントでは中央寄りに表示されることがあります。 このような問題が発生した場合、受信テスターをご利用頂き、さまざまなメールクライアントやブラウザでの表示を確認してから本配信を行うことをお勧め致します。詳細は以下のFAQをご覧ください。 FAQ:受信テスターの目的と作成方法について なお、メールクライアントによってはESP(メールサービスプロバイダー)が回避できない制限がある場合がございます。以下、受信環境に関わらずメールを同じように表示するためのポイントをご紹介します。 受信環境に左右されないメールを作成するポイント ドラッグ&ドロップエディタを使用する – ドラッグ&ドロップエディタのメールテンプレートは全てモバイル(スマホ)対応となっております。こちらのエディタを使用することで受信環境に最適なメールが表示されるようになります。 メール内にWebページ版リンクを設置する – 受信環境によってはメールが正しく表示されない場合があるため、Webページ版リンクを設置することにより同一の内容を閲覧して頂けます。設定はメール編集画面の「パーミッションリマインダーブロック」から可能です。Webページ版リンクの挿入方法についてはこちら 画像の背景色に気をつける – 画像の背景色はメールソフトが画像を表示できない場合にディスプレイされるため、メールが真っ白に表示されないように文章のフォントの色が目立つような背景色を選択しましょう。 画像の代替テキストを追加する – 画像の代替として表示されるテキスト「代替テキスト(Alt属性)」をメール本文に追加されることをお勧め致します。購読者によっては受信箱で画像をブロックまたは非表示設定している場合があるため、画像無しでもメールを読んで頂けるように代替テキストを追加しましょう。代替テキストを追加するには、画像をダブルクリックしボックスに入力するだけです。詳細はこちら 画像の配置 – 場合によって、画像が大きすぎてテキストを覆ってしまったり、圧縮されているように見えたりすることがあります。 画像の位置を調整し、サイズを縮小してフォーマットを綺麗にしてください。 ドラッグ&ドロップエディタをお使いの場合は、この作業は自動で行われますのでご安心ください。 テキストブロックに直接長いURLを挿入しない – スペースを含まない過度に長い文章(テキストブロックに直接追加した長いURLなど)は、文字列がメールの幅を超えてしまう可能性があります。途切れないようにするには、単語、文章または画像にリンクを挿入してください。ドラッグ&ドロップエディタのメニューバーにあるBenchmark Emailのリンクツールをご利用ください。リンクの挿入に関するFAQはこちら 以上を踏まえた上でメールを作成後、ご自身または身近な人にテストメールを送ってみましょう。複数のデバイスでメールを開いてデザインがどのように表示されるかを確認しましょう。最後に、各メールクライアントで確認されている表示エラーの一覧表を記載しておりますので、こちらも併せてご参照くださいませ。 各メールクライアントでの表示エラーリスト   メールクライアント HTML 対応 仕様 AOL 4.0、5.0 未対応 テキスト対応のみ フォーム認識不可 AOL 6.0、 7.0、8.0 対応 スタンダードHTML フォーム認識不可 外部スタイルシートへのリンク入りメール受信不可 AOL 9.0 一部対応 HTML画像&直リンク表示不可 フォーム認識不可 長いメールはzipファイルになる AOL Webメール 一部対応 XHTMLフル対応無し <br />タグ認識不可 アンカータグ対応無し -アンカーリンクをクリックするとアンカー箇所に飛ばず新しいウィンドウで受信箱が開く Apple Mail 対応 スタンダードHTML フォントタグ使用不可 - <span>タグを使用 アンカーリンクはダブルクリックが必要 El Capitan OSXではアンカーリンクが機能しない Compuserve 未対応 テキスト対応のみ Comcast Smartzone 対応 スタンダードHTML 背景画像はブロックされる アンカータグ対応無し -アンカーリンクをクリックするとアンカー箇所に飛ばず新しいウィンドウで受信箱が開く Comcast XFinity 一部対応 長いメールは途中で切れる - ウェブページバージョンで閲覧するよう誘導するか、メールを短くする必要あり アンカーリンク、目次リンクをクリックするとアンカー箇所に飛ばず新しいウィンドウで受信箱が開く Entourage (Mac) 対応 スタンダードHTML Entourage 2008 (Mac) 一部対応 背景画像がブロックされる場合がある フォーム、Flash、その他プラグイン、CSS float、CSSポジショニング、GIF対応 箇条点は画像に置き換えられる Earthlink 一部対応 テキストに下線が入る場合がある Eudora 3.1 未対応 テキスト対応のみ Eudora 4.0、4.2、4.3、 5.0 未対応 Internet Explorer使用の場合、スタンダードHTML仕様 デフォルトのEudora HTMLビューアでは正常に表示されない場合がある Gmail 一部対応 ブックマークアンカーのサポート無し 長いメールは途中で切れる - ウェブページバージョンで閲覧するよう誘導するか、メールを短くする必要あり メール内の電話番号がハイパーリンクになる Hotmail 一部対応 デフォルトで画像ブロック  <head>, <title>, <meta>, <body> タグ使用不可 - インラインスタイルの使用が必要 ホットリンクは4分後に無効になり、背景画像が削除される - メール認証設定をONにする必要あり CSS表示問題 テキストに下線が表示される場合あり <p>タグで囲んだテキストの行間に余分なスペースが入る - ブロックのコードビューで<p>タグを<div>ダグに変更するか、新規ブロックを作成し、コピー&貼り付けせずにテキストを入力する必要あり Juno 4.0、 5.0 対応 スタンダードHTML(大部分) CSS表示問題 Lotus Notes 4.6 未対応 フォント、リンクカラーが反映されない Lotus Notes 5.0 対応 スタンダードHTML(大部分) CSS表示問題 Novell GroupWise 5.5 対応 スタンダードHTML Office 365 一部対応 スタンダードHTML デフォルトで画像ブロック CSS表示問題 アンカーリンク、目次は機能しない 画像はライブラリに保存されたオリジナルファイルのサイズで表示されるため、表示問題を防ぐため画像のリサイズが必須 Outlook 97 一部対応 フォント、リンクカラーが反映されない 段落揃え未対応 Outlook 98、 2000 対応 スタンダードHTML CSS未対応 Outlook 98、 2001 (Mac) 未対応 リッチテキスト形式のみ Outlook 2003 一部対応 デフォルトでHTML画像のブロック Outlook 2007、2010 一部対応 フォーム、Flash、その他プラグイン、CSS float、CSSポジショニング、GIF未対応 箇条点は画像に置き換えられる 長いメールにはページ区切りが挿入され空白が表示される場合あり 画像ボーダー表示未対応 1920px x 1080px 以上の高画質ではテキストフォーマット対応、画像は未対応 画像キャプションスタイルはOutlookスタイルに上書きされる 縦1728 px以上の画像は切れる 段落の間、テキストの間に余分な空白が入る パソコン表示設定では画像がうまく表示されない場合がある 注: Microsoft ではOutlook 2007でのHTML認証ツールを提供しています。 Outlook 2007、2010 (Mac) 一部対応 アンカーリンク、目次は機能しない アニメGIF未対応 Outlook 2013、2016 一部対応 長いメールにはページ区切りが挿入され空白が表示される場合あり ブロックの最後のテキストが行頭文字の場合、中央が空欄スタイルの行頭文字が追加される - 行間文字を最後に置かないようにするか、</ul>タグでクローズする前に <div style="display:none;">&nbsp;</div> を追加 1920 x 1080 px以上の高画質ディスプレイではテキストサイズは調整されるが、画像サイズは調整されない パソコン表示設定によっては画像が正常に表示されない場合がある アニメGIF未対応 Outlook 2016 (Mac) 一部対応 アンカーリンク、目次機能は未対応 Outlook 365 一部対応 リンクに続くテキストのカラーを設定しない限りリンクはデフォルトで青になる - リンクは<span> タグで囲み、 <td> と <div>タグは異なるカラー設定が必要 アンカーリンク、目次リンクをクリックすると正しい箇所に飛ばずブランクのWebページが開く テキストは左寄せに設定していても、デフォルトで両端揃えになる 画像周りのスペースは設定が反映されない Outlook Web Access 一部対応 スタンダードHTML 画像はデフォルトでブロックされる アンカーリンク、目次は機能しない 画像はライブラリに保存されたオリジナルファイルのサイズで表示されるため、表示問題を防ぐため画像のリサイズが必須 Outlook Express- PC or Mac 対応 スタンダードHTML Pegasus Mail 3.1- Windows 対応 スタンダードHTML リンクのカラー設定は反映されない スマートフォン Android、 iPhone等 対応 電話番号がハイパーリンクとして表示される(クリックして電話が可能) メールフッターの住所を認識し、イベント日時をカレンダーに追加可能 Verizon 対応 スタンダードHTML アンカーリンク、目次は機能しない Yahoo! 対応 スタンダードHTML アンカーリンク、目次が機能しないブラウザがある - 機能しないブラウザではメールが閉じ受信箱ページへ戻る動作となる 長いメールは途中で切れる - ウェブページバージョンで閲覧するよう誘導するか、メールを短くする必要あり 参照元: StudioCloud ご不明な点はサポートまでご連絡ください。     >>「メール作成:設定管理」のまとめページに戻る

到達率 5月 23, 2021

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

ドラッグ&ドロップエディタにおいてHTMLコードを部分的に編集し、デザインの変更などを行う方法を解説しています。 「該当するブロックのコードを参照する」方法は以下のFAQにて確認しておいて下さい。 FAQ:ドラッグ&ドロップエディタで作成したメールのHTMLコードを参照できますか?   目次  リンクの色を変更する方法/リンクの下線を表示しない方法/アンカーリンクを付け加える方法  フォントの色を変更する方法/リンクの色を変更する方法  複数の画像を並行設置する方法   カスタムHTMLを利用する際に知っておくべきこと  HTMLを使ってメール内にコンタクトの名前を表示させる方法  自分で編集した項目名をメール編集中に使う方法  フィールド項目に登録されているURLを利用して、項目名にハイパーリンクを挿入させる方法  受信者ごとに異なる内容が表示されるメールの作成方法  箇条書きテキストの色の変更方法  メールの編集がうまくいかない場合  行間の幅を調整する方法  テキストを上付き、下付きに変更する方法  特別な文字やシンボルを使用する方法  段落ごとに文字列を「右に揃える」「左に揃える」「中央に揃える」方法   リンクの色を変更する方法/リンクの下線を表示しない方法/アンカーリンクを付け加える方法 リンクの色を変更する方法 アップデートしたいURLを入力してください。 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> 保存、もしくは更新をクリック リンクの下線を表示しない方法 該当するリンクが含まれるブロックのHTMLコードを参照する。 先程の入力したURLが表示されているテキストを探してください。 以下例となります, http://www.benchmarkemail.com/ExtPricing. <a href="http://www.benchmarkemail.com/ExtPricing">Benchmark Email Pricing Plans</a> "text-decoration:none"をタグの最後に加えてください。 下記のようになります。: <a href="http://www.benchmarkemail.com/ExtPricing" style="text-decoration:none!important;">Benchmark Email Pricing Plans</a> 保存&閉じるをクリックします アンカーリンクを付け加える方法 アンカーを設置し表示したいブロックのHTMLコードを参照します Name要素をアンカーとして付け加えましょう 以下例: <a name="disc">This Week's Discounts</a> 保存&閉じるをクリック ブロック編集が終了したら保存をクリック 次に、アンカーリンクを設置したいブロックのHTMLコードを参照します タグに#と先ほど設定した名前を加えて、以下例のようにアンカーリンクを作成します: <a href="#disc">discounts</a> 保存&閉じるをクリック. ブロックの編集が終了したら保存をクリック すべての編集が終了したら画面上部の更新ボタンをクリックして保存してください。プレビュー画面を表示し、挿入したコードが機能しているのか確認を行ってください。 Top フォントの色を変更する方法/リンクの色を変更する方法   フォントの色を変更する方法 色を変更するブロックのHTMLコードを参照します 変更を行う文章を探し、希望の色番号を入力してください 以下の例では、「メール編集機能について」という文章の色を#fc6462と指定します。 <span style="color:#fc6462;">メール編集機能について</span>   リンクの色を変更する方法 ブロックのHTMLコードを参照します 編集を行いたいURLを探してください タグ、色コードが入力されているスタイル属性に変更を加えましょう 例:以下サンプル内の色コード(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> 「保存&閉じる」をクリック ブロックの「保存」をクリック Top 複数の画像を並行設置する方法 編集するテキストブロックをクリックし、編集可能な状態にします。 画面上部の編集メニューから、HTMLボタンを選択してください 下記のコードをコピーし、すでに表示されているコードに上書きしてください。 (この作業はブロック内のコンテンツに上書きされます。): <table width="100%"> <tr> <td> image 1 </td> <td> image 2 </td> <td> image 3 </td> </tr> </table> <td> image # </td>のコードが複数あることからお分かりいただけるかもしれませんが、これらのコードは3つの画像を挿入する枠の役割をします。 目的によって数を増やす、減らすを行ってください。 保存&閉じるをクリック 以下のようにImage1、Image2、Image3とセクションが用意されます Image1をクリック しハイライトしてください 編集オプションより画像挿入アイコンをクリック 画像ギャラリーより、目的の画像を選択してください 挿入をクリック 必要に応じて画像のサイズを変更してください。(テンプレート内の最大幅は600となっております) 上記の7から11までのステップを繰り返し行い、画像を挿入してください 画像をそれぞれ選択し、中央寄せボタンを押してください 保存をクリック Top カスタムHTMLを利用する際に知っておくべきこと コンテンツを挿入する場合、Spaceタグで行を空けるのではなくTableタグを利用してください。 メーラー、メールソフトではインライン記述以外のCSSが無効となってしまいます。このため、Benchmark Emailではメール内のCSSに関してはインラインのみのコーディングを行っていただいております。 MSワードなどの外部ソースからのテキスト、画像の参照は行わなず、直接ペーストも行わないでください。 代わりにNotepadへペーストし、そこから編集画面に入力してください。 メールの一番良いバランスはテキスト60%、画像40%となります。 不必要なタグの重複は削除してください。 スクリプト言語の書き込みはやめてください。 <p>タグの使用は控え、代替として<br>を使ってレイアウトの調整を行ってください。 迷惑メールと判断されるリスクが高いため、背景に画像を使用するのは控えてください。 600x800内でメールのデザインは行ってください。 Top HTMLを使ってメール内にコンタクトの名前を表示させる方法 デフォルトのパーソナライズ機能やグリーティング機能を使うのが難しい、条件に合わないなどといった場合はHTMLを使いましょう。 編集を始めるブロックを選択し、グリーティング用の言葉や個別の挨拶を入力してください 画面上部の編集メニューから、HTMLボタンを選択してください グリーティングテキストを選択します 次のコードを貼り付けしてください: [contact_attribute:firstname] 保存&閉じるをクリック このコードは呼び起こすデータ(Firstname)などの情報がない限り表示されません コード[contact_attribute:firstname]の後ろにコンマ,を入力してください あとはほかのテキストを入力して完了となります 保存をクリック Top 自分で編集した項目名をメール編集に使う方法 パーソナライズ機能以外ではHTMLを編集することで代替が可能となります: 編集を行いたいブロックを選択します すでに入力されているデフォルトのテキストを削除します 任意のテキストを入力してください ブロックのHTMLコードを参照して下さい テキストの前にカーソルを合わせ、表示したいコンタクト情報を入力してください テキストから一文字分離し、次のコードをコピーペーストしてください: [contact_attribute:FIELDLABEL] [contact_attribute:FIELDLABEL]内のFIEDLLABELを任意のフィールド項目名に変更してください。 (法人名、役職名、携帯電話)など 保存&閉じるをクリック このコードは受信先で呼び起こすデータ(Firstname)などの情報がない限り表示されません 先程のコード[contact_attribute:firstname]の後ろにコンマ,を入力し一文字間をあけてください 残りの文章を入力してください 保存をクリック Top フィールド項目に登録されているURLを利用して、項目名にハイパーリンクを挿入させる方法 フィールド項目を挿入するブロックを選択します テキストを入力してください ブロックのHTMLコードを参照して下さい 先程入力したテキスト後ろにカーソルを合わせて下さい 最後の文字から一字開けて、以下のコードを挿入してください。(赤字に該当するフィールド項目名を入力してください): <a href="[contact_attribute:field name]" target="_blank"> [contact_attribute:field name] </a> 最初のfieldnameをURLが入力されているフィールド項目名に変更してください 次のfieldnameをテキストとして表示される内容が登録されているフィールド項目名に変更してください. Top 受信者ごとに異なる内容が表示されるメールの作成方法 内容によっては購読者によって違うものが表示されると、一つのメールを用意するだけでいいので便利です。 以下に記す、条件別コンテンツ表示タグを利用することによって可能となります   例えば、関東にお住いの方に対して東京でイベントを開催することを告知するメールと、関西の方へまた別の会場の告知を同じメールで知らせることができます。   下記のコードを編集画面にペーストしてください : [if:項目名=項目内容] 受信者に登録されている内容が一致しているかどうか

テンプレート&メールエディタ 10月 12, 2020

独自HTMLコード/ウェブページを使用してメールを作成する方法は?

Benchmarkでは数百種類のメールテンプレートをご用意しておりますが、必要に応じてご自身のテンプレートを使用することも可能です。 独自のHTMLテンプレートを作成した場合、そのテンプレートを使用してメッセージを作成する手順と弊社のテンプレートを使用する場合の手順は異なりますのでご注意ください。 注意:以下のステップはお客様がHTMLテンプレートを既に作成し、テンプレートがBenchmarkアカウントにアクセスする際に使用しているコンピューターから直接アクセスが可能な場合を想定しています。テンプレートに使用するすべての画像が有効なウェブURLを参照しており、ウェブ上でアクセス可能かお確かめください。 Benchmarkアカウントにログインします。 ダッシュボードメニューより「メール」を選択します。 ページ右上の「メール作成」ボタンをクリックします。 「通常メール配信」を選択し、「次へ」をクリックします。 「HTMLビルダー」オプションを選択し、「次へ」をクリックします。 ステップ1 詳細の入力を完了します。 「保存&次へ」をクリックします。 ステップ2 リストの入力を完了します。 「保存&次へ」をクリックします。 ステップ3 エディター画面にてお手持ちのHTMLをコピーし、貼付けます。 右側の「エディター」エリアにメールが表示されます。ヘッダーから追加の画像を挿入したり、パーソナライズを使用することも可能です。 デフォルト ー HTMLコードのテキストカラーを表示します。エディターエリアに表示される色と同じ色で表示されるため、コマンドを特定することができます。 挿入機能 ー 「転送リンク」、「グリーティング挿入」、「パーソナライズ」の3種類のオプションをHTMLメールに追加することができます。 すべての入力が完了したら、「保存&次へ」をクリックします。 メールを送信したいスケジュールを選択します。「すぐに送信」、「配信スケジュール」、「下書きとして保存-配信はされません。後で送信」のオプションから選択してください。 コンタクトに送信されたメッセージのレイアウトとメールエディターのプレビュー画面に表示されるレイアウトが若干異なる場合がございます。メールのプレビューバージョンとクライアントに送信されたメールのレイアウトが異なる原因に関しましては、こちらをクリックしてください。 他にご不明な点がございましたら、メールまたはお電話にてお気軽にサポートチームまでお問い合わせください。

テンプレート&メールエディタ メール配信 9月 6, 2019