11:52メルマガhtmlメルマガをテスト配信したら崩れてた!なんてことはありませんか?たくさんテスト配信するのは大変です。少ないテストで決めたいところ......。そこで今回は、htmlメルマガが崩れた時のチェックポイントをご紹介します。現時点ではどうしても解決できないことなどもありますので、ぜひ参考にしてください。時点)まずはブラウザ表示でチェック当然のことを言うようですが、配信前にブラウザ表示で崩れていては元も子もありません。html/css/jsチェックツールなどを使って綺麗なソースにしていきましょう。フォントがおかしい(outlook)outlookでメルマガを受信した時、最も気になるのは「フォント」です。htmlでフォントを指定していない場合、安定したフォントの表示はあまり痛いできません。Pゴシック、游ゴシック体などになります。メルマガの場合、どこで受信されるかわからないので、font-familyは万全にしましょう。W3’、Windowsではメイリオで表示されます。この時、outlookに置いての行間(line-height)がものすごく開きますが、現在問題の解消法は見つかっていません。Pゴシック’を使いましょう。画像が見切れている(Gmail)画像の右端が切れている、という現象はGmail関連で起こりやすい事象です。解決法は<img>のwidthをちゃんと実寸のpxで指定してあげることで解決します。heightはautoにしましょう。CSSが効いていない(レスポンシブ適用・Gmail)ツールなどを使わなくてもレスポンシブメルマガを作ることが可能です。テンプレートはこちらの記事:【崩れを最小限に!】htmlメルマガのテンプレートしかし、レスポンシブが有効でないメーラーもあります。Gmailはインラインスタイルしか認識しません。下記のように記述していきます。class="fs18">ここの文字は、PCメーラーなら18px<br>スマホなら20px、Gmailでも18pxで表示されます。<br>importantを書いておくのが大事です。</span></td></tr></table>1行あたりの文字数はwidthを文字サイズで割ることで算出できますので、タイトルがレスポンシブでも段落ちしないよう、調整しましょう。チェックポイントは以上となりますが、一番外の枠のテンプレートが下記にまとまっていますので、ぜひご利用ください。