web-dev-qa-db-ja.com

HTMLメールリンクの色のジレンマ

HTMLメールをデザインしましたが、次の問題があります。まず、デザイン全体が青色に基づいているため、青色のテキストは読み手/ユーザーが読むことができず、テキストは白色でなければなりません。 GMAILは電話番号とリンクを自動的に青色にしますが、主な問題はMicrosoft Outlook OWAです。

GMAILの電話番号とリンクの色を修正するために、次のことを行いました。

<a style="color: #FFFFFF; 
   text-decoration: none" 
   href="#/">
       <span style="color: #FFFFFF; 
                    text- decoration: none">
           1800-000-0000
       </span>
</a>

これは、GMAILおよび他のすべてのクライアントで完全に機能しますが、前述したように、ほとんどのクライアントはOutlookまたはMS OWA（Outlook Web Application）を使用します。

OWAは、インラインスタイルで設定した色を無視し、リンクをデフォルトの青にします。これは、電子メールがプレビューされるときにのみ発生します。実際にメールを開くと、すべてのスタイルが作動します。

私のジレンマは、どうすればいいですか？私はすでに希望をあきらめましたが、これは私の最後の手段です。 Outlook OWAのリンクの色を上書きする方法はありますか？ ！IMPORTANT、FONTタグ、5度のネストを使用しました。

ここでの問題はOutlookではなくOWAです。

以下は、Chromeで要素を調べたときのスクリーンショットです。

Screenshot of Google Chrome Developer Panel

そして、ここにFFがあります：

enter image description here

何か案は？

お願いします！

htmlcsshtml-emailemail-client
19
Asynchronous

OWAの一部のバージョンではまだ尊重されていますが、<font>宣言を含めることで成功することがわかります。これは、現代のHTMLでは非推奨です。

<a style="color: #FFFFFF; text-decoration: none" href="#/"><span style="color: #FFFFFF; text- decoration: none"><font color="#FFFFFF">1800-000-0000</font></span></a>
38
estaples

Outlook Web App（OWA）リンクの色は、インラインスタイルから変更されます。 OWAでリンクの色を変更/修正しようとして数時間を費やし、作成中のメールテンプレートのインラインスタイルを削除しました。 +タグを使用してさまざまな手法を試しましたが、成功しませんでした。最後に、動作するように見える何かを見つけました：

      <a href="http://www.somewebsite.com.au/" target="_blank" style="color:#FFFFFF;">White Link</a>

変更後：

      <a href="http://www.somewebsite.com.au/" target="_blank" style="color:#FFFFF6;">White Link (almost)</a>

これまでのところ順調です。

さらなるテスト。 <td style="color:#FFFFF6;">にわずかにオフの色を付け、<a href="http://www.somewebsite.com.au/" target="_blank" style="color:#FFFFFF;">に正しい色を付けます

8
Kerry Smyth

アンカータグに有効なURLが含まれていない場合、そのタグのスタイル設定は無視されるというOutlookの既知のバグです。

Outlookは！importantの接尾辞が付いたタグを完全に無視するため、！importantを追加する傾向はこの場合にも役立ちます。

アンカータグにURLを配置するか、アンカー内のspanタグでテキストをラップして、そこにスタイリングを配置します。

7
davidcondrey

aタグ内にテーブルを置くことでこれを修正できました。

<a href="">
    <table>
        <tr>
            <td style="color: #FFFFFF">Link text here</td>
        </tr>
    </table>
</a>
4
kavun

図。 Outlookがそれらをサポートしていないためにクールな新しい電子メールトリックを使用できないことに慣れてきたちょうどそのとき、Microsoftはまったく新しいバグがたくさんあるOWAを投げます。

display:inline-blockをリンクに適用することで、ひどいリンクスタイルを回避しました。これは少なくとも下線を取り除きます。理由はわかりません。

リンクを親要素と同じ色にスタイルしようとすると、別のバグに遭遇しました。何らかの理由で、親要素の色を変えると修正されました。通常、1文字上または下に変更すると、かなり近い色になります。

<td style="color:#CCCCCD">
<a href="http://mylink" style="display:inline-block; color:#CCCCCC">Link</a>
</td>
1
Bill Malcolm

以下を使用しましたが、Outlook 2007、2010、2013、およびOutlook.comで正常に機能しました。 OWAですぐに確認します。

#outlookLink {text-decoration: none; color: #ffffff !important}
<a href="" id="outlookLink" name="Anchor" style="text-decoration: none; color: #ffffff !important;">Your text and link here.</a>
1
Orlando Rodriguez

このスレッドを見て、上記のオプションを試しました。 TDハックは16進コードの変更で機能しましたが、誰かが試してみたいと思うなら、私はちょうど素敵な解決策に出くわしました：

<div style="text-decoration: none;">
<a href="LINK" style="display: inline-block; color: #878f93; text-decoration: none;">LINK TEXT</a>
</div>

DIVをtext-decoration NONEに設定することは、OWAによってサポートされていました。私は個人的に下線を削除するように頼まれたので、私の場合は完璧です。

私は人々がこれが役に立つことを願っています。ソリューションを追加してくれた皆さんにも感謝します。

0
pitzki

HTMLメールを送信する際のベストプラクティスは、古いHTML3およびHTML4を使用することです。電子メールクライアントはCSS2以降ではうまく動作しません。インラインCSSの方がはるかに優れています。

の代わりに：

<a style="color: #FFFFFF; text-decoration: none" href="#/">
 <span style="color: #FFFFFF; text- decoration: none">1800-000-0000</span>
</a>

ちなみに、この行には構文エラーがあります。各css宣言の後、;

修正済み：

<a style="color: #FFFFFF; text-decoration: none;" href="#">
  <span style="color: #FFFFFF; text- decoration: none;">1800-000-0000</span>
</a>

これを試して：

<a color="#FFFFFF" text-decoration="none" href="#">
  1800-000-0000
</a>

DOCTYPEでHTMLバージョンを指定することを忘れないでください。

私はこの状況の両側で働いていることに気付きました。 IMAPでPHPを使用してWebベースのメールクライアントで作業しました。アプリのレイアウトだけでなく、意図した動作も破壊するため、多くのHTMLメールを削除する必要がありました。ボタンとフォームの使用方法質問するかもしれませんデスクトップの電子メールクライアントではおそらくこれは問題になりませんが、外部のcss/jsファイルを読み込むWebベースの電子メールクライアントでは、潜在的な落とし穴と厄介なバグが非常に多く発生する可能性があります。

別の機会に、私はHTMlメールで送られた結婚式の招待状に取り組んでいました。私たちがしなければならなかったインラインCSSの量はばかげていました。動作させるには、ほとんどHTML3を使用し、HTML4を少し使用する必要がありますが、あまり使用する必要はありません。

テーブルと非推奨のHTML3インラインCSSを試すことをお勧めします。

0
Darwin Santos Arismendy
<a href="#" style="color: #FFF;"><strong style="color: #FFF; font-weight: normal;">Example Link</strong></a>

それは私のために働いた！必ず<strong>を使用してください。他のタグで試してみましたが、うまくいきませんでした。

0
leon

この質問は、今日の2017年12月12日現在でも関連しています。 Outlook、Gmailのコードには問題はありませんが、Outlook Web Appにはありません。この古いタグを使用して解決する必要がありました。

<a class="app-link" style="font-size:14px; color:#ff6600 !important; text-decoration:underline;" href="https://somesite/something/"><font color="#ff6600 !important;"> Gå til app</font></a>

ハイパーリンク内のスタイルがOutlook Web App（OWA）で機能しないため、<font color="#ff6600 !important;">うまくいきました！奇妙ですが、これはマイクロソフトが私たちをからかうために望んでいる方法です！

0
curious.netter

OWAは、実際には、aタグのすべてのスタイルを削除します。これには、含めたspanタグのスタイルも含まれます。頭部にスタイルを追加できますが、OWAはハイパーリンクについてこれを無視します。頭にa、a：link、a：visitedのスタイルを追加しました。a-tagと同じspan-tagの色です。結果？リンクテキストは色付きですが、下線はデフォルトの青のままです。手がかり：私には手がかりはありません。

0
Geert

クラスを追加してみてくださいmy-link問題の各リンクとstyleタグ内の次のCSS：

.my-link a,
a[x-Apple-data-detectors] {
  color:inherit !important;
  text-decoration: underline !important;
}

それは通常私のためのものをカバーしています。それが失敗した場合、このコードのより重いバージョンがここにあります：

.my-link a,
a[x-Apple-data-detectors] {
    color: inherit !important;
    text-decoration: none !important;
    font-size: inherit !important;
    font-family: inherit !important;
    font-weight: inherit !important;
    line-height: inherit !important;
}

ソース

0
Ted Goas