web-dev-qa-db-ja.com

Outlook 2007以降で機能しない背景画像

ほとんどのメールリーダーで正常に機能するHTMLメールテンプレートを作成しましたが、Outlook 2007、2010、2013で背景画像が表示されません。問題を解決するにはどうすればよいですか？

電子メールのHTMLは次のとおりです。

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>
       <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

     <style type="text/css">

         * {
             padding: 0px;
             margin: 0px;
             border: 0px;
             outline: 0px;

           }

         .ExternalClass {width:100%;} 
         .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} 

         body {-webkit-text-size-adjust:none; -ms-text-size-adjust:none;} 
         body {margin:0; padding:0;} 
         table td {border-collapse:collapse;}   

         img {max-width:100%;}      

     </style>
 </head>

 <body>

     <table width="600" cellpadding="0" cellspacing="0" border="0" style="margin:0px auto;padding:0px;display: block;">
         <tr>
             <td>

                 <table width="97%" cellpadding="0" cellspacing="0" background="http://3.bp.blogspot.com/-cD1FNllXzaw/UXa8tPE_YGI/AAAAAAAAAQs/0GNzMQJ73jU/s1600/pink_bkg.png" style="background-image:url('http://3.bp.blogspot.com/-cD1FNllXzaw/UXa8tPE_YGI/AAAAAAAAAQs/0GNzMQJ73jU/s1600/pink_bkg.png');margin:0px auto;font-family: GothamBold, Tahoma;">
                     <tr>
                          <td bgcolor="#8cb243" style=" width:97%; height:10px;"></td>
                     </tr>
                     <tr>
                         <td align="center" valign="top" style="margin:0px auto;padding-bottom:30px;height:145px; width:581px;">

                          <img src="http://3.bp.blogspot.com/-tQV21MgLHUg/UXa8r4MQXpI/AAAAAAAAAQc/MKgOlDjXPOE/s1600/logo.png" width="223" height="132" alt="logo" style="display:block;"/>

                         </td>
                     </tr>
                     <tr>
                         <td align="center" style="font-size:36px;color:#ffffff;text-transform:uppercase;font-weight:bold;-webkit-text-shadow: 2px 2px 2px #541284;-moz-text-shadow: 2px 2px 2px #541284;text-shadow:2px 2px 2px #541284;margin-bottom:5px;height:25px; width:581px;">Massive 40% discount</td>
                     </tr>
                     <tr>
                         <td align="center" style="font-size:28px;color:#cda6e6 !important;text-transform:uppercase;font-weight:bold;-webkit-text-shadow:2px 2px 2px #541284;-moz-text-shadow:2px 2px 2px #541284;text-shadow:2px 2px 2px #541284;height:15px; width:581px;">on <a href="#" target="_blank" style="color:#cda6e6 !important;font-weight:bold;text-decoration:none;" >the gift you just selected</a></td>
                     </tr>
                     <tr>
                         <td align="center" style="font-size:36px;font-weight:bold;-webkit-text-shadow:2px 2px 2px #541284;-moz-text-shadow:2px 2px 2px #541284;text-shadow:2px 2px 2px #541284;padding-bottom:60px;color:#ffffff;height:20px; width:581px;">for <span style="color:#ffffff !important;">[email protected]!</span></td>
                     </tr>
                 </table>

             </td>
         </tr>
         <tr>
             <td>
                  <table width="100%" cellpadding="0" cellspacing="0" border="0" height="83" background="http://2.bp.blogspot.com/-9VyAxADMv1Q/UXa8rfeT8fI/AAAAAAAAAQU/XmNd44ekFLA/s1600/header_bottom.png" style="background-image:url('http://2.bp.blogspot.com/-9VyAxADMv1Q/UXa8rfeT8fI/AAAAAAAAAQU/XmNd44ekFLA/s1600/header_bottom.png');background-repeat:no-repeat;" >
                     <tr>
                         <td align="center" style="font-family:GothamBold, Tahoma;font-size:14px;text-transform:uppercase;color:#000000;padding-top:20px;font-weight:bold;letter-spacing:1px;">Buy it today to take advantage of this huge discount.</td>
                     </tr>
                     <tr>
                         <td align="center" style="font-family: GothamBold, Tahoma;font-size:18px;color:#7519a3;text-transform:uppercase;font-weight:900;padding-bottom:20px;">Our little secret!</td>
                     </tr>
                  </table>
             </td>
         </tr>
        </table>
     </body>
  </html>
outlookbackground-imagehtml-emailoutlook-2007
15
Joy_S

背景画像のメールリーダーサポート

Outlook 2007以降は、bg画像を表示する2つの方法のみをサポートしています。

  • BodyタグでHTML背景属性を使用する
  • Bodyタグでインライン背景画像スタイルを使用する

どちらの場合も、Outlookは他のメールリーダーとは異なる方法で画像を拡大縮小します。また、bg画像がタイリングするのを防ぐ方法はありません。

したがって、すべての実用的な目的のために、背景画像はさまざまな電子メールリーダーをサポートするためのオプションではありません。代わりに、前景画像（imgタグ）で間に合わせる必要があります。

要素のオーバーレイはオプションではありません

Outlook 2007 +、Gmail、Hotmail、およびYahoo MailはCSSポジショニングをサポートしていません。その結果、前景画像の上にテキスト要素を配置する方法はありません。

電子メールを異なる領域にスライスする場合（通常はHTMLテーブルを使用）、各領域はテキスト要素または前景画像のいずれかです。ただし、同じ領域に両方を含めることはできません（つまり、同じスペースを占有したり重複したりする2つの要素を含めることはできません）。

解決策

上部にテキストのない画像がある領域では、電子メールのその部分を別の前景画像として切り取ることができます。

テキストの上にテキストがある画像の領域には、3つのオプションがあります。

  1. 画像の一部としてテキストを切り取ります。これはメールの使いやすさを損ない、デフォルトで無効になっている画像を持っているユーザーにとっては特に問題です（最初はテキストが表示されないため）。
  2. 背景画像として画像を表示します。Outlook2007+のユーザーには画像が表示されないことを理解してください（グレースフルデグラデーション）。
  3. 電子メールリーダーで背景画像を表示しようとしないでください。

適度に、オプション＃1は通常安全で合理的​​です。しかし、頻繁に使用すると、電子メール内のテキストに対する画像の比率が非常に高くなり、一部のスパムフィルターがトリガーされる可能性があります。オプション＃1を多用する前に、さまざまなスパムフィルターでメールをテストします。

オプション＃2または＃3に進む前に、デザイナーでそれをクリアする必要がある場合があります（どちらかがOutlook 2007+でデザインを妥協するため）。大きな画像では、背景画像はメールをデザインするときに控えめに使用する必要があります。背景画像を使用することの影響を設計者に指摘することが役立つ場合があります。

22
Matt Coughlin

Outlookは、VMLを使用しない限り、bodyタグの背景画像のみをサポートします。 VMLについては、こちらをご覧ください： http://backgrounds.cm/

ここに例があります bodyタグで動作しています。

10
John

これは本当に便利だと思います： http://www.campaignmonitor.com/css/

Outlook 2007-13はbackground-imageプロパティをサポートしていないため、これを解決する良い方法はありません。

個人的な経験に基づく：メールクライアント間で最も一貫したエクスペリエンスを得るために、背景画像を必要としないようにメールを再設計します。

4
BjornJohnson

正しいVMLを使用してこれを行うことができます。以下のコードピースは私に最適です：

<table>
<tr>
<td background="http://fpoimg.com/300x300?text=I%20am%20a%20background%20image" width="300" height="300">
<!--[if gte mso 9]>
<v:image xmlns:v="urn:schemas-Microsoft-com:vml" 
    style='width:300px;height:300px;position:absolute;bottom:0;left:0;border:0;z-index:-3;' 
    src="http://fpoimg.com/300x300?text=I%20am%20a%20background%20image" />
<![endif]-->
<p>Put the rest of your content here</p>
</td>
</tr>
</table>
3
Peter

background-imageは、Android 2.3のOutlookまたはGmailではサポートされていません。参照： http://www.campaignmonitor.com/css/

私は通常background-colorフォールバックとして、または背景画像が必要な場合は、画像のテキスト部分を作成します。

3
samanthasquared

背景画像はOutlook 2007+ではサポートされませんVMLを使用します（ベクターマークアップ言語（VML）は、2次元ベクターグラフィックス用のXMLベースのファイル形式です）。

   <div>
     <!--[if gte mso 9]>
     <v:background xmlns:v="urn:schemas-Microsoft-com:vml" fill="t">
      <v:fill type="tile" src="pink_bkg.png.png" color="#fff"/>
     </v:background>
     <![endif]-->
     <table>
       <tr>
         <td>
         </td>
       </tr>
      </table>
   </div>

ヘルプリンク： http://backgrounds.cm/

Outlook固有/ * Outlook固有のCSSがここに入ります。 * /

「mso 9」はOffice 2000 Outlook 2000-バージョン9 Outlook 2002-バージョン10 Outlook 2003-バージョン11 Outlook 2007-バージョン12 Outlook 2010-バージョン14 Outlook 2013-バージョン15 http://templates.mailchimp.com/development/css/Outlook-conditional-css /

2
Prasanth

このように追加できます：-

開始タグの直後に次を追加します…

<table cellpadding="0" cellspacing="0" border="0" height="92" width="100%">
  <tr>
    <td background="https://i.imgur.com/YJOX1PC.png" bgcolor="#7bceeb" valign="top">
      <!--[if gte mso 9]>
      <v:rect xmlns:v="urn:schemas-Microsoft-com:vml" fill="true" stroke="false" style="mso-width-percent:1000;height:92px;">
        <v:fill type="tile" src="https://i.imgur.com/YJOX1PC.png" color="#7bceeb" />
        <v:textbox inset="0,0,0,0">
      <![endif]-->
      <div>

…そして、終了タグの直前。

      </div>
      <!--[if gte mso 9]>
        </v:textbox>
      </v:rect>
      <![endif]-->
    </td>
  </tr>
</table>
1
Deepak Kumar

2018年10月-Outlook 2016でテスト済み

私のために働いたVMLスニペットで私はチャイムだと思った。 https://medium.com/@ka.robinson82/https-medium-com-ka-robinson82-fargo-email-6907f00fed16 から取得

<! — [if gte mso 9]>
<v:image xmlns:v=”urn:schemas-Microsoft-com:vml” style=”width:525pt; height:348.75pt;” src=”image.jpg" /> 
<v:rect xmlns:v=”urn:schemas-Microsoft-com:vml” fill=”false” stroke=”false” style=”position: relative; width:525pt; height: 161.25pt; top: 187.5pt;”>
    <v:textbox inset=”0,0,0,0"> 
<![endif] 

<!-- Content -->

<!--[if gte mso 9]>   
    </v:textbox>
</v:rect>
<![endif]-->

他のVMLスニペットはある程度機能しましたが、メールを残して戻った後に画像が消えたり、背景がクリックされるまで読み込まれないという問題がありました。

0
Gabe