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メールのメールマガジンを実際に組んでみた

コメントを書く







コメント内容


応援クリックお願いします
   にほんブログ村 IT技術ブログ ホームページ・サイト制作支援へ    Webサイト・CGI ブログランキング
Twitter
お問い合わせ