訳も知らないで

デザイン&プログラミングのことも書くし、それ以外のことも書く。

HTMLメールを作る。　〜画像を使わずボタン、outlook2007(2010)との戦い、テスト配信〜

html css

最近HTMLメール、増えてきましたよね。
ただ作るとなると、各メールクライアントで表示が微妙に異なるため
チェックが大変。。

今回画像なしでボタンを配置しようと思ってあれやこれやしてみました。

HTMLメールについて

普通のHTMLページ？を作るのと違う部分として、
body内しか記述することができないので、cssはインラインで記述するしかありません。
レイアウトもcssで指定することができないので、懐かしのtableレイアウトで実装します。

ボタンを画像で表示したくなかった

HTMLメールでなるべく画像を使いたくないな、というのがあります。
なるべくリクエストを送りたくない、通信が増えるのは嫌だというのもあるのですが、
メールクライアント(の設定)によってデフォルトで画像が表示されないことがあるので
せっかく見た目にこだわって作ったとしてもユーザーに気がついてもらいにくい場合があるんですよね。

css3でグラデーションやドロップシャドウが付けれるので、css3に対応しているメーラーではボタンぽく、
対応していないクライアントではそれなりに表示するよう調整します。

css3でボタンを作成

最終的にこのようなボタンを作成しました。

<table width="100%" border="0" align="center">
  <tr>
    <td>&nbsp;</td>
    <td width="220px" style="width:220px;background-color:#F84907;border-radius:5px;-webkit-border-radius:5px;background:-moz-linear-gradient(top, #FB7E4F, #F94906);background:-webkit-gradient(linear, left top, left bottom, from(#FB7E4F), to(#F94906));-moz-box-shadow: 1px 1px 3px #000;-webkit-box-shadow: 1px 1px 3px #000;">
      <a href="http://careerindex.jp/" style="text-decoration:none;">
        <div style="height:15px;"></div>
        <div style="border-color:#8E2E04;border-width:2px;text-align:center;font-size:14px;font-weight:bold;width:220px;line-height:15px;color:#FFF;">
          ボタンだよ！<br />&nbsp;
        </div>
      </a>
    </td>
    <td>&nbsp;</td>
  </tr>
</table>


css3理解してくれる場合、このような感じに
f:id:blog_711fumi:20140101155126g:plain

css3理解してくれない場合、このような感じに
f:id:blog_711fumi:20140101155138g:plain

outlook2007(2010)への対応

で、厄介なのがoutlookへの対応…
outlook2007,2010ではHTMLの解析が独特らしく、思ったように表示してくれません。。

例えば今回の場合、文字とボタンの外枠との間をdivタグ挟んだりline-height広げたりして作っています。
通常だとpaddingなどで間開けてやればいいのですが、outlook〜だと
そのpaddingの背景の色がつかなかったりしてうまく表示されなかったんですよね。。

あと、今回の書き方だとボタンなのに文字しかクリックできません
これ諦めました(゜-゜)

他にもいろいろ厄介なことが起こるそうなので(ググると困ってる人がたくさん…)
もしoutlook2007,2010を対象に含めるのであれば気をつけたいところです。
(Webサービスだとあまり割合高くないような気がしてますけど)

HTMLメールをテスト配信

そういうアプリケーションが用意してあれば問題無いと思いますが、
HTMLメール作ったらちょっと気軽にテスト配信して出来栄えを確認したいですよね？

意外とさっとHTMLメール送る方法が無くて困ったのですが、
メーラーのThunderbirdでは簡単にHTMLメールを送ることができます！

ThunderbirdでのHTMLメール送信方法

※既に設定等できていてメールが送信できる状態で(あたりまえですけど)

メールの新規作成画面を開き、本文入力エリアをクリック。
メニューの「挿入」を選択するとその中に「HTML…」みたいなのがあるのでそれを選択。
HTML入力欄がでてきてHTMLメールを作成することができます。



メールもそうですし広告なんかもバナー画像ではなくHTMLページを出せたりするものありますし
こういうの作るの慣れていきたいですねー(・∀・)