SendgridテンプレートCSSは、私は次のテンプレートを作るためにsendgrid使用している

を無視されます私はそれがCSSと画像の両方から取り除かれた私の電子メールを受け取る。SendgridテンプレートCSSは、私は次のテンプレートを作るためにsendgrid使用している

それは次のようになります。

私はそのいくつかの設定が見つからないイムしかし、私はどの知らないと思います。誰か助けてくれますか？

テンプレート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" data-dnd="true"> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" /> 
    <!--[if !mso]><!--> 
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" /> 
    <!--<![endif]--> 

    <!--[if (gte mso 9)|(IE)]><style type="text/css"> 
    table {border-collapse: collapse;} 
    table, td {mso-table-lspace: 0pt;mso-table-rspace: 0pt;} 
    img {-ms-interpolation-mode: bicubic;} 
    </style> 
    <![endif]--> 
    <style type="text/css"> 
    body { 
    color: #000000; 
    } 
    body a { 
    color: #0071cb; 
    text-decoration: none; 
    } 
    p { margin: 0; padding: 0; } 
    table[class="wrapper"] { 
    width:100% !important; 
    table-layout: fixed; 
    -webkit-font-smoothing: antialiased; 
    -webkit-text-size-adjust: 100%; 
    -moz-text-size-adjust: 100%; 
    -ms-text-size-adjust: 100%; 
    } 
    img[class="max-width"] { 
    max-width: 100% !important; 
    } 
    @media screen and (max-width:480px) { 
    .preheader .rightColumnContent, 
    .footer .rightColumnContent { 
     text-align: left !important; 
    } 
    .preheader .rightColumnContent div, 
    .preheader .rightColumnContent span, 
    .footer .rightColumnContent div, 
    .footer .rightColumnContent span { 
     text-align: left !important; 
    } 
    .preheader .rightColumnContent, 
    .preheader .leftColumnContent { 
     font-size: 80% !important; 
     padding: 5px 0; 
    } 
    table[class="wrapper-mobile"] { 
     width: 100% !important; 
     table-layout: fixed; 
    } 
    img[class="max-width"] { 
     height: auto !important; 
    } 
    a[class="bulletproof-button"] { 
     display: block !important; 
     width: auto !important; 
     font-size: 80%; 
     padding-left: 0 !important; 
     padding-right: 0 !important; 
    } 
    // 2 columns 
    #templateColumns{ 
     width:100% !important; 
    } 

    .templateColumnContainer{ 
     display:block !important; 
     width:100% !important; 
     padding-left: 0 !important; 
     padding-right: 0 !important; 
    } 
    } 
    </style> 
    <style> 
    body, p, div { font-family: arial,sans-serif; } 
</style> 
    <style> 
    body, p, div { font-size: 14px; } 
</style> 
</head> 
<body yahoofix="true" style="min-width: 100%; margin: 0; padding: 0; font-size: 14px; font-family: arial,sans-serif; color: #000000; background-color: #0071CB; color: #000000;" data-attributes='%7B%22dropped%22%3Atrue%2C%22bodybackground%22%3A%22%230071CB%22%2C%22bodyfontname%22%3A%22arial%2Csans-serif%22%2C%22bodytextcolor%22%3A%22%23000000%22%2C%22bodylinkcolor%22%3A%22%230071cb%22%2C%22bodyfontsize%22%3A14%7D'> 
    <center class="wrapper"> 
    <div class="webkit"> 
     <table cellpadding="0" cellspacing="0" border="0" width="100%" class="wrapper" bgcolor="#0071CB"> 
     <tr><td valign="top" bgcolor="#0071CB" width="100%"> 
     <!--[if (gte mso 9)|(IE)]> 
     <table width="600" align="center" cellpadding="0" cellspacing="0" border="0"> 
     <tr> 
      <td> 
      <![endif]--> 
      <table width="100%" role="content-container" class="outer" data-attributes='%7B%22dropped%22%3Atrue%2C%22containerpadding%22%3A%220%2C0%2C0%2C0%22%2C%22containerwidth%22%3A600%2C%22containerbackground%22%3A%22%23FFFFFF%22%7D' align="center" cellpadding="0" cellspacing="0" border="0"> 
       <tr> 
       <td width="100%"><table width="100%" cellpadding="0" cellspacing="0" border="0"> 
        <tr> 
        <td> 
        <!--[if (gte mso 9)|(IE)]> 
         <table width="600" align="center" cellpadding="0" cellspacing="0" border="0"> 
         <tr> 
          <td> 
          <![endif]--> 
           <table width="100%" cellpadding="0" cellspacing="0" border="0" style="width: 100%; max-width:600px;" align="center"> 
           <tr><td role="modules-container" style="padding: 0px 0px 0px 0px; color: #000000; text-align: left;" bgcolor="#FFFFFF" width="100%" align="left"> 
            <table border="0" cellpadding="0" cellspacing="0" align="center" width="100%" style="display:none !important; visibility:hidden; opacity:0; color:transparent; height:0; width:0;" class="module preheader preheader-hide" role="module" data-type="preheader"> 
    <tr><td role="module-content"><p></p></td></tr> 
</table> 
<table class="module" role="module" data-type="wysiwyg" border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;" data-attributes='%7B%22dropped%22%3Atrue%2C%22padding%22%3A%220%2C0%2C0%2C0%22%2C%22containerbackground%22%3A%22%23ffffff%22%7D'> 
<tr><td role="module-content" style="padding: 0px 0px 0px 0px;" bgcolor="#ffffff"><div>&lt;%body%&gt;</div></td></tr></table> 
<table border="0" cellpadding="0" cellspacing="0" align="center" width="100%" class="module wrapper" role="module" data-type="imagetext" data-attributes='%7B%22dropped%22%3Atrue%2C%22imagebackground%22%3A%22%23ffffff%22%2C%22imagemargin%22%3A%220%2C0%2C0%2C0%22%2C%22textbackground%22%3A%22%23ffffff%22%2C%22textmargin%22%3A%220%2C0%2C0%2C0%22%2C%22imagealignment%22%3A%22left%22%7D'> 
    <tr> 
    <td> 
     <table border="0" cellpadding="0" cellspacing="0" width="100%"> 
     <tr role="module-content"> 
      <td align="center" valign="top" width="50%" height="100%" class="templateColumnContainer" bgcolor="#ffffff" > 
      <table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%"> 
       <tr> 
       <td class="leftColumnContent" role="column-one" height="100%" style="height:100%;width:50%; padding: 0px 0px 0px 0px;"><table role="module" data-type="image" border="0" align="center" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;" class="wrapper" data-attributes='%7B%22child%22%3Atrue%2C%22link%22%3A%22%22%2C%22width%22%3A%22250%22%2C%22height%22%3A%22333%22%2C%22imagebackground%22%3A%22%23ffffff%22%2C%22url%22%3A%22https%3A//marketing-image-production.s3.amazonaws.com/uploads/e4f73dd0d8cd27c174bae4dce1f04e4db74721c83cfd297559428dceb682cd79f2b565aa0bcacfb7175b27be1b4d5d10f112847379aa271aeb56760ad33e36c3.jpg%22%2C%22alt_text%22%3A%22%22%2C%22dropped%22%3Atrue%2C%22imagemargin%22%3A%220%2C0%2C0%2C0%22%2C%22alignment%22%3A%22%22%2C%22responsive%22%3Afalse%7D'> 
<tr> 
    <td style="font-size:6px;line-height:10px;background-color:#ffffff;padding: 0px 0px 0px 0px;" valign="top" align="" role="module-content"> 

    <img class="max-width" width="250" height="333" src="https://marketing-image-production.s3.amazonaws.com/uploads/e4f73dd0d8cd27c174bae4dce1f04e4db74721c83cfd297559428dceb682cd79f2b565aa0bcacfb7175b27be1b4d5d10f112847379aa271aeb56760ad33e36c3.jpg" alt="" border="0" style="display: block; color: #000; text-decoration: none; font-family: Helvetica, arial, sans-serif; font-size: 16px; " /> 

</td> 
</tr> 
</table></td> 
       </tr> 
      </table> 
      </td> 
      <td align="center" valign="top" width="50%" height="100%" class="templateColumnContainer" bgcolor="#ffffff" > 
      <table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%"> 
       <tr> 
       <td class="rightColumnContent" role="column-two" height="100%" style="height:100%;width:50%; padding: 0px 0px 0px 0px;"><table class="module" role="module" data-type="text" border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" style="table-layout: fixed;" data-attributes='%7B%22dropped%22%3Atrue%2C%22child%22%3Atrue%2C%22padding%22%3A%220%2C0%2C0%2C0%22%2C%22containerbackground%22%3A%22%23ffffff%22%7D'> 
<tr> 
    <td role="module-content" valign="top" height="100%" style="padding: 0px 0px 0px 0px;" bgcolor="#ffffff"><div>Hello world</div> </td> 
</tr> 
</table> 
</td> 
       </tr> 
      </table> 
      </td> 
     </tr> 
     </table> 
    </td> 
    </tr> 
</table> 
<table border="0" cellpadding="0" cellspacing="0" align="center" width="100%" role="module" data-type="columns" data-attributes='%7B%22dropped%22%3Atrue%2C%22columns%22%3A2%2C%22padding%22%3A%220%2C0%2C0%2C0%22%2C%22cellpadding%22%3A0%2C%22containerbackground%22%3A%22%22%7D'> 
    <tr><td style="padding: 0px 0px 0px 0px;" bgcolor=""> 
    <table class="columns--container-table" border="0" cellpadding="0" cellspacing="0" align="center" width="100%"> 
     <tr role="module-content"> 
     <td style="padding: 0px 0px 0px 0px" role="column-0" align="center" valign="top" width="50%" height="100%" class="templateColumnContainer column-drop-area empty"> 

</td><td style="padding: 0px 0px 0px 0px" role="column-1" align="center" valign="top" width="50%" height="100%" class="templateColumnContainer column-drop-area "> 
    <table class="module" role="module" data-type="button" border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;" data-attributes='%7B%22dropped%22%3Atrue%2C%22borderradius%22%3A6%2C%22buttonpadding%22%3A%2212%2C18%2C12%2C18%22%2C%22text%22%3A%22Your%20Bulletproof%20Button%22%2C%22alignment%22%3A%22center%22%2C%22fontsize%22%3A16%2C%22url%22%3A%22%22%2C%22height%22%3A%22%22%2C%22width%22%3A%22%22%2C%22containerbackground%22%3A%22%23ffffff%22%2C%22padding%22%3A%220%2C0%2C0%2C0%22%2C%22buttoncolor%22%3A%22%231188e6%22%2C%22textcolor%22%3A%22%23ffffff%22%2C%22bordercolor%22%3A%22%231288e5%22%7D'> 
<tr> 
    <td style="padding: 0px 0px 0px 0px;" align="center" bgcolor="#ffffff"> 
    <table border="0" cellpadding="0" cellspacing="0" class="wrapper-mobile"> 
     <tr> 
     <td align="center" style="-webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; font-size: 16px;" bgcolor="#1188e6"> 
      <a href="" class="bulletproof-button" target="_blank" style="height: px; width: px; font-size: 16px; line-height: px; font-family: Helvetica, Arial, sans-serif; color: #ffffff; padding: 12px 18px 12px 18px; text-decoration: none; color: #ffffff; text-decoration: none; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; border: 1px solid #1288e5; display: inline-block;">Your Bulletproof Button</a> 
     </td> 
     </tr> 
    </table> 
    </td> 
</tr> 
</table> 

</td> 
     </tr> 
    </table> 
    </td></tr> 
</table><table border="0" cellpadding="0" cellspacing="0" align="center" width="100%" class="module footer" role="module" data-type="footer" data-attributes='%7B%22dropped%22%3Atrue%2C%22columns%22%3A1%2C%22padding%22%3A%2210%2C5%2C10%2C5%22%2C%22containerbackground%22%3A%22%23ffffff%22%7D'> 
    <tr><td style="padding: 10px 5px 10px 5px;" bgcolor="#ffffff"> 
    <table border="0" cellpadding="0" cellspacing="0" align="center" width="100%"> 
     <tr role="module-content"> 

     <td align="center" valign="top" width="100%" height="100%" class="templateColumnContainer"> 
      <table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%"> 
      <tr> 
       <td class="leftColumnContent" role="column-one" height="100%" style="height:100%;"><table class="module" role="module" data-type="text" border="0" cellpadding="0" cellspacing="0" width="100%" style="table-layout: fixed;" data-attributes='%7B%22dropped%22%3Atrue%2C%22child%22%3Afalse%2C%22padding%22%3A%220%2C0%2C0%2C0%22%2C%22containerbackground%22%3A%22%23ffffff%22%7D'> 
<tr> 
    <td role="module-content" valign="top" height="100%" style="padding: 0px 0px 0px 0px;" bgcolor="#ffffff"><div style="font-size:12px;line-height:150%;margin:0;text-align:center;"> 
    This email was sent by: [Sender_Name] [Sender_Address], [Sender_City] [Sender_State] [Sender_Zip] 
</div> 
<div style="font-size:12px;line-height:150%;margin:0;text-align:center;"> 
    To unsubscribe click: <a href="[Unsubscribe]">here</a> 
</div></td> 
</tr> 
</table> 
</td> 
      </tr> 
      </table> 
     </td> 

     </tr> 
    </table> 
    </td></tr> 
</table> 

           </tr></td> 
           </table> 
          <!--[if (gte mso 9)|(IE)]> 
          </td> 
         </td> 
         </table> 
        <![endif]--> 
        </td> 
        </tr> 
       </table></td> 
       </tr> 
      </table> 
      <!--[if (gte mso 9)|(IE)]> 
      </td> 
     </tr> 
     </table> 
     <![endif]--> 
     </tr></td> 
     </table> 
    </div> 
    </center> 
</body> 
</html>

出典

2016-06-15 Marc Rasmussen

あなたは私たちにhtmlとcssのコードを表示できますか？ – CENT1PEDE

JSYK電子メールクライアントは、分離されたCSSファイルを読み込まないでください。インラインCSSでなければなりません。 – CENT1PEDE

@TheGreenFoxx Iveはhtmlを追加しました –

あなたのコードの問題は、電子メールクライアントでは、埋め込まれたCSSをサポートしていません。したがって、必要なスタイルはすべてタグとインラインである必要があります。また、醜いかもしれませんが、電子メールテンプレートをレイアウトする最善の方法は、テーブルを使用することです。

ただし、この問題を解決するのに役立つものがいくつかあります。

TIPS

これは動作しません。

<style media="screen"> 
    h1{ 
     color: red; 
    } 
</style> 

<h1>I like turtles</h1>

これは動作します：

<h1 style="color:red;">I like turtles</h1>

HELPFUL SOURCES

をあなたが知っているし、これを読むことができます電子メールテンプレートの作成について

Source 2

Source 1

インライン化

Zurb's email inliner

これはすべて私が言うことができる、私はあなたがどこかにあなたを得ることを願っています。幸運:)

出典

2016-06-15 12:04:03 CENT1PEDE

なぜsendgrids builderがCSSをそのようにするのか尋ねることはできますか？あなたが知っていれば:) –

それは、それをやっている送信グリッドビルダーではありません、それは電子メールクライアント自体です@MarcRasmussen – CENT1PEDE

しかし、ビルダーを使用して上記のHTMLを作成します –

SendgridテンプレートCSSは、私は次のテンプレートを作るためにsendgrid使用している

答えて

関連する問題