DreamweaverでHTMLメールを作る方法

Dreamweaverを使ってHTMLメールを作る方法を検討してみました。
まずHTMLメール制作の注意点ですが
1. CSSは出来るだけ使わない
メーラーやwebメールクライアントによって、CSSのサポート状況がかなり違います。
特にサポートが低いのが”Gmail”です。head部分にCSSを書いても反映せず、外部CSSファイルも使えません。

インラインだと使えるCSSも増えるのですが、それでも使えないCSSプロパティーがいろいろあるので、[CSS support in email clients]の一覧を参考にしながら作るといいと思います。

実際にいろいろとHTML形式のメルマガを調べてみたところ、実は全てhead部分にCSSを書いていました。しかしどこもフォントサイズ程度にとどめていました。この程度ならばCSSが無視されても大丈夫なようです。

  1. レイアウトはCSSではなく、旧来のテーブルレイアウトにする
    CSSはメールクライアントによってサポートがまちまちなので、テーブルレイアウトにします。
  2. 画像にはaltを設定し、画像が表示されなくても大丈夫なようにする
  3. イメージファイルはサーバーに置き、パス指定は絶対パスにする
  4. デザインの幅は600px程度が良いようです
  5. DOCTYPEは「HTML 4.01 Transitional」、文字コードは「iso-2022-jp」を使用する


というわけで、

  1. Dreamweaverで下記のようなファイルを作ります
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html lang="ja">
    <head>
      <meta http-equiv="Content-Language" content="ja">
      <meta http-equiv="Content-Type" content="text/html; charset=iso-2022-jp">
      <title></title>
    </head>
    <body>
    </body>
    </html>
  2. Dreamweaverでテーブルレイアウトでデザインします。上述のように基本的にCSSは使わず、フォントもfontタグを使います。
  3. イメージをサーバーにアップします
  4. ソースのイメージのリンク先をサーバーに変更します
  5. Dreamweaverをコードビューにして全てのソースコピーします。
    (MacのDreamweaverで作った場合は、ファイルをWindowsのエディターで開いてコピーします)
  6. OE(OutlookExpress)で新規メールを作り、「ソース」タブをクリックしてそこにペーストします

[こちら]に私が作ったHTMLメールマガジンのソースをアップしておきます。
ここでは、CSSによってbodyのバックにイメージを配置したり、リンクの表示を変更していますが、Gmailではそれは無視されています。

Leave a Reply

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です