web-dev-qa-db-ja.com

Outlook 2007は、HTMLメールのリンクスタイルを変更して、HotmailやGmailなどに送信するときに青い下線を付けます。修正はありますか？

http://www.campaignmonitor.com/templates/ から取得したHTMLメールテンプレートを使用しています。また、HTMLテンプレートを使用してメールを送信すると、これまでに経験したすべての例で、すべてのリンクには、恐ろしいデフォルトの青い下線が付けられています。電子メールはOutlook2007を使用して送信されており、Outlookで表示すると問題ありません。ただし、HotmailとGmailでは、テキストの色に関係なく、この青い下線が表示されます。

私は次のようにタグのインラインスタイリングを試しました：

<a href="./" style="color: #E3A216; text-decoration: none;">Mauris commodo hendrerit risus</a>

まったく同じHTMLメールテンプレートコードを使用して、それを自分のhotmailアカウントから別のhotmailアカウントに送信すると、完全に機能します。したがって、私にとってこれはOutlook2007の問題です。

Outlookがhotmailの受信者に送信するHTMLを分析したところ、OutlookがHTMLコードの上にスタイルシートを添付していることがわかりました。これはそれが送るものです：

<style>
.ExternalClass .ecxshape
{;}
</style>

<style>
.ExternalClass p.ecxMsoNormal, .ExternalClass li.ecxMsoNormal, .ExternalClass div.ecxMsoNormal
{margin-bottom:.0001pt;font-size:11.0pt;font-family:'Calibri','sans-serif';}
.ExternalClass a:link, .ExternalClass span.ecxMsoHyperlink
{color:blue;text-decoration:underline;}
.ExternalClass a:visited, .ExternalClass span.ecxMsoHyperlinkFollowed
{color:purple;text-decoration:underline;}
.ExternalClass p.ecxMsoAcetate, .ExternalClass li.ecxMsoAcetate, .ExternalClass div.ecxMsoAcetate
{margin-bottom:.0001pt;font-size:8.0pt;font-family:'Tahoma','sans-serif';}
.ExternalClass span.ecxEmailStyle17
{font-family:'Calibri','sans-serif';color:windowtext;}
.ExternalClass span.ecxBalloonTextChar
{font-family:'Tahoma','sans-serif';}
.ExternalClass .ecxMsoChpDefault
{;}
@page WordSection1
{size:612.0pt 792.0pt;}
.ExternalClass div.ecxWordSection1
{page:WordSection1;}

</style>

.ExternalClassはタグの値を設定しているようですが、私のインラインスタイルは、Outlookが電子メールに追加しているものを上書きしているようには見えません。

ヘッドセクション、さらにはボディセクションでスタイルシートを作成しようとしましたが、これでは何も起こりません。

誰かがこれの修正を知っていますか？下線を削除するか、リンクに指定した色で下線を表示するだけです。

助けてくれる人に感謝します。

htmlcssemailstylesheetoutlook-2007
17
C-g

更新：この回答は2012年の執筆時点では正しかったが、もう機能していないようです。

style属性を持つ<span>タグでテキストをラップします。

また、特に注意するために<font>を使用する必要があります。

例えば：

<a style="color:#E3A216; text-decoration:none;">
  <span style="color:#E3A216;">
    <font color="#E3A216">
      Click me
    </font>
  </span>
</a>
20
Alex

Gmailの青を取り除くには、色を＃000000から＃000001に変更するだけです。 Gmailは、すべての黒いリンクを青色にします。

5
Katy

実際には、inline-stylesがテキストのスタイルを設定する唯一の方法ですが、最良の方法はそれを数回宣言することです。上記のようにFONTタグを使用しても、すべての電子メールクライアントに効果があるわけではありません。

HTMLメールにFONT-tagを使用する正しい方法：

<font face="Arial, Helvetica, sans-serif" size="1" color="#333333" style="font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#333333">Example of styled text.</font>

最良の方法テキストのスタイルを設定するには、次のようにします。

<table cellpadding="0" cellspacing="0" border="0" align="center" width="600">
  <tr>
    <td width="600" bgcolor="#ffffff" align="left" style="font-family:Arial, Helvetica, sans-serif; font-size:13px; color:#333333;">
      <a href="#" style="color:#333333; text-decoration:underline;"><span style="color:#333333;">Example of styled linktext.</span></a>
    </td>
  </tr>
</table>

headに追加のスタイルを追加しました。これはOutlookに適用されます（Gmailには適用されません）。

<style type="text/css">
  a, a:link, a:visited { color:#333333; }
</style>
2
Geert

電子メールテンプレートでは、インラインまたはその他のスタイルを使用しないでください。非推奨のコードはその日の順序であり、フォントの下線は、周囲のテキストのフォント宣言内にすでにある場合でも、リンク自体の周りにフォントの色宣言を（誤って）適用することによって回避されます。例：

<font face="Arial, Helvetica, sans-serif" color="#ffffff" size="2">Some non link text here followed by <a href="http://www.yourlink.com" target="_blank"><font color="#ffffff"><u><em>the text for the link here surrounded by the font style specifically for the link</em></u></font></a> irrespective of the text that surrounds it</font>

楽しい。 HTMLメールは、すべてのメールクライアントを満足させるために構築する必要があるという点で非常に遅れています。

0
Tony Hadley

Outlookの既知のバグは、アンカータグに有効なURLが含まれていない場合、定義されたスタイルが無視される可能性があることです。

0
davidcondrey

この解決策をどこで見つけたかは覚えていませんが、次のCSSをメールの<head>内に配置しました（もちろん、<style>タグで囲みます）。

/*Outlook links visited state fix*/
span.MsoHyperlink { mso-style-priority:99; color:inherit; }
span.MsoHyperlinkFollowed { mso-style-priority:99; color:inherit; }
0
josh1978

問題がOutlookスタイルシートを上書きできないほど単純な場合は、インラインスタイルで!important宣言を試す必要があります。

<a href="./" style="color: #E3A216 !important; text-decoration: none !important;">Mauris commodo hendrerit risus</a>
0
ajcw

私はこの問題に大きな混乱を抱えていましたが、素晴らしい解決策を見つけました。

ホバー状況に特別なスタイルを設定せずにリンクを赤にしたい場合を考えてみましょう。

a:link{color: red}
a:visited{color: red}
a:hover{color: red}
a:active{color: red}

これらの4つのステートメントのいずれかを見逃したり、別の順序で作成したりすると、リンクのスタイルが機能しなくなる可能性があります。 Gmailクライアントでも動作します。

0
Lars Ljungqvist