TOP > Colta日記 > 日記131115

「Colta」コルタ日記

■「あなたのHTMLメールが輪切りになっている可能性。」-HTMLメールの作り方 第8回

13.11.15

こんにちは、こる博士です。
HTMLメールが「輪切り?!」と意味不明なタイトルではじまりましたが、、
早速下記のキャプチャをご確認ください。

これはInternet Explorer9でOutlook.com(旧hotmail)に配信したHTMLメールのキャプチャです。 「隙間」と赤字で書いてあるところに注目してください。
※1枚の画像を<td>で3つに分けてコーディングをしています。
あなたのHTMLメールが輪切りになっている可能性:修正前
スパっと切られたような隙間ができてしまい、せっかく作った画像が「輪切り状態(実際は角切りかも?!笑)」になってしまっています。しかもこの画像に隙間が入ってしまう現象は、ブラウザ上で確認した場合は再現しません。

今回も、各種メールソフト(下記)で画像に隙間ができてしまうか検証してみたところ、WEBメールは全滅でした。

■メールソフト

Becky outlook2007 outlook2010 outlook express windows Live メール thunderbird
画像に隙間

■Webメール
yahoo outlook.com
(旧hotmail)
gmail
IE9 chrome Firefox IE9 chrome Firefox IE9 chrome Firefox
画像に隙間 × × × × × × × × ×

■スマホ(gmailで検証)
iPhone5 galaxy nexus(android)
画像に隙間 × ×

さて、これの原因と解決方法とは?!

まず画像に隙間ができてしまう原因としては、文字サイズや行の高さが影響しています。 それならば、フォントサイズを「0」にしてしまえば良いのです。
<img>を挟んでいる<td>を<td style="font-size: 0;">と変更してもう一度配信してみます。

じゃん!
あなたのHTMLメールが輪切りになっている可能性:修正後
今度は画像に隙間なく表示され、輪切り状態を克服できました!
注意事項としては、1つの<td>の中に画像とテキストが入っている場合、font-sizeを「0」にしてしまうと、テキストが表示されなくなってしまいます。この場合はテキストを別のタグでマークアップし、再度font-sizeを設定する必要があります。

画像だけを<td>マークアップしているのにも関わらず文字サイズや行の高さが影響してしまうとは。。HTMLメール、やっぱりクセのあるやつです。

ただ、今回のような『輪切りHTMLメール』を見かけるも事実なのです。(今日もどこかでありました〜。) せっかくキレイにつくったイメージ画像も、輪切りでは台無しです。くれぐれも、配信前に複数メールソフトでの検証をお忘れなく。

(こる博士)

<< 前の日記へ
前のページに戻る このページのトップへ
  • メルマガノウハウインタビュー
おすすめ記事

[インタビュー] 四季株式会社様 メールアドレス会員数は、他の施策と組み合わせることで、増やすことができる。

[インタビュー] トライコーン株式会社 ソーシャル一括投稿システム「コトシロ」より多くのメディアに情報を発信することで、情報の露出効果が上がります。

[インタビュー] 株式会社監査と分析様 メルマガの企画・編集は、PDCAサイクルを回すこと!

[インタビュー] 株式会社亀屋万年堂様 クーポンの利用率は9%まで上がる!

[インタビュー] 株式会社極楽湯様 クーポンの内容によってメールのクリック率は大きく違う!

[メルマガ担当者] メール配信結果の指標

[メルマガ担当者] PDCAを回せない10の理由と対策


人気コンテンツランキング

メールの署名(シグネチャ)

Coltaオリジナル署名集。

Thunderbird(サンダーバード)の便利なプラグイン・アドオン

サンダーバードの便利なアドオンを厳選して紹介。

ビジネスメールのテンプレート

ビジネスで使いたいメールのサンプルをご紹介します。
最近のColta日記

3/14 [HTMLメール]「コルミのFacebookページ運用メモ 第1回」

2/28 [HTMLメール]「HTMLメール、フォント(書体)の指定はできるコル?」

11/01 [HTMLメール]「文章(テキスト)の流し込みも要チェックこる。」

10/17 [HTMLメール]「<table>にはいろいろリセットが必要なんですっ。」

10/04[HTMLメール]「<img>にはborder="0"を。」

9/05 [HTMLメール]「background-color/imageを検証してみよう!」

8/30 [HTMLメール]「HTMLメールにCSSのheightは使えない?!」

Colta日記一覧はこちら>>

メール配信ASPのトライコーン株式会社 メール配信代行サービス「アイモス」 LMA マーケティングオートメーションはカンタンに! LOOPASS(ルーパス)が広げるビジネスの可能性 代理店様向け キャンペーン運営サービス「IMOSSS(アイモス)」 メールを依頼したい!”PDCA”を回したい方へ PDCAつき文章作成サービス「アイモス」 無料試用版もあります。Salesforceメールアプリ導入実績No.1 営業効率を最大限化させるPardot運用支援 インターネットサービスに関わる担当者のための情報を紹介するブログ「Web Persons」 メールマーケティング辞典 WEBマーケティング用顧客管理システム「クライゼル/KREISEL」
ソーシャルブックマーク