TOP > Colta日記 > 日記130905

「Colta」コルタ日記

■「background-color/imageを検証してみよう!」ー HTMLメールの作り方 第4回 13.9.05

みなさん、こんにちは。こる博士です。
さて、今日はCSSのプロパティ、「background-color」と「background-image」をHTMLメールで検証しています。

background-colorは、16進数のカラーコードやカラーネームを使用して、HTMLの要素に背景色を付けるプロパティで、WEBページを作成する時必ずと言っていいほど使われるプロパティではないでしょうか。
次にbackground-image、CSS内で画像を指定し、HTML要素に背景画像をつけることができます。「背景画像」なので<img>タグではできなかった、画像の上にテキストや別の要素を置くこともできる便利なプロパティです。

今回は下記の様なサンプルメールを作りました。※CSSの指定はインライン
background-colorとbackground-imageの検証用サンプルメール
◆上が「background-color」を使用し、ピンク色を指定しています。
◆下が「background-image」を使用し、青空の画像を指定しています。

実際に配信したメールを見てみましょう。※キャプチャは「windows7/chrome/gmail」
background-colorとbackground-imageの検証結果「gmail」
background-colorは問題なく表示されていますが、background-imageで指定しているはずの青空の画像が見当たりません。※赤枠部分

今回の結果は、background-colorの表示は特に問題ありませんでしたが、background-imageは検証した11のメールソフトの中でも約半数のメールソフトで対応していないことがわかりました。
※検証結果の詳細は下記の一覧をご覧ください。

よって今回は、
残念ながらHTMLメールにbackground-imageの使用は諦めましょう。無念(T_T )

となりました。
HTMLメール、、なかなか奥深いですな。
次回はテキスト周りのプロパティでも検証してみます。

■メールソフト

Becky outlook2007 outlook2010 outlook express windows Live メール thunderbird
background
-color
background
-image
× ×
■Webメール
yahoo outlook.com
(旧hotmail)
gmail
IE9 chrome Firefox IE9 chrome Firefox IE9 chrome Firefox
background
-color
background
-image
× × × × × ×
■スマホ(gmailで検証)
iPhone5 galaxy nexus(android)
background
-color
background
-image
×


さて、今週もあと1日!週末に向けてラストスパートこる。
また来週〜
(こる博士)

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

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

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

[インタビュー] 株式会社監査と分析様 メルマガの企画・編集は、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」
ソーシャルブックマーク