HTMLメールの作り方
HTMLメールでのメルマガ配信をしたい・・・との打診を受け、（実は初めて）HTMLメールを組みましたのでまとめてみたいと思います。
『HTMLメールは嫌われる』
そんな思い込みがあったので、これまで組んだことがなかったのです。
今考えると「いつの時代の話だよ？」って感じですよね（笑）
HTMLメールの基本
- テーブルレイアウトで作成
- HTMLは 『HTML 4.01 Transitional』
- 文字コードは 『iso-2022-jp』
- 画像等はサーバーにアップロードしておき、絶対パスで指定
- altは必須（Webサイトでもそうですが）
10年ほど前は普通に行われていたテーブルでのレイアウト。
HTMLメールはこのテーブルレイアウトで組みます。（ちょっと懐かしかったり）
HTMLメールで気を付けること
- スマホでも見ることを考慮し幅は600px指定
- 背景画像などは使わない
- 背景色はtableタグに直接指定
- ボーダーは画像で作る
PCのメーラーで見たら幅が狭くてインパクトに欠けるような気がしますが、最近ではスマホで見る場合も多く600px指定にしておくのが一番最適なんだとか。
もちろん画像のファイルサイズもスマホで見ることを考慮しサイトで使うより少し小さめにしておきました。
レイアウトが崩れないために注意すること
- td内に画像のみを配置する場合、font-sizeを0、line-heightも0にしておく（余計な余白が入ってしまうことを防ぐ）
- 同じ意味でtableへのvalignとimgへのvartical-alignをtopに指定
- font-sizeやcolor、widthやheightなどしつこいくらい各タグに直接指定する
実際テスト送信してみて、送信画面ではきちんと表示されていたものですが引用返信してみたら・・・font-sizeの指定忘れをしていた部分がfont-sizeがデフォルトに戻っており、表示が崩れてしまっていました。
メール送信のために気をつけること
- HTML文で、1行の文字数を少なくする
いざテスト送信～受信してみると、意外な場所に『半角スペース』が入っていました。
これはメーラーによる『○○文字で改行する』という設定が意地悪をするものと判明。
（※メーラー側の設定を変更しても改善されませんでした。）
HTML側で改行（brタグとかではなくエディタ上での改行）を入れ、HTML文の1行内の文字数を少なくすることで解決しました。
以上、参考にさせていただいたのはこちら。ありがとうございました。
崩れないHTMLメルマガ作成術
HTMLメールのメールマガジンを実際に組んでみた
コメントを書く