サポートページ aero-right css

CSSを利用してBenchmark Emailでメール作成は可能ですか?

  通常、CSSは外部ファイルとして保存されたデータを呼び起こしたり、メールのヘッダー部に記述され内部データを参照することでレイアウトを決定しています。 しかしメーラー側(Yahoo!Mail、Gmail、Hotmail等)でこの様なデータ参照が無効となっているため、この形式はHTMLメールでは利用出来ません。 メーラーにはそれぞれすでに独自のCSSが設定されており、干渉しあってうまく作動しない恐れがあるからです。 Benchmark EmailではBodyタグへ直接編集する方法ではなく、インライン形式の記述を推奨しております。 ヘッダーにCSSを記述するのではなく以下の例のように入力を行います: <div style=" font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#666666; background-color:#EEEEEE;">Your content here....</div> CSSをご利用の場合は、配信前に入念な確認を行なってください。フォントやサイズ、カラーの変更、通常通り反映されますが一部のタグ、Divタグやポジショニングタグといったものはほとんど機能しません。 CSS編集はもし受信に失敗しても購読者が読めるように、シンプルで単純なものにするように心がけてください。 HTMLメール配信において、ウェブページを編集するようにCSSを利用することは出来ません。 下記の注意点をご参照の上、ご利用頂くようお願いします。 CSSにおける注意点  外部参照 ( ) や内部参照は利用出来ません。(HTMLヘッダー部のStyleタグの編集も無効となります)多くのメーラーではCSSの外部参照、内部参照が非対応となりますのでご注意ください。これはCSSの編集において一番重要な点となります。  メール配信において、JavaScriptは絶対に使用しないでください。  JavaScriptを利用して配信したメールはスパム(迷惑メール)と認識されてしまいます。  タグ属性の変更 (色、幅等の変更) は行わないでください。  背景画像を設定しないでください。ほとんどのメーラーで、対応、推奨されない編集となっています。 ただし背景色の設定は可能です。(Bgcolor属性もしくはbackground-color:CSSで設定が行えます) CSSでの編集作業について  レイアウトではテーブルタグを利用してください。テーブルタグはどのメーラーでも利用が保証されています。  BenchmarkでのCSSの編集はインラインを推奨しております。 インラインの記述については以下のように行ってください: <span style="font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#000000;">Your content here....</span>  Width、Cellpadding、Cellspacingの設定はテーブルタグもしくはテーブル内のセル毎で設定を行ってください。この設定によってテンプレートの幅が変更されます。  画像周辺にスペースを設定する場合はHspaceとVspaceタグをご利用ください。インライン形式で余白を設定するのはほとんどのメーラーで有効です。 ただしすべてのメーラーで動作が保障されているわけではないので、ご注意ください。   CSSを使わなければならない場合はインライン記述のみを利用してください。その上で編集した内容が適切に機能しているかを、大手フリーメール(Yahoo!,Gmail,Hotmailなど)のアドレスに向けてテストメールを送信し確認を行ってください。     >>「メール作成:編集操作」のまとめページに戻る

General Questions 3月 17, 2022

メール作成:編集操作(エディタ・画像ギャラリー・ロゴ変更など)

このページでは、メール作成の「編集操作」に関する資料を紹介します。 配信設定 レイアウト選択 メールブロックの編集 書式の編集 画像と動画 画像ギャラリー / ドキュメントライブラリ リンク フッターの設定 テキストメールの編集 パーソナライズ機能 RSS タグ CSS/HTML についての答えが見つかります。メール作成方法を解説したスライド/動画もページ下部にあります。 「メール作成:設定管理」のまとめページも併せてご覧ください。 「メール作成:編集操作」のFAQ 配信設定 ・配信先から特定のコンタクトリストを除くには? ・タイムゾーンを変更する方法 ・プレヘッダーテキストとは何ですか? ・件名に絵文字は使用できますか? レイアウト選択 ・Benchmark Emailのテンプレートを使ってメールを作成する方法 ・メール作成途中でのレイアウト変更は可能ですか? ・最新のTwitterツイートをメールに挿入する方法は? メールブロックの編集 ・メールのセクション機能と各ブロックの説明(以下の項目も含む) メール全体、セクションごと、ブロックごとに背景色を変えることはできますか? ブロックごとに背景画像を設定できますか? 複数のカラムを横並びに挿入した時にカラムに出来てしまう空白を埋めるには? お気に入りブロック機能(メール内のブロックを保存して、他のメールで使う方法) ・メール内のブロックを移動・コピー・削除する方法 ・ドラッグ&ドロップエディタでブロック間の空白や区切り線を追加する方法 ・ブロックの周りに線を引くことはできますか? 書式の編集 ・ドラッグ&ドロップエディタでフォント・文字サイズ・行間を調整する方法は? ・Benchmark Emailへコピー&ペーストすると、テキストの書式が変わってしまうのはなぜですか? ・メール内に表を挿入する方法はありますか? 画像と動画 ・画像をメールに掲載する方法 ・画像にリンクをつける方法 ・画像のサイズや色を編集する方法 ・画像の枠を編集する方法 ・小さく表示させたい画像が、スマホでは大きく表示されてしまいます。対処法はありますか? ・メールやランディングページに動画を挿入する方法 ・GIFアニメをメールに使用することはできますか? ・Benchmark Emailで作成するメールにJavascriptやFlashは使用できますか? 画像ギャラリー / ドキュメントライブラリ ・画像ギャラリーについて ・画像ギャラリーの利用と画像のアップロード方法について(複数の画像を並べて表示させる方法も含む) ・画像ギャラリーにアップロードした画像を削除するとどうなりますか? ・画像ギャラリーのアップロード容量を増やす方法 ・ドキュメントライブラリについて/添付ファイルを送信するにはどうしたらいいですか? リンク ・メールにリンクを挿入する方法(文字・画像・動画・SNSアイコンなど) ・リンクの色の変更と下線を表示させない方法 ・メール内任意の場所へアンカーリンクを指定する方法 ・イメージマップ(クリッカブルマップ)をメールに挿入する方法 ・Googleマップの検索機能をメールに追加する方法 ・メール内にWebページ版リンクを挿入する方法と、メールのURLを取得する方法 ・メールを短くするため、記事に「続きを読む」リンクを挿入することはできますか? ・オプトイン・オプトアウトリンクを配信メールに挿入する方法 フッター ・メールフッター部分のロゴおよびリンクの表示設定 ・メールに記載する住所の編集方法 ・パーミッションリマインダーの編集方法 ・メールに注意書きを追加することはできますか? ・フッターの言語を変更する方法 ・「登録情報更新」とは何ですか? ・「配信停止」(オプトアウト)とは何ですか? ・メールフッターから遷移する配信停止・登録情報更新ページはカスタマイズできますか? テキストメールの編集 ・テキスト版のメールの編集方法は? パーソナライズ機能 ・購読者毎の情報をメールや件名に差し込む方法 ・グリーティング機能について RSS ・RSSメール配信機能について RSSフィードのURLを取得する方法 RSSメールを作成する方法 稼働中のRSSメールを編集または停止する方法/停止したメールを再稼働する方法 RSSメール配信レポートを確認する方法 タグ ・BenchmarkEmailで利用可能なタグ一覧 ・タグを利用して、QRコードやバーコードをメール内に挿入する方法 CSS/HTML ・ドラッグ&ドロップエディタで作成したメールのHTMLコードを参照できますか? ・ドラッグ&ドロップエディタのコードを編集する際のテクニック集 ・自分でデザインしたHTMLメールを送れますか? ・基本となるHTMLコード一覧 ・HTMLコーディングでよくある間違い ・HTMLエディタでメールフッターの場所を修正する方法 ・カスタムしたHTMLコードでメール配信した場合、Benchmark Email側で何か行いますか? ・CSSを利用してBenchmark Emailでメール作成は可能ですか? チュートリアル「ドラッグ&ドロップでHTMLメールを作成する」 *動画の内容におきまして、メール作成の流れが一部現在と異なる部分がございます。(2021年10月現在、管理用のメール名の入力後はメールエディターに遷移します。また、チェックリストの順番が変更となっております。) スライド資料(PDF) ドラッグ&ドロップでHTMLメールを作成する 動画 チュートリアル「効果測定が可能なテキストメール」 プレーンテキストのみでメールを配信する場合、以下の方法で作成するとレポート機能で効果測定が可能です。 スライド資料(PDF)  効果測定が可能なテキストメール >>サポートページ(TOP)に戻る

オートメーション 6月 24, 2022

ポップアップフォームの編集方法は?

目次 サイト訪問者に一度だけ表示する方法 CSSを使って編集する方法 表示時間を変更する方法 幅を変更する方法   サイト訪問者に一度だけ表示する方法 以下の手順で、ページ訪問者に対し初回のみポップアップを表示することが可能です。 *表示はブラウザのクッキー情報をもとに行います。そのため同じユーザーでもクッキー情報を削除した場合や、閲覧履歴が残らないシークレットモードや別のブラウザを利用した場合は、再度表示されます。  登録フォーム作成からポップアップフォームを作成 ステップ2デザインで、画面左上の「標準設定」をクリック  「表示」>「ページ訪問者に対し初回のみポップアップを表示する」を選択 HTMLコードを編集する場合:  ポップアップフォームのRawHTMLをコピー&ペースト  出力されるHTMLコードから次のコードを検索し、コードの追加行を赤でマークします。削除または変更はせず、コードの追加のみを行ってください。 A、B、C、Dのコードを適用すると、ユーザーがフォームに登録または閉じた場合フォームが再表示されることはなくなります。ユーザーが登録するまでフォームが表示される様に設定する場合は、コードAとDのみを利用してください。 A) document.getElementById('formbox_screen_subscribe').style.display = 'none'; verticalCenter(successScreen); localStorage.setItem("bmePopupFormViewed", "true"); B) signupFormVeil.addEventListener("click", function() { signupFormContainer.style.display = 'none'; localStorage.setItem("bmePopupFormViewed", "true"); }); C) signupFormCloseButton.addEventListener("click", function() { signupFormContainer.style.display = 'none'; localStorage.setItem("bmePopupFormViewed", "true"); }); D) var bmePopupFormViewed = localStorage.getItem("bmePopupFormViewed"); if (bmePopupFormViewed != "true") { setTimeout(function() { verticalCenter(signupFormContainer); }, 3 * 1000); CSSを使って編集する方法 "#formbox_screen_subscribe"は登録フォーム画面のcontainer IDです。 "#formbox_screen_success"は登録完了画面のcontainer IDです。 "#closebtn"は登録フォームの閉じるボタンのIDです。 "#btnSubmit" は登録ボタンのIDです。 *既存のフォームスタイリングを無効とするため"!important" というCSSコードの追加を推奨します。 表示時間を変更する方法 訪問者がウェブサイトやフォームが設置されたページを訪れた際、ポップアップフォームが少し遅れて表示されるように時間の指定をすることが可能です。登録フォームを作成する際に設定ができます。以下の指示に従って、ポップアップフォームの表示時間を変更してください。 1. Benchmark Emailアカウントへログイン 2. ダッシュボードメニューから「コンタクトリスト」>「登録フォーム」をクリック 3. 「登録フォーム作成」ボタンをクリックし「ポップアップフォーム」を選択した状態で「次へ」をクリック 4. 登録フォーム名、顧客リストを選択し「保存&次へ」をクリック 5.  画面左上の「標準設定」をクリックし、「ボックス設定」メニューをクリック 6. 一番下の「配信間隔」からご希望の設定時間を選択。最大で60秒間、表示までに時間をかけることができます。 幅を変更する方法 ポップアップフォームはデフォルト設定で横幅400px、サイドの空白枠40pxの仕様となっております。また、最大画像領域は320pxです。フォームの横幅を320px以下に変更すると、画像サイズは自動的にフォームに合うように調整されます。 なお、変更が適用されない場合は、ブラウザのキャッシュが削除されているかご確認ください。 幅を変更する方法については、以下の手順に従ってください。 1. ダッシュボードメニューから「コンタクトリスト」>「登録フォーム」をクリック 2. ステップ2デザインで、画面左上の「標準設定」をクリック 3. 「ボックス設定」をクリック 4. 「横幅」の下のボックス内に任意のピクセル数を入力 5. 調整完了後、「保存&出力」をクリック なお、Benchmark EmailではEU一般データ保護規則(GDPR)に準拠した登録フォームを作成することが可能です。 詳しくは以下のFAQをご確認ください。 FAQ:EU一般データ保護規則(GDPR)に準拠した登録フォームにチェックボックスを追加することはできますか? ご不明な点がございましたらこちらよりサポートへご連絡下さいませ。     >>「登録フォーム」のまとめページに戻る

登録フォーム 4月 6, 2021

HTMLコーディングでよくある間違い

HTMLメールの配信は上手く編集ができれば大変見栄えが良くなりますが、画像、フォント、CSSファイルの問題により購読者側でレイアウトが崩れたり、まったく表示されないこともあります。 Microsoft PublisherやDreamweaver、FrontpageなどのHTML編集ソフトで作成する場合、ウェブページの編集ではなくメールの作成を行っていることを忘れないようにしましょう。ウェブページと同じ要領でメールを作成してしまうと、購読者が受信するものと全く違うメールが配信されてしまうことがあります。 以下の点に気を付けてメールのコード作成を行ってください。 1. CSSファイルの外部参照は一切不可 多くのメールクライアントは独自のCSSをすでに設定しているため、外部ファイルの参照を受け付けていません。そのためCSSの設定を行う際は、インライン形式の編集を行ってください。配信を行う前に、メール設定のミスなど矛盾部分の確認するために主要なメーラーでのチェックを行ってください。 i) 外部CSSの参照は利用ができません。 <link href="css1.css" rel="stylesheet" type="text/css"> ii) メールのヘッダー部にCSSを記述し、それをボディ内のコードに参照することができません。 <style> .main{font-size:16px;} .subhead{font-size:14px; font-weight:bold; color:#cc0000;} </style> <span class="subhead">Newsletter Article</span> <strong> Use Inline Stylesheet:</strong> <span style="font-size:14px; font-weight:bold; color:#cc0000;">Newsletter Article</span> 2. メール全体が画像となってしまう程、大きい画像の使用は出来ません。 メーラー側のデフォルト設定によってこのようなサイズの画像はブロックされます。そのため購読者には空欄で表示されてしまいます。画像だけのHTMLメールの配信は、迷惑メールと認識されてしまうなどの問題があるため、Benchmark Emailでは推奨しておりません。 3. メールの幅を容量内に収めてください。 メーラーで表示できる範囲でメールのレイアウトを行って下さい。適切な表示が行われる理想的な大きさは650pxとなっています。もし疑問点が浮かんだら、Yahoo!もしくはGmailなどに無料アカウントを作成し、メールのテスト配信を行い、どのような表示が行われているか確認してください。 4. HTML内の無駄なジャンクコードを削除しましょう。 FrontpageやMicrosoft Word、Microsoft Publisherでメールを作成している場合はテンプレート内にレイアウトを崩したり、不具合を引き起こすジャンクコードが含まれていることを注意してください。 最悪の場合、このコードが原因でスパム(迷惑メール)と認識されてしまう可能性もあります。 配信を行う前に、無駄なコードや必要のない属性編集、内部コメントなどの記述はなるべく削除しましょう。 以下の例をご参照くださいませ: <span class="fs12"><v:shape> <o:column> <b:Xl> ![endif]></span> 5. Flash,Javascript,ActiveX、動画、音声ファイルの埋め込みは利用ができません。 セキュリティソフトによって上記のファイルはブロックされてしまいますので、利用は避けましょう。 動画や音声ファイルなどはランディングページやメールのリンク先に使うようにしましょう。 6. 画像のリンク先URLの入力を確認しましょう。 画像のリンク先に問題があるケースが多いようです。これまでカスタマーサポートに寄せられたご相談には、画像のリンク先をご自分のパソコンのハードディスクと設定してしまっているケースが多々ありました。 相対URL(ご利用いただけません): <a href="lastpage.htm"> </a> ご自分のパソコンのローカルサイトへリンクが設定されている、もしくはウェブサイト上の相対位置へのリンクはご利用になれません。 絶対URL(ご利用いただけます): <a href="http://www.microsoft.com/"> </a> 上記のワールドワイドウェブ上で稼働中のウェブページへのリンクのような形式は、有効となります。 7. 少なくともYahoo!、Gmail、Hotmail等3~4つのメーラーでの表示を確認しましょう。 メールのレイアウトがミスなく表示されていないかを確認するためです。 必ずテストメールを、作成した無料メールアカウントへ送信し、画像の表示、リンクが機能しているか、色の変更は見込み通りかどうかを確かめましょう。 8. メーラーによって無効となってしまうFormコードの使用を避けましょう。 メーラーの対応外のインラインフレームの運用は控えましょう。iFramesタグも多くの受信環境が表示に対応していないため避けましょう。 ご不明な点がございましたら、こちらからサポートへお問合せ下さい。 >>「メール作成:編集操作」のまとめページに戻る

General Questions 6月 23, 2022