DreamweaverでHTMLメールを作る方法

 Dreamweaverを使ってHTMLメールを作る方法を検討してみました。

 まずHTMLメール制作の注意点ですが

  1. CSSは出来るだけ使わない
     メーラーやwebメールクライアントによって、CSSのサポート状況がかなり違います。
     特にサポートが低いのが"Gmail"です。head部分にCSSを書いても反映せず、外部CSSファイルも使えません。

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

     実際にいろいろとHTML形式のメルマガを調べてみたところ、実は全てhead部分にCSSを書いていました。しかしどこもフォントサイズ程度にとどめていました。この程度ならばCSSが無視されても大丈夫なようです。
  2. レイアウトはCSSではなく、旧来のテーブルレイアウトにする
     CSSはメールクライアントによってサポートがまちまちなので、テーブルレイアウトにします。
  3. 画像にはaltを設定し、画像が表示されなくても大丈夫なようにする
  4. イメージファイルはサーバーに置き、パス指定は絶対パスにする
  5. デザインの幅は600px程度が良いようです
  6. 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>
  1. Dreamweaverでテーブルレイアウトでデザインします。上述のように基本的にCSSは使わず、フォントもfontタグを使います。
  2. イメージをサーバーにアップします
  3. ソースのイメージのリンク先をサーバーに変更します
  4. Dreamweaverをコードビューにして全てのソースコピーします。
     (MacのDreamweaverで作った場合は、ファイルをWindowsのエディターで開いてコピーします)
  5. OE(OutlookExpress)で新規メールを作り、「ソース」タブをクリックしてそこにペーストします

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

  • Windows OEでの表示
    HTMLイメージ(OE)
  • Mac Entourageでの表示(フォント14pxではちょっと大きいですね(^.^;))
    HTMLイメージ(entourage)
  • Windows Gmailでの表示(CSSが無視されています_| ̄|○)
    HTMLイメージ(gmail)

◇参考サイト(いつも情報有り難うございます)

トラックバックURL

このエントリーへのリンク:

このエントリーのトラックバックURL:

コメントする