web-dev-qa-db-ja.com

HTMLメールのリンクの下線を削除するにはどうすればよいですか？

<td width="110" align="center" valign="top" style="color:#000000;">
    <a href="https://example.com" target="_blank"
       style="color:#000000; text-decoration:none;">BOOK NOW
    </a>
</td>

このコードを使用して、HTMLメールにリンクを作成しました。ブラウザとOutlookではうまく機能していますが、GMail、Hotmail、およびymailでは、下線付きのリンクが表示されます。

誰でも私を助けてこれを取り除くことができますか？

htmlcsshtml-emailnewsletteremail-client
22
pubudumj
<a href="#" style="text-decoration:none !important; text-decoration:none;">BOOK NOW</a>

Outlookは!importantタグでスタイルを削除し、通常のスタイルを残します。したがって、下線は付きません。 !importantタグは、Webベースの電子メールクライアントのデフォルトスタイルを優先するため、下線は残りません。

29
Nathaniel Hoyt

これは答えられたようです。ただし、このリンクは、さまざまな電子メールクライアントでサポートされているフォーマットについて適切な情報を提供していると思います。

http://www.campaignmonitor.com/css/

GMailとOutlookは、HTMLメールをフォーマットするのに最も選りすぐりの2つであることは注目に値します。

7
Kennith Nichol

Gmailをだます別の方法（電話番号の場合）：-ではなく〜を使用します

404-835-9421-> 404〜835〜9421

Htmlレーンの旅を節約します（または、あまり知識のないユーザー;-)。

これまでにテストしたOutlookのリンクを削除する別の方法を見つけました。たとえば、CSSで.blank {}と言う空のクラスを作成してから、たとえばリンクに対して次の操作を実行するとします。

<a href="http://www.link.com/"><span class="blank" style="text-decoration:none !important;">Search</span></a>

これは私にとってはうまくいきましたが、うまくいけば、Outlookのリンクの下線を取り出すのに苦労している人を助けるでしょう。誰かがGmailの回避策を持っているなら、何も機能していないこのスレッドですべてを試してみてください。

ありがとう

3
Bryan Labuschagne

つかいます !importantテキスト装飾ルール。

<a href="#" style="text-decoration:none !important;">BOOK NOW</a>
3
TechyTee

<a>を含むtext-decoration:noneタグの後にspanスタイルを配置すると、ほとんどのブラウザ/電子メールクライアントで機能すると思います。

次のように：

<a href="" style="text-decoration:underline">
    <span style="color:#0b92ce; text-decoration:none">BANANA</span>
</a>
2
Ricardo

これを調べて半日後（この質問が開かれてから2年後）、これに対する包括的な答えを見つけたと思います。

<a href="#"><font color="#000000"><span style='text-decoration:none;text-underline:none'>Link</span></font></a>

（リンク内のスパンのtext-underlineプロパティと、色を編集するためのフォントタグが必要です）

2
Tommy Bickerdike

OutlookとGmailアプリで機能するhrefに両方の宣言を追加しました。 Outlookは！importantを無視し、Gmailはそれを必要とします。 Webバージョンの電子メールは両方/どちらでも機能します。

text-decoration: none !important; text-decoration: none;
1
Steven Collins

Googleでリンクを表示しない、mso（Outlook）およびshyタグのリンクを追加するという組み合わせを使用して、会社のルックアンドフィールを維持しました。一部のコードは冗長な場合があります（私の会社にとっては、クリック可能な部分よりも重要な外観です）

<td style="color:rgb(69, 54, 53)">
<!--[if gte mso 9]>
<a href="http://www.immothekerfinotheker.be" style="text-decoration:none;">
<span style="text-decoration:none;">
<![endif]-->
www&shy;.&shy;immothekerfinotheker&shy;.&shy;be
<!--[if gte mso 9]>
</a>
</span>
<![endif]-->
</td>

これが誰かを助けることを願っています

1
Tom Leppens

メールアプリケーションとWebブラウザの両方で<a>の下線を完全に「非表示」にするには、次のトリッキーな方法があります。

<a href="..."><div style="background-color:red;">
    <span style="color:red; text-decoration:underline;"><span style="color:white;">BUTTON</span></span>
</div></a>

  1. 最初の<span>の色は必要ありません。[〜＃〜] must [〜＃〜]背景色と同じに設定します。 （ここで赤）

  2. 2番目の<span>の色は、ボタンテキストの色です。 （ここに白い）

1
Jeffrey Neo

すべての電子メールクライアントは、独自のルールによって、提供するHTMLおよびCSSコードを調整します。

例：gmailはbodyタグの内部HTML以外をすべて削除します。

1.他のほとんどのクライアントでは、ヘッダーにスタイルタグを含めることができます

<style type="text/css">
    a {text-decoration: none !important;}
</style>

注：YAHOO！Mailは問題を引き起こす可能性があるため、CSSコメントを使用しないでください。

2.保存するためには、同じタグをAタグにインラインで追加し、さらに追加のspanタグも追加します（タグのスタイルルールは頻繁に削除されます）

<a href="" style="text-decoration: none !important;">
    <span style="text-decoration: none !important;">
        text
    </span>
</a>
1
retrovertigo

「冗長なスタイリング」を行うことができ、それで問題が解決するはずです。あなたはあなたが持っているのと同じスタイリングを使用しますが、それをに追加します。

例：

<td width="110" align="center" valign="top" style="color:#000000;">
    <a href="https://example.com" target="_blank"
       style="color:#000000; text-decoration:none;"><span style="color:#000000; text-decoration:none;">BOOK NOW</span></a>
</td>
0
Tom

リンクの下に下線を表示するかどうかは、メールクライアントに完全に依存します。現在のところ、本文のスタイルは以下によってのみサポートされています：

  • Outlook 2007/10/13 +
  • Outlook 2000/03
  • Apple iPhone/iPad
  • Outlook.com
  • Apple Mail 4
  • Yahoo!メールベータ

http://www.campaignmonitor.com/css/

0
Anshu Dwibhashi

以下の行のようなコードは、Gmail Webクライアントで機能しました。メールに下線のない黒いリンクが表示されました。ネストされたspanタグを使用しませんでした。

<table>
  <tbody>
    <tr>
        <td>
            <a href="http://hexinpeter.com" style="text-decoration: none; color: #000000 !important;">Peter Blog</a>
        </td>
    </tr>
  </tbody>
</table>

注：Gmailは、不正なインラインスタイルを取り除きます。例えば。次の行のようなコードでは、インラインスタイルがすべて削除されます。

<a href="http://hexinpeter.com" style="font-family:; text-decoration: none; color: #000000 !important;">Peter Blog</a>
0
hexinpeter

http://www.campaignmonitor.com/css/ では、これは制限されていると言って良い説明です！また、メールクライアントでのCSSのすべての制限を知るための非常に良いガイドです。

0
Exception

Windows 10メールでは、これらをHTMLヘッドに追加する必要がある場合があります。

<!--[if (mso)|(mso 16)]>
  <style type="text/css">
    body, table, td, a, span { font-family: Arial, Helvetica, sans-serif !important; }
    a {text-decoration: none;}
  </style>
<![endif]-->

「{text-decoration：none;}」は下線の問題を修正しました:)

0
Nereus Eng Wei Xian

HTMLメールを見ながら、そのリンク上の要素を調べて、何が上書きされているかを確認してください。そのクラスを使用して、そのスタイルを再びヘッドスタイルで定義し、テキスト装飾を定義します。none！important;

私の場合、これらは私のインラインスタイルを上書きしているクラスなので、これを私のHTMLメールの先頭で宣言し、実装したいスタイルを定義しました。

それは私のために働いた、それもあなたのものでうまくいくことを願っています。

.ii a[href]{
text-decoration: none !important;
}

#yiv8915438996 a:link, #yiv8915438996 span.yiv8915438996MsoHyperlink{
text-decoration: none !important;
}   

#yiv8915438996 a:visited, #yiv8915438996 span.yiv8915438996MsoHyperlinkFollowed{
text-decoration: none !important;
}
0
vonnshy

-遠方からの情報-

あなたがしなければならないすべて;

<a href="" style="text-decoration:#none; letter-spacing: -999px;">

0
Ömer Doğan

つかいます - text-decoration:none !important;の代わりにtext-decoration:none;アンダーラインを「失う」ことを確認します。

0
user1647234

HtmlページをコピーしてWordに貼り付けました。 Wordで署名を編集して、下線が配置されているスペースを削除し、スペースバーを押す「パディング」を作成しました。再度コピーして、Outlook 2013に貼り付けました。うまくいきました。

0
Ewerton

テキスト装飾なしは私のために働いていませんでした、そして私は行を持たないOutlookでメールを見つけてコードをチェックしました：

<span style='font-size: 12px; font-family: "Arial","Verdana", "sans-serif"; color: black; text-decoration-line: none;'>
<a href="http://www.test.com" style='font-size: 9.0pt; color: #C69E29; text-decoration: none;'><span>www.test.com</span></a>
</span>

これは私のために働いています。

0
Dr. Aaron Dishno