TOP > Colta日記 > 日記131101

「Colta」コルタ日記

■「文章(テキスト)の流し込みも要チェックこる。」-HTMLメールの作り方 第7回 13.11.01

みなさまこんにちは、こる博士です。

突然ですが、HTMLメールを作っていて、同じ量の文章(テキスト)を流し込んでいるのに、メールソフトによってせっかく作ったHTMLメールのレイアウトが崩れる?!なんて事ないですか?!

その原因は、メールソフトやブラウザ(WEBメールの場合)によって書体・文字間余白・行間余白の違いによって起こります。

下のサンプルHTMLメールを見てください。
HTMLメール 文章の流し込みサンプルメール
上が「Outlook2010」に配信したHTMLメール、下が「Yahooメール BETA」に送ったHTMLメールです。文面はまったく同じ内容で2つのメーラーに送っていますが、(1)の文章の終了点に注目してください。

2つのメールでは著しく文章の終了点が異なるのがわかります。(2)Yahooメールでは文章の最終行と同じ行内に「詳しくはこちら」のボタンも配置されていますが、(3)「Outlook2010」では最終行内に入りきらずに改行が入り、次の行へ送られてしまっています。

これは、サンプルメールからもわかる通り、文字間の余白が「Outlook2010」の方が広く、「Yahooメール BETA」よりも文章の流し込み範囲を必要とする為です。

別のメールソフト(*)でも表示の確認をしてみましたが、一番大きなズレがあったのが「Yahooメール BETA」でした。

(*)
・Becky
・Outlook2007
・Outlook2010
・Outlook Express
・Windows Live メール
・Thunderbird
・gmail
・Outlook.com(旧hotmail)

もし、Yahooメールに合わせてレイアウト調整をしていたら・・・
最後の最後で他のメールソフトで確認して、がっくり。。 なんて事が起きてしまうかもしれません。

今回の回避策としては、文章の終了点に影響を受けないよう、下記の通り予め一段下の行へレイアウトするのが懸命です。 いかかでしょうか?
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」
ソーシャルブックマーク