【崩れを最小限に!】htmlメルマガのテンプレート

2019-03-19 14:35

HTMLメルマガはとにかくメーラー依存や崩れがひどく、苦労が絶えないものですよね。

そこで今回は私が検証、実験を重ねた中でもっとも崩れが少なかったHTMLメルマガの枠組みを紹介します。

制作したけど、崩れる!という方はこちらもチェックしてみてください。
【htmlメルマガ】崩れを防ぐチェックポイントも

一番外の枠組みテンプレート

横幅は600px(両サイドにmargin:12px)に設定してあります。このくらいがPC/SPで一番不具合がないかと思います。
▽ コンテンツの入れ方については下記に記述しています。
(/images/spacer.gifのところはご自身の使用するspacer.gifを入れてください。)

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="device-width, initial-scale=1.0">
<title>メルマガタイトル</title>
</head>

<body style="background-color:#ffffff; font-size:14px; font-family:'メイリオ', Meiryo, Osaka, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro',  'MS Pゴシック', 'MS PGothic', sans-serif; margin:0; padding:0;  -webkit-text-size-adjust: 100%;">

<table width="100%" border="0" cellspacing="0" cellpadding="0" style="background-color:#ffffff; font-size:18px; -mso-line-height-rule:exactly; -mso-line-height-alt:1.4; -mso-line-height-rule:exactly; -mso-line-height-alt:1.4; font-family:'メイリオ', Meiryo, Osaka, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'MS Pゴシック', 'MS PGothic', sans-serif;  margin:0; padding:0;  -webkit-text-size-adjust: 100%; text-align:center; overflow:hidden;">
<tr>
<td>
<div style="width:600px !important; max-width:600px; overflow:hidden; margin:0 auto;">
<style type="text/css">
img { 
max-width:100%;
vertical-align:bottom;
text-align:center;
display:block;
line-height: 1;
margin:0 auto;
border-style:none;
}
td { padding:0;}
br { display:block; }
body {
font-family:'メイリオ', Meiryo, Osaka, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro',  'MS Pゴシック', 'MS PGothic', sans-serif; 
margin:0;
padding:0;
line-height:1.6;
}
p {
margin: 0;
padding: 0;
line-height: 1.4;
}
* {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
font-variant: normal;
text-transform: none;
mso-line-height-rule: exactly;
-mso-table-lspace: 0;
-mso-tablerspace:0;
box-sizing:border-box;
}
.fs10 { font-size:10px !important;}
.fs12 { font-size:12px !important;}
.fs14 { font-size:14px !important;}

@media screen and (max-width: 767px) {
.fs10 { font-size: 14px !important;}
.fs12 { font-size: 16px !important;}
.fs14 { font-size:20px !important;}
}
</style>

<table width="600" border="0" cellspacing="0" cellpadding="0" style="background-color:#ffffff; font-size:18px; -mso-line-height-rule:exactly; -mso-line-height-alt:1.4; -mso-line-height-rule:exactly; -mso-line-height-alt:1.4; font-family:'メイリオ', Meiryo, Osaka, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'MS Pゴシック', 'MS PGothic', sans-serif;  margin:0 auto; padding:0;  -webkit-text-size-adjust: 100%; text-align:left; max-width:600px;">
<tr style="max-width:600px;" >
<td width="12"><img src="/images/spacer.gif" style="padding:0; vertical-align:bottom; display: block;"height="1" width="5"></td>
<td width="576">
<!--ここからコンテンツ-->









<!--ここまでコンテンツ-->
</td>
<td width="12"><img src="/images/spacer.gif" style="padding:0; vertical-align:bottom; display: block;"height="1" width="5"></td>
</tr>
</table>
</div>

</td>
</tr>
</table>

</body>
</html>

パーツを中に入れていく

<!–ここにコンテンツ–>の中に<table>を積み重ねて行くことでメルマガが出来上がっていきます。上記の枠の中に入れる場合の書き方ですので、ご自身でカスタムする時はお気をつけください。

<table>
<tr style="max-width:600px;" >
<td><img src="/images/spacer.gif" style="padding:0; vertical-align:bottom; display: block;"height="1" width="5"></td>
<td style="font-size:14px;"><span class="fs14">
ここに文章を入れましょう。tdのインラインスタイルはgmail用、<br>
spanのclassはPC、SPのレスポンシブ用です。
</span></td>
<td><img src="/images/spacer.gif" style="padding:0; vertical-align:bottom; display: block;"height="1" width="5"></td>
</tr>
</table>

合計widthに注意です!

このテンプレートはwidh:600pxで作ってありますので、コンテンツの横幅合計が600pxを超えないようにするのが大事です。
Appleのデフォルトメーラーではいい感じに見せてくれますが、GmailやOutlookはセンシティブですので、電卓を側に置いて作業すると良いと思います。