html電子メールの署名がGmailのインラインCSSを表示しない

電子メールの署名では、電子メールの使用に推奨されるように、カスタムHTMLをインラインCSSで使用しています。html電子メールの署名がGmailのインラインCSSを表示しない

これは署名が見えるようになっているもので、

赤い線は、ちょうど私の個人的な詳細をカバーするために使用されています。

mail signature without styling, both gmail android, gmail web

にはどうすればGmailはCSSで適切に私の署名を表示するのですか？

EDIT：はここでは、コード、コードの厄介なフォーマットのために申し訳ありません

<body style="color: rgb(0, 0, 0); padding: 0; padding-top: 30px; margin: 0; letter-spacing: normal; orphans: auto; text-align: start; text-indent: 0px; text-transform: none; white-space: normal; widows: auto; word-spacing: 0px; -webkit-text-stroke-width: 0px; word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space;"> 

<style> 
.signature { 
    padding-top: 40px; 
    font-weight: 100; 
    word-break: all; 
} 

.vr { 
    float: left; 
    border-right: 1px solid black; 
    height: 138px; 
} 

.text-container { 
    overflow: auto; 
    font-family: sans-serif; 
    color: black; 
    padding-top: 0; 
    text-align: left; 
    padding-left: 28px; 
} 

h1 { 
    margin-left: -2.5px; 
    font-size: 34px; 
    margin-top: 0; 
    margin-bottom: -6px; 
    font-weight: 100; 
} 

.subtitle { 
    font-size: 14px; 
} 

p { 
    font-size: 18px; 
    margin-top: 5px; 
    margin-bottom: 5px; 
} 

a { 
    text-decoration: none; 
    color: black; 
} 

.img { 
    float: left; 
    padding-right: 10px; 
    padding-left: 10px; 
    margin: -38px; 
} 

.contact-secondary { 
    display: none; 
} 

@media only screen and (max-width: 500px) { 
    .signature { 
     padding-left: 15px; 
    } 
    .img { 
     float: none; 
     width: 150px; 
     margin-bottom: -20px; 
     margin-top: -30px; 
     padding: 0; 
    } 
    .text-container { 
     padding-left: 0; 
     margin-top: -10px; 
     border: none; 
    } 
    .vr { 
     display: none; 
    } 
} 

@media only screen and (max-width: 350px) { 
    .contact-secondary { 
     display: inherit; 
    } 
    .contact-main { 
     display: none; 
    } 
    .text-container { 
     padding-left: 0; 
     border: none; 
     margin-top: -10px; 
    } 
    .vr { 
     display: none; 
    } 
    .signature { 
     padding-left: 15px; 
    } 
    .img { 
     padding: 0; 
    } 
    .foot { 
     font-size: 12px; 
    } 
} 

@media only screen and (max-width: 250px) { 
    .img { 
     float: none; 
     width: 80px; 
     margin: -20px; 
     padding: 0; 
    } 
    h1 { 
     font-size: 23px; 
     padding-bottom: 4px; 
     padding-left: 1px; 
    } 
    .subtitle { 
     margin-top: -5px; 
     margin-left: 0px; 
     margin-bottom: -2px; 
     font-size: 10px; 
    } 
    .signature { 
     padding-left: 10px; 
     padding-top: 30px; 
    } 
    p { 
     font-size: 14px; 
    } 
    .text-container { 
     padding-left: 0; 
     border: none; 
     margin-top: 5px; 
    } 
    .contact-secondary { 
     display: inherit; 
    } 
    .contact-main { 
     display: none; 
    } 
    .vr { 
     display: none; 
    } 
    .foot { 
     font-size: 9px; 
    } 
} 

</style> 

<div class="signature"><img class="img" width="200px" src="http://harrypark.io/mail/logo.png" alt="harrypark.io logo"> 
<div class="vr"></div> 
<div class="text-container"> 
    <h1><a href="http://harrypark.io/mail/vcard.vcf">Harry Park</a></h1> 
    <p class="subtitle">Web Designer + Full Stack Developer</p> 
    <div class="contact-main"> 
     <p><a href="http://harrypark.io">harrypark.io</a></p> 
     <p><a href="mailto:MYEMAIL">MYEMAIL</a>&nbsp; |&nbsp; 
      <a href="tel:MYPHONENUM">MYPHONENUM</a></p> 
    </div> 
    <div class="contact-secondary"> 
     <p><a href="http://harrypark.io">harrypark.io</a></p> 
     <p><a href="mailto:MYEMAIL">MYEMAIL</a></p> 
     <p><a href="tel:MYPHONENUM">MYPHONENUM</a></p> 
    </div> 
    <p class="foot">web design&nbsp; |&nbsp; web development</p> 
</div> 
</div> 

</body>

で、stackoverflowのは、それが強大な困難になります。

出典

2016-09-22 harryparkdotio

ので,,あなたの質問は何ですか？ –

申し訳ありません、そのビットを追加することを完全に忘れてしまった！ – harryparkdotio

あなたのhtmlとcssコードを含めることができます –

Gmailでは<style>要素の中にcssをサポートしていないため、スタイル属性を使用してCSSをインライン化する必要があります。参照：https://www.campaignmonitor.com/css/

このツールはあなたを助けるかもしれない：https://templates.mailchimp.com/resources/inline-css/

出典

2016-09-22 02:47:04 joshhunt

応答性の高い電子メール署名が必要な場合は、ベーススタイルをインラインにしてからスタイルタグとして応答する必要がありますか？ – harryparkdotio

完璧！出来た！ありがとうございました！ – harryparkdotio

これは正しいので、 '

html電子メールの署名がGmailのインラインCSSを表示しない

答えて