メールの夢を実現するためにGmailの青いリンクを修正する方法

公開: 2021-07-16

Gmailで他の点では完璧なメールをQAテストするときに、一見ランダムなブランド外の青いリンクに不満がありますか？行ったことがある。それをしました。良いニュース？あなたは何も悪いことをしなかった。 2017年以降、Gmailは、メールアドレス、電話番号、住所、時刻などのコピーの一部を自動的にクリック可能な要素に変換し、場合によっては青色に変換します。また、メールの30％以上で2番目に人気のあるメールクライアントが開くと、私たちのデータによると、Gmailを無視することはできません。

青いリンクとは何か、そしてその理由にもかかわらず、承認されたもののように見えるように電子メールを送信する必要があります。または、少なくともリンクをブランドに設定します。幸い、デフォルトのスタイルを削除するのはそれほど難しくありません。青いリンクがどのように発生するか、そしてメールのデザインに合わせてリンクを変更するために何ができるかについて説明します。 Gmailオーディエンスのための使いやすいリンクを維持しながらすべて。

あなたのメールには青いリンクがありますか？

電子メールクライアントがLitmus電子メールプレビューを使用して電子メールレンダリングを更新するタイミングを常に把握してください。 Gmailを含むすべての一般的なメールクライアントとデバイスでメールをプレビューし、送信する前にエラーを見つけます。

詳細→

アクセシビリティを念頭に置いてください

まず、青いリンクが重要な目的を果たしていることを覚えておくことが重要です。これにより、購読者が電子メールを操作しやすくなります。たとえば、含めた場所に移動したり、すばやく電話をかけたりすることができます。使いやすさとアクセシビリティの両方に最適です。

ただし、これらの自動リンクには、デフォルトのスタイル（下線と青）が付いている場合があります。これは、メールのデザインと競合する可能性があり、リンクが背景色とのコントラストがよくない場合は、メールにアクセスしにくくなる可能性があります。

そのため、リンクの機能を維持しながら、メールのデザインに合わせて読みやすくなるようにスタイルを設定する必要があります。

注意：壊れた電子メールの他の犯人がいます

電子メールエラーはあなたを震えさせますか？青いリンクは、メールが壊れているように見える1つの方法にすぎません。あなたの電子メールを壊すことができるものと真実を保つための秘訣と秘訣を深く掘り下げてください。

一般的な問題と修正を明らかにする→

Gmailで青いリンクの色を変更する3つの方法

青いリンクの色を変更するには、なぜそれが発生するのかを理解する必要があります。 Gmailがメール内の住所または電話番号を見つけると、自動的に追加のスタイル宣言が追加されます。これにより、インラインスタイルが添付されていない場合、メール内のリンクは青色でフォーマットされます。

.ii a[href] { color: #15c; }

クラス.iiは、Gmailのメール全体を含むdivに指定されたクラスを指します。 a [href]はCSS属性セレクターです。 これは、 .iiクラスのすべてのリンクが青色である必要があることを宣言します。

住所と電話番号は、通常、電子メールでリンクされていません。ただし、Gmailはそれらを認識し、好むと好まざるとにかかわらずリンクに変換します。これらのリンクはオンザフライで作成されるため、インラインスタイルがアタッチされていないため、上記のデフォルトのスタイルが使用されます。

これらのリンクを電子メール内の他のリンクと同じように見せたいか、異なって見せたいかに応じて、リンクが青くなるのを防ぐために使用できる3つの方法があります。

オプション1：<span>メソッドを使用する

<span>メソッドは、Gmailで電話番号と住所が青くなるのを防ぐ最も簡単な方法です。機能を維持しながら、他のリンクとは異なるスタイルを設定したい場合に最適です。 方法は次のとおりです。

電話番号または住所を<span> </ span>で囲みます
<span>にクラスを指定します。例：<spanclass =” contact”> </ span>
メールの<style>セクションでクラスを宣言して、電話番号や住所を好きなようにスタイル設定します
利益！

メールにアドレスが表示されているHTMLの例を次に示します。

<span class="contact">675 Massachusetts Ave.<br />Cambridge, MA 02139, USA</span>

また、メールの<head>の<style>ブロックにあるクラス「contact」のスタイル宣言の例を次に示します。ここでは、リンクを黒（＃000000）に設定し、下線を付けています。

<style type="text/css">
    .contact a {color: #000000!important; text-decoration: underline!important;}
</style>

＃000000をブランドに合った16進色のコードに交換して、サンプルコードの黒色を変更します。リンクに下線を付けたくない場合は、コードの下線をnoneに変更してください。

住所または電話番号の前後にクラス名を指定して<span>を作成すると、CSSを使用してターゲットを設定できます。 <span>自体をターゲットにするだけでは、リンクのスタイルは設定されません。リンクされていないテキストのみがスタイル設定され、<span>内のリンクはデフォルトの青いスタイルのままになります。したがって、スパン内のリンクをターゲットにするために、スタイル宣言にはクラス名と「a」が含まれます。

これは、<a href=”tel:XXX-XXXX”>を電話番号に直接追加したいが、電話番号がデスクトップで電話アプリを開こうとしない場合に、電話番号に特に適しています。そして、デスクトップとモバイルのコンテンツを非表示にして表示する必要があります。頭痛の種をスキップして、電子メールクライアントが最終的にあなたを助けるために何かをしているという事実を利用してください。

オプション2：すべてのリンクスタイルを上書きする

別のオプションは、電子メール内のすべてのリンクに適用される独自のデフォルトのスタイルを設定することです。このオプションは、Gmailが提供する機能を維持しながら、住所や電話番号のリンクを他のリンクと同じように見せたい場合に最適です。

次のように、このGmail固有のスタイル宣言をメールの<head>の<style>ブロックに追加します。

<style type="text/css">
    u + #body a {
    	  color: inherit;
    	  text-decoration: none;
    	  font-size: inherit;
    	  font-family: inherit;
    	  font-weight: inherit;
    	  line-height: inherit;
    }
</style>

次に、ID「body」をbodyタグに追加します。

<body id="body">
</body>

下線「u」はGmailのターゲティング方法です。 Doctypeをアンダースコアタグに変換し、Gmailはこのように動作する唯一のクライアントです。したがって、CSSのdivまたはそのdivのid / classの隣接する兄弟セレクターでアンダースコアタグを使用することは、Gmailクライアントのみをターゲットにする独自の方法です（少なくとも現時点では）。この例では、「body」のIDを使用しました。

この方法では、電子メール内のリンクのスタイルを少し異なるようにする場合、上記の手法ではスタイル宣言で定義されているようにすべてのリンクのスタイルを設定するため、これらの特定のリンクにインラインで追加する必要があります。

ただし、この方法には小さな注意点があります。

Gmailユーザーがデフォルトで画像をオフにしてから有効にすると、機能しません。これは、画像を有効にするとスタイルが不適切に変更されるGmailのバグが原因です。電子メール開発者のRemiParmentierが、このバグについてさらに詳しく説明しています。

オプション3：<a>タグを追加し、自分でリンクさせる

Gmailが自動リンクする要素をプロアクティブにリンクすることで、スタイルと色をより細かく制御できます。このオプションは、コンテンツのリンク先も変更して、Gmailのデフォルト機能をたぶん、あなたはあなたのウェブサイトにあなたが彼らの電話のナビゲーションアプリを自動的に開いたり、即座にあなたに直接電話したりする代わりに、購読者を連れて行きたい連絡先ページを持っているでしょう。

<a style="color:#4B525D; text-decoration:none;" href="https://www.litmus.com/contact-us/">675 Massachusetts Ave.<br />Cambridge, MA 02139, USA</a>

上記の例では、物理アドレスは下線のない灰色にスタイル設定されており、当社のWebサイトの連絡先ページにリンクされています。これにより、Gmailがデフォルトのスタイルと機能を適用できなくなります。

さようなら、Gmailの青いリンク

3つの方法のいずれかを使用すると、青いリンクがメールのデザインを損なうことはなく、Gmailで壊れたように見えます。そして、それは素晴らしいことです。壊れた電子メールはエンゲージメントとコンバージョンを損なう可能性があるからです（そしてあなたは絶対にそれを望まないでしょう）。

私たちの方法について質問がありますか？または、共有する別のソリューションがありますか？以下のコメントでお知らせください。

Litmusを使用して、ブランド上でエラーのないメールを作成します

Gmailを含む90以上のメールクライアント、アプリ、デバイスでメールがどのように表示されるかを確認してください（青いリンクはもうありませんよね？）。壊れたメールに別れを告げる。ふぅ！

無料トライアルを開始→

2017年10月13日にJainaMistryによって最初に公開されました。 最終更新日は2021年7月16日です。

共有、ありがとう！

3種類の非アクティブな電子メールサブスクライバーを管理するために知っておくべきこと

効果的な再エンゲージメント戦略を作成できるように、非アクティブな電子メールサブスクライバーのタイプに基づいて非アクティブなサブスクライバーにアプローチする方法を学びます。
続きを読む

私たちのお気に入りの光棍節のEメールマーケティングの例と戦略

光棍節のメールは（中国だけでなく）世界中で流行しています。キャンペーンを刺激する8つのメールの例と、計画を開始するための戦略をご覧ください。
続きを読む

ホリスティックEメールメトリクスマトリックス：全体像を見ていますか？

短期および長期の全体的な電子メールメトリックを使用して、電子メールマーケティングのパフォーマンスの全体像を確認してください。そして、今日、よりパフォーマンスの高いキャンペーンを作成します。
続きを読む

ブラックフライデーとサイバーマンデー（BF / CM）の電子メールを公園からノックアウトする方法

ブラックフライデーのサイバーマンデーの電子メールに対するこれらの実証済みの戦略と、インスピレーションを得るための完璧な例を使用して、サブスクライバーを目立たせ、変換します。
続きを読む

Outlookの電子メールレンダリング：心配をやめてOutlookを愛する方法を学びました

Outlookでメールが見栄えが悪いのはなぜですか。直面する可能性のある電子メールのレンダリングと表示の問題、および電子メールを完全にするためにそれらを修正する方法について学習します。
続きを読む