かんばらあい

シナジーマーケティング株式会社［非公式note］HTMLメール作成やWebサイト構築全…

かんばらあい

シナジーマーケティング株式会社［非公式note］HTMLメール作成やWebサイト構築全般をしているフロントエンドです。のんびり気ままにゆるゆるとHTMLメール作成の小ネタを投稿していきます。

3キャリアのHTMLメールの配信について

3キャリア共通ですが基本的にマルチパート配信でHTMLメール、テキストメールの両方を設定してください。 フィーチャーフォンはHTMLメールが見れませんのでテキストメールになります。 【docomo】 iPhoneはメールアプリにて受信されるため、HTMLメールで問題ありません。 Androidはバージョン8以降であればHTMLメールは表示されますが、ドコモメールアプリは独自仕様のため、多少の表示崩れが発生することもあります。 バージョン8より以前のドコモメールアプリはHTM

かんばらあい

    • HTMLメールで背景画像を使う方法

      Outlookではbackgroundで背景画像を指定しても表示されません。 そのため、Outlook用のコードを書かなければなりません。 <table border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#ffffff" style="max-width:600px;line-height:100%;"><tr><td width="600" height="120"><!--[if mso

      かんばらあい

      • 画像の横幅によってHTMLメールの表示が崩れる場合

        通販サイトなどで商品画像などを読み込んでHTMLメールを作成する際に、メールの幅より大きな画像を使用して表示が崩れる事象があります。 例）画像が1000pxの場合 Outlookでは、imgタグに width="100%" style="max-width:600px;" と指定してもCSSが効かないため画像は1000pxで表示されます。 これを解消するには、imgタグに width="600" （メールの幅）を指定しなければなりません。 またスマホ対応（レスポンシブ）

        かんばらあい

        • Gmailアプリの自動サイズ変更について

          Gmailアプリでは自動でサイズ変更によって部分的に文字が大きくなったり小さくなったりします。 それはHTMLメールの組み方によるものなので、一つの大きな<table>タグにまとめることで解決します。 <div>タグで作成される場合もあると思いますが、<div>ごとにサイズ調整されてしまうため見た目がまちまちになってしまいます。 classなどCSSを指定していても意図しないデザインになることがあるため、従来のテーブルコーディングで一つにまとめることをおすすめします。 す

          かんばらあい

        3キャリアのHTMLメールの配信について

        かんばらあい

          HTMLメールのテキストボタンの文字数について

          以前、テキストボタンの作り方を投稿しましたが、文字数には触れていませんでしたのでこちらに記載いたします。 PCとスマホでは横幅が違いますが、基本的にはスマホの最小幅320pxに合わせて作った方が見やすいです。 スマホの場合はボタンの左右に余白を作る場合、横幅300pxのボタンになります。 テキストが折り返さない文字数はフォントサイズが14pxだと、16文字までがちょうどいいです。 なお、16文字以上になれば基本的には折り返しますが（※）PCのOutlookの場合、ボタンの

          かんばらあい

          HTMLメールのテキストボタンの文字数について

          かんばらあい

          HTMLメールでアニメーションGIFを使う場合の注意点

          Outlook2013など一部のメーラーではアニメーションGIFは再生されません。 再生されないメーラーでは、1フレーム目が表示されます。 そのため、1フレーム目に何か表示されるように作成してください。 なお、アニメーションされない場合の対策として、背景画像（background）を指定される方もいますが、Outlook2013では背景画像は表示されませんのでご注意ください。

          かんばらあい

          HTMLメールでアニメーションGIFを使う場合の注意点

          かんばらあい

          HTMLメールの検証範囲について

          今回はHTMLメールの検証範囲についてです。 （今まで特に明記していなかったと思いまして） ●PC Outlook2013、Outlook365、Macメール ●Webサービス Gmail、Yahoo!メール、Outlook ●iPhone メールアプリ、Gmailアプリ、Yahoo!メールアプリ ●Android docomoメールアプリ（Android8.0以上）、auメールアプリ、 Gmailアプリ、Yahoo!メールアプリ 基本的にはHTMLメールに対応して

          かんばらあい

          HTMLメールの検証範囲について

          かんばらあい

          HTMLメールの文字サイズをPCとスマホで変更する

          <style type="text/css"><!--/* スマホ */@media screen and (max-width: 480px) {.f16 { font-size: 14px !important; }}/* PC */@media screen and (min-width: 481px) {.f16 { font-size: 16px !important; }}--></style> HTMLメールの文字サイズをPCとスマホで変更するため、あらかじめ

          かんばらあい

          HTMLメールの文字サイズをPCとスマホで変更する

          かんばらあい

          HTMLメールで区切り線を作成する

          <!-- 区切り線　左右余白なし --><tr><td style="font-size:0;border-bottom:1px solid #cccccc;" height="40"></td></tr><tr><td style="font-size:0;" height="40"></td></tr> 少し前まではCSSが効かないメーラーが多かったですが、現在はCSSでもborderは効くメーラーがほとんどです。 そのため高さのスペーサーにCSSを設定して区切り線を作

          かんばらあい

          HTMLメールで区切り線を作成する

          かんばらあい

          HTMLメールで枠がついたコンテンツエリアを作成する

          <!-- 枠がついたコンテンツ --><tr><td width="20" style="font-size:0;"><img src="img/spacer.gif" alt="" width="10" height="1" style="display:block;"></td><td width="560"><!-- 枠がついたエリアここから --><table border="0" cellpadding="0" cellspacing="0" style="bord

          かんばらあい

          HTMLメールで枠がついたコンテンツエリアを作成する

          かんばらあい

          HTMLメールで背景色がついたコンテンツエリアを作成する

          <!-- 背景色がついたコンテンツエリア --><tr><td width="20" style="font-size:0;"><img src="img/spacer.gif" alt="" width="10" height="1" style="display:block;"></td><td width="560" bgcolor="#dddddd"><!-- 背景色がついたエリアここから --><table border="0" cellpadding="0" ce

          かんばらあい

          HTMLメールで背景色がついたコンテンツエリアを作成する

          かんばらあい

          HTMLメールで枠付きのボタンを作る

          前回と同じく、PCとスマホ共通サイズのボタンになります。 今回は赤枠、白地、赤いテキストのボタンを作成します。 <!-- ボタン --><tr><td width="20" style="font-size:0;"><img src="img/spacer.gif" alt="" width="10" height="1" style="display:block;"></td><td width="560" align="center"><!-- ボタン本体ここから --

          かんばらあい

          HTMLメールで枠付きのボタンを作る

          かんばらあい

          HTMLメールでテキストボタンを作る

          PCとスマホ共通サイズのボタンを作成する方法です。 スマホの最小幅320pxに合わせて、横幅300pxのボタンを作成します。 <!-- ボタン --><tr><td width="20" style="font-size:0;"><img src="img/spacer.gif" alt="" width="10" height="1" style="display:block;"></td><td width="560" align="center"><!-- ボタン本体

          かんばらあい

          HTMLメールでテキストボタンを作る

          かんばらあい

          HTMLメールのスペーサー（spacer.gif）について

          横の余白を確保する際はスペーサー（spacer.gif）を使います。 PC用の幅は<td>タグのwidthで指定します。 そして、スマホで確実に確保したい幅を<img>タグのwidthで指定してください。 下記の例では、PCは20px、スマホは10pxずつ確保されるようにしています。 <tr><td width="20" style="font-size:0;"><img src="img/spacer.gif" alt="" width="10" height="1" s

          かんばらあい

          HTMLメールのスペーサー（spacer.gif）について

          かんばらあい

          HTMLメールの画像幅について

          <!-- 横幅いっぱいの画像 --><tr><td width="600" style="font-size:0;"><img src="img/main.jpg" width="600" alt="" style="display:block;width:100%;max-width:600px;height:auto;"></td></tr><tr><td style="font-size:0;"><img src="img/spacer.gif" alt="" widt

          かんばらあい

          HTMLメールの画像幅について

          かんばらあい

          HTMLメールのコンテンツ幅について

          <!-- コンテンツエリア --><table border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#ffffff" style="max-width:600px;line-height:100%;"><!-- ここにコンテンツを入れていきます。 --></table> はじめに画像やテキストを入れる大枠の<table>を用意します。 <table>タグにはwidthは指定しないでください。

          かんばらあい

          HTMLメールのコンテンツ幅について

          かんばらあい