2013-02-01 8 views
10

Outlook用のHTML署名メールを作成する際に問題があります。Outlook 2010に署名のスタイルタグが含まれていません

私は署名の前にスタイルタグを持っており、応答性のあるメールのためのメディア幅を追加しています。

<style type="text/css"> 
div, p, a, li, td { -webkit-text-size-adjust:none; } 

table { 
min-width:650px; 
} 

@media only screen and (max-device-width: 480px) { 
td[class=hidden-phone] { 
    width: 0px !important; 
    display: none !important; 
    overflow: hidden !important; 
    float: left !important; 
} 
td[class=description] { 
    width: 100% !important; 
} 

td[class=visible-phone] { 
    display: block !important; 
    width: auto !important; 
    height: auto !important; 
    overflow: visible !important; 
    float:none !important; 
} 
table { 
    min-width: auto !important; 
} 
} 
</style> 

<table width="100%" style="font-family:'arial';"> 
<tr> 
<td colspan="4" width="100%" style="height:10px;border-bottom:2px solid #96999e;height:0px;">&nbsp;</td> 
</tr> 
<tr> 
<td style="padding:10px;width:80px;min-width:80px;"><img src="http://urbanangles.com/fileserver/gallery/[[ID]]_original.png" /></td> 
<td class="description" valign="bottom" style="padding:10px 0 10px 10px;width:170px;color:#111;min-width:170px;line-height:11px;"> 
    <span style="font-size:11px"><strong>[[NAME]]</strong></span><br/> 
    <span style="font-size:11px;color:#007dc3;">[[TITLE]]</span><div style="margin-bottom:5px;"></div> 
    <span style="font-size:9px;">A Studio</span><br/> 
    <span style="font-size:9px;">10 Somewhere St, Suburb, STA&nbsp;1234</span><br/> 
    <span style="font-size:9px;margin-right:10px;">D&nbsp;&nbsp;</span><span style="font-size:9px;">[[DIRECT]]</span><br/> 
    <span style="font-size:9px;margin-right:10px;">P&nbsp;&nbsp;</span><span style="font-size:9px;">[[PHONE]]</span><br/> 
    <span style="font-size:9px;margin-right:9px;">M&nbsp;&nbsp;</span><span style="font-size:9px;">[[MOBILE]]</span><br/> 
    <span style="font-size:9px;margin-right:10px;">E&nbsp;&nbsp;</span><span style="font-size:9px;"><a href="mailto:[[EMAIL]]" style="color:#111;text-decoration:none;">[[EMAIL]]</a></span><div style="margin-bottom:5px;height:0px;"></div> 
    <span style="font-size:11px"><strong><a style="color:#111;text-decoration:none;" href="http://www.examples.com">www.examples.com</a></strong></span><br/> 
</td> 
<td class="hidden-phone" style="width:100%;"></td> 
<td class="hidden-phone" valign="bottom" style="padding:10px 10px 10px 0;width:360px;min-width:360px;"><span style="margin-right:15px;"><a href="http://www.facebook.com/urbanangles" style="margin-right:3px;"><img src="http://william.uadev.com.au/img/facebook.jpg" /></a>&nbsp;<a href="http://www.twitter.com/urban_angles"><img src="http://william.uadev.com.au/img/twitter.jpg" /></a></span>&nbsp;&nbsp;<a href="http://www.urbanangles.com"><img src="http://william.uadev.com.au/img/logo.jpg" /></a> </td> 
</tr> 
<!--[if !mso 9]><!--> 
<tr> 
<td colspan="1" width="100%" class="visible-phone" style="max-height:0;display:none;height:0;overflow:hidden;width:0;float:left"> 
    <span style="margin-left:10px;margin-right:25px;"> 
    <a href="http://www.facebook.com/examples" style="margin-right:5px;"><img src="http://william.uadev.com.au/img/facebook.jpg" /></a> 
    <a href="http://www.twitter.com/examples"><img src="http://william.uadev.com.au/img/twitter.jpg" /></a></span> 
</td> 
<td colspan="3" width="100%" class="visible-phone" style="max-height:0;display:none;height:0;overflow:hidden;width:0;float:left"> 
    <a href="http://www.urbanangles.com"><img src="http://william.uadev.com.au/img/logo" style="width:80%;margin-left:8px;" /></a> 
</td> 
</tr> 
<!--<![endif]--> 
<tr><td colspan="4" width="100%" style="height:10px;border-top:2px solid #96999e;"></td> </tr> 
</table> 

<p style="font-size:11px;font-family:'arial';margin:0 0 5px 0;padding:0"><i>Please consider the environment before printing this email.</i></p> 

<p style="font-size:9px;font-family:'arial';color:#999;margin:0 0 5px 0;padding:0">This email and any attachment(s) is intended only for the exclusive and confidential use of the addressee(s). If you are not the intended recipient, any use, interference with, disclosure or copying of this material is unauthorised and prohibited. If you have received this message in error, please notify the sender by return email immediately and delete the message from your computer without making any copies. [[COMPANY]] does not guarantee the integrity of any emails or attached files.</p> 

アップルメールで問題なく動作しています。しかし、見通しは私のhtmlには満足していないようです。 outlookからのすべての電子メールは、私のhtmlがiPhoneで奇妙に見えるようにするスタイルタグを持っていません。

私の質問:

スタイルタグは私の電子メールに含まれていないのはなぜ
  1. ?私が知っていることから、それはOutlookでサポートされています。 ref here

  2. 私ができることはありますか?私はiPhoneで反応的な電子メールの仕事をしたいと思うし、もし私がApple Mailからそれを送るなら、それが働いていることを知っている。

乾杯、 ウィル

+0

htmlも提供できますか? – samanthasquared

+0

#1で提供したドキュメントから、OutlookはCSSを宣言する方法をサポートしていません。 E [foo = "bar"] vs E.foo – samanthasquared

答えて

1

スタイルタグがあなたの電子メールのコードで表示されていない場合、それは頭の中ではないので、それはあるかもしれません。これがOutlookに必要なのかどうかはわかりませんが、これが削除されている可能性があります。

+0

返事をありがとう。しかし、署名から頭にスタイルを追加することは可能ですか?私はいくつかの異なる方法を試みましたが、運がありません。 –

+0

あなたの電子メールの上部にいくつかのコードを入れてみることもできますが、それは署名にはなりません。私はあなたが残念なことに失っている戦いに戦っているかもしれないと思います。 – John

1

<style>タグが(多分Outlookが同じことをやっている?)、Gmailなどのいくつかの電子メールクライアントから取り除かれる

代わりに、あなたは、インラインスタイルを使用する必要があります。あなたが引用された同じWebサイトから

、スタイルを使用するためのガイドライン:http://www.campaignmonitor.com/resources/will-it-work/guidelines/

あなたはインラインスタイルを持っているあなたのsignitureを変換するhttp://premailer.dialect.ca/を使用し、その自由することができます:)

+0

こんにちは、答えに感謝します。私はhtmlでインラインスタイルを使用しました。しかし、私はメディアクエリを必要とする会社のための反応的な署名が必要です。私は(または知っている)メディアクエリがインラインスタイルとしてアタッチできるとは思わない。私はすべての電子メールクライアントではうまくいかないことを理解していますが、上記のように私はIOSデバイスだけに関心があります。 –

+0

それはうまくいくはずです、それを試してみて、私たちに何が起こるか教えてください –

0

あなたは常にインラインを使用する必要がありますこれは、さまざまなクライアントとの互換性が最も高いHTML Eメールのスタイルです。別のCSSブロックほどいいわけではないことは分かっていますが、それはそうです。

関連する問題