スマホ、Outlook対応！HTMLメールのボタンの作り方

HTMLメールを作ったけど、PC、スマホ両方対応しようとすると「ボタンを画像で作ったから大きすぎる、小さすぎる…。」などといった経験はないでしょうか？
「HTMLメールだから仕方がない…。」と画像で進めるのもありですが、ソースコードのみで対応できる方法がありますのでご紹介します。

「padding」を使えたら一番楽ですが、下記のように古いOutlookの場合、aタグに「padding」が対応していないようです。（代わりにborderを使おうと思ったのですが、10px程度までしか太くなりません…。）

The Ultimate Guide to CSS
https://www.campaignmonitor.com/css/
（「！」マークにツールチップで「Padding for p, div and a tags is not supported」と表示されます）

そのため、Outlook用のハックを利用します。

  
    Googleにリンク
  

「<!– [if gte mso 9]>〜<![endif]–>」とは、「Outlook 2000（Version 9以上）」のみ読み込むというハックです。
※以前ご紹介しました、スマホでもPCでも読みやすい！HTMLメールのフォントサイズを参照

その中に書かれている「<v:roundrect>」「<w:anchorlock/>」「<center>」はVMLタグらしく、そのタグで図形を描画しているようです。
なんだかややこしそう…と思っていたら、下記のジェネレータがありました。

Bulletproof email buttons
https://buttons.cm/

このジェネレーターでボタンを作成すると、Outlookにも対応した形でコードが生成されます。Outlook用のボタンは、幅と高さは固定されてしまうので、文字の量等に対応した調整はその都度必要です。

簡単なご紹介となりましたが、HTMLメールでボタンを作る際に参考になれば幸いです！

Tweet