HTMLメールのmetaタグ format-detectionについて

スマートフォンでは電話番号など自動でマークアップするため、format-detectionを設定します。

<meta name="format-detection" content="telephone=no,address=no,email=no,date=no">

ただし、メーラーによってはこれだけでは制御できないものもあります。
そのため、本文中のマークアップされた箇所の色が変わらないように、あらかじめCSSで<a>タグの文字色や下線の有無を設定するようにしています。

a { color: #333333; text-decoration: none; }

color: #333333; は本文と同じ色で下線が付かないように指定しています。colorは適宜変更してください。本文以外で文字色を変える場合は、classをあらかじめ作成しておいて、色を指定してください。

例)テキストが白字の場合

CSSを用意して、HTMLにclassをつける方法

.white a { color: #ffffff; text-decoration: none; }
<span style="color: #ffffff;" class="white">お問い合わせ先はこちら 06-0000-0000</span>

CSSは用意せず、HTMLのみで完結する方法

<span style="color: #ffffff;">お問い合わせ先はこちら <a style="color: #ffffff; text-decoration: none;">06-0000-0000</a></span>

マークアップされるものを<a>タグで括ってしまうという方法があります。

この記事が気に入ったらサポートをしてみませんか?