初めてのHTMLメールコーディング

1.対象とするメールサービスやメールクライアントを決める

2.HTMLメールコーディングを進める

ポイント
テーブルレイアウトで組む
→CSSはなるべく使わず、使用する場合は各要素にインラインで直書きする

仕様
【DOCTYPE】HTML4.01 Transitional
【文字コード】iso-2022-jp

知っておくと良い使用不可な指定

※詳細はCSS対応表で確認 → Guide to CSS support in email | Campaign Monitor

手順1:
<head>内にて<body>や大枠の<div>要素にもフォントサイズやカラーなどを定義
また、使用する要素のマージン、パディングを初期化する
※インラインCSSが効かない場合も考慮し指定はあえて冗長に

手順2:<td>内の<p>など直近の要素に個別のスタイルを指定
例えば、
font-size:14px;
line-height:1.4;
color:#000;
height: 100px;(画像の場合は画像の高さを指定)

手順3:アンカーリンクの文字色
アンカータグとさらに内部に指定する
<a href="#" target="_blank" style="color: #ff0000;"><font color="#ff0000">リンク</font></a>

手順4:画像の扱いについて
画像のパスは、http://(https://) から始まる絶対パスで記述する

3.出来上がったHTMLメールをテスト送信して確認する

Thunderbirdの場合

  1. 1.「オプション」→「アカウント設定」→「編集とアドレス入力」の項目内の「HTML形式でメッセージを編集する」にチェックを入れる。
  2. 2.「作成」ウィンドウを立ち上げて、「挿入」→「HTML」で表示される「HTMLを挿入」ウィンドウ内に、あらかじめ作成してあるHTMLをコピペする。
  3. 3.「オプション」→「送信形式」→「HTMLのみ」または「テキストとHTML」を選択。
  4. 4.問題なければ送信。

参照元サイト:
Thunderbird(サンダーバード)でHTMLメールを配信する方法 - MOROMOLOG(2011/3/24)

Mac Safari と Mail(Yosemite) の場合

  1. 1.作成したHTMLメールをSafariで開く
  2. 2.Safariから「Webページを共有」を選択
  3. 3.Mailから送信

参照元サイト:
Mail (Yosemite): Safari から共有する Web ページを送信する(2014/12/15)

※送信方法によって結果が変わる場合があるので注意が必要

4.その他

上記の方法はモバイルが対象外となっています。どのデバイス、メールクライアントに対応するかによって組み方は変わってきます。そのあたりは以下のサイトにて。

参考サイト:
HTMLメール制作のコツや便利なサービスいろいろ | Webクリエイターボックス(2014/7/17)