Benchmark Email サポートセンター

AIサポートチャット(β版)をお試しください。

AIに質問する

サポートページ aero-right CSSを利用してBenchmark Emailでメール作成は可能ですか?

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

General Questions 更新日 3月 17, 2022

 

通常、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における注意点

  1.  外部参照 ( ) や内部参照は利用出来ません。(HTMLヘッダー部のStyleタグの編集も無効となります)多くのメーラーではCSSの外部参照、内部参照が非対応となりますのでご注意ください。これはCSSの編集において一番重要な点となります。
  2.  メール配信において、JavaScriptは絶対に使用しないでください。  JavaScriptを利用して配信したメールはスパム(迷惑メール)と認識されてしまいます。
  3.  タグ属性の変更 (色、幅等の変更) は行わないでください。
  4.  背景画像を設定しないでください。ほとんどのメーラーで、対応、推奨されない編集となっています。 ただし背景色の設定は可能です。(Bgcolor属性もしくはbackground-color:CSSで設定が行えます)

CSSでの編集作業について

  1.  レイアウトではテーブルタグを利用してください。テーブルタグはどのメーラーでも利用が保証されています。
  2.  BenchmarkでのCSSの編集はインラインを推奨しております。 インラインの記述については以下のように行ってください:
    <span style=”font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#000000;”>Your content here….</span>
  3.  Width、Cellpadding、Cellspacingの設定はテーブルタグもしくはテーブル内のセル毎で設定を行ってください。この設定によってテンプレートの幅が変更されます。
  4.  画像周辺にスペースを設定する場合はHspaceとVspaceタグをご利用ください。インライン形式で余白を設定するのはほとんどのメーラーで有効です。 ただしすべてのメーラーで動作が保障されているわけではないので、ご注意ください。

 

CSSを使わなければならない場合はインライン記述のみを利用してください。その上で編集した内容が適切に機能しているかを、大手フリーメール(Yahoo!,Gmail,Hotmailなど)のアドレスに向けてテストメールを送信し確認を行ってください。

 

 

>>「メール作成:編集操作」のまとめページに戻る

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

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

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