이메일 꿈이 실현되도록 Gmail 블루 링크를 수정하는 방법

게시 됨: 2021-07-16

QA가 Gmail에서 완벽하지 않은 이메일을 테스트할 때 무작위로 보이는 브랜드가 아닌 파란색 링크로 인해 좌절감을 느끼셨습니까? 거기에 있었다. 완료했습니다. 좋은 뉴스? 당신은 아무 잘못도하지 않았다. 2017년부터 Gmail은 이메일 주소, 전화번호, 실제 주소, 시간과 같은 사본의 일부를 클릭 가능한 요소로 자동 전환하고 때로는 파란색으로 바꿉니다. 그리고 이메일의 30% 이상을 차지하는 두 번째로 인기 있는 이메일 클라이언트가 열리면서 Google 데이터에 따르면 Gmail을 무시할 수 없습니다.

파란색 링크가 무엇이고 그 이유에도 불구하고 승인된 것처럼 보이려면 이메일이 필요합니다. 또는 최소한 링크가 브랜드에 있어야 합니다. 다행히 기본 스타일을 제거하는 것은 그리 어렵지 않습니다. 파란색 링크가 생성되는 방법과 이메일 디자인과 일치하도록 변경하기 위해 할 수 있는 작업을 안내해 드립니다. Gmail 잠재고객을 위해 사용하기 쉬운 링크를 유지하면서 이 모든 것이 가능합니다.

이메일에 파란색 링크가 있습니까?

이메일 클라이언트가 Litmus Email Previews를 사용하여 이메일 렌더링을 업데이트할 때를 항상 알 수 있습니다. Gmail을 포함하여 널리 사용되는 모든 이메일 클라이언트 및 기기에서 이메일을 미리 보고 전송하기 전에 오류를 찾아냅니다.

더 알아보기 →

접근성을 염두에 두십시오

먼저 파란색 링크가 중요한 목적을 수행한다는 것을 기억하는 것이 중요합니다. 예를 들어, 귀하가 포함시킨 위치로 이동하거나 빠른 전화를 걸기 위해 구독자가 귀하의 이메일에 대해 보다 편리하게 작업을 수행할 수 있습니다. 사용성과 접근성 모두 좋습니다.

그러나 이러한 자동 링크는 밑줄과 파란색의 기본 스타일과 함께 제공될 수 있습니다. 이는 이메일 디자인과 충돌할 수 있으며 링크가 배경색과 잘 대조되지 않는 경우 이메일에 대한 접근성을 떨어 뜨릴 수도 있습니다.

따라서 링크의 기능은 유지하되 이메일 디자인과 더 잘 어울리고 읽기 쉽게 스타일을 지정해야 합니다.

주의: 깨진 이메일의 다른 원인이 있습니다.

이메일 오류로 인해 몸이 떨리십니까? 파란색 링크는 이메일이 깨진 것처럼 보일 수 있는 한 가지 방법일 뿐입니다. 이메일을 손상시킬 수 있는 요소와 진실을 유지하기 위한 팁 및 요령에 대해 자세히 알아보세요.

일반적인 문제 및 수정 사항 공개 →

Gmail에서 파란색 링크 색상을 변경하는 세 가지 방법

파란색 링크 색상을 변경하려면 왜 발생하는지 이해해야 합니다. Gmail은 이메일에서 주소나 전화번호를 발견하면 자동으로 추가 스타일 선언을 추가합니다. 이 선언은 첨부된 인라인 스타일이 없는 경우 이메일의 링크 형식을 파란색으로 지정합니다.

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

클래스 .ii 는 Gmail의 전체 이메일을 포함하는 div에 지정된 클래스를 나타 냅니다. a[href] 는 CSS 속성 선택자입니다. 이것은 .ii 클래스의 모든 링크가 파란색이어야 함을 선언합니다.

주소와 전화번호는 일반적으로 이메일에 연결되지 않습니다. 그러나 Gmail은 사용자가 좋든 싫든 이를 인식하고 링크로 바꿉니다. 이러한 링크는 즉석에서 생성되기 때문에 인라인 스타일이 연결되어 있지 않으므로 위의 기본 스타일이 사용됩니다.

이러한 링크를 이메일의 다른 링크와 동일하게 또는 다르게 표시할지 여부에 따라 링크가 파란색으로 바뀌는 것을 중지하는 데 사용할 수 있는 세 가지 방법이 있습니다.

옵션 1: <span> 메서드 사용

<span> 메서드는 Gmail에서 전화번호와 주소가 파란색으로 바뀌는 것을 막는 가장 간단한 기술입니다. 기능을 유지하면서 다른 링크와 다르게 스타일을 지정하려는 경우에 적합합니다. 방법은 다음과 같습니다.

전화번호 또는 주소를 <span></span>으로 묶습니다.
<span> 클래스를 지정합니다. 예: <span class="contact"></span>
이메일의 <style> 섹션에서 클래스를 선언하여 원하는 대로 전화번호나 주소를 스타일화하세요.
이익!

다음은 이메일에 주소가 표시되는 HTML의 예입니다.

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

다음은 링크를 검은색(#000000)으로 설정하고 밑줄이 그어진 이메일 <head>의 <style> 블록에 있는 클래스 "contact"에 대한 스타일 선언의 예입니다.

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

#000000을 브랜드에 맞는 색상 16진수 코드로 교체하여 예제 코드의 검정색을 변경합니다. 링크에 밑줄이 표시되지 않도록 하려면 코드에서 밑줄을 없음으로 변경하십시오.

주소 또는 전화 번호 주위에 클래스 이름으로 <span>을 생성하면 CSS를 사용하여 대상을 지정할 수 있습니다. <span> 자체를 대상으로 하는 것만으로는 링크의 스타일이 지정되지 않습니다. 링크되지 않은 텍스트만 스타일을 지정하는 반면 <span> 내부의 링크 는 여전히 기본 파란색 스타일을 유지합니다. 따라서 범위 내부의 링크 를 대상으로 하기 위해 스타일 선언에는 클래스 이름과 ""가 포함됩니다.

이것은 전화번호에 직접 <a href=”tel:XXX-XXXX”>을(를) 추가하고 싶지만 전화번호가 데스크탑에서 전화 앱을 여는 것을 원하지 않는 경우 전화번호에 특히 유용합니다. 그런 다음 데스크톱과 모바일의 콘텐츠를 숨기고 표시해야 합니다. 두통을 건너 뛰고 이메일 클라이언트가 마침내 당신을 돕기 위해 무언가를하고 있다는 사실을 활용하십시오.

옵션 2: 모든 링크 스타일 무시

또 다른 옵션은 이메일의 모든 링크에 적용할 기본 스타일을 설정하는 것입니다. 이 옵션은 Gmail이 제공하는 기능을 유지하면서 주소 또는 전화번호 링크를 다른 링크 와 동일 하게 표시하려는 경우에 적합합니다.

다음과 같이 이메일의 <head>에 있는 <style> 블록에 Gmail 고유의 스타일 선언을 추가합니다.

<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>

그런 다음 body 태그에 ID "body"를 추가합니다.

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

밑줄 'u'는 Gmail의 타겟팅 방법입니다. doctype을 밑줄 태그로 변환하고 Gmail은 이러한 방식으로 작동하는 유일한 클라이언트입니다. 따라서 CSS에서 해당 div의 div 또는 id/class의 인접 형제 선택자와 함께 밑줄 태그를 사용하는 것은 Gmail 클라이언트만 타겟팅하는 고유한 방법입니다(적어도 당분간은). 이 예에서는 "body"라는 ID를 사용했습니다.

이 방법을 사용하면 이메일의 링크에 약간 다른 스타일이 적용되도록 하려면 위의 이 기술이 스타일 선언에 정의된 모든 링크의 스타일을 지정하기 때문에 특정 링크에 인라인으로 추가해야 합니다.

그러나 이 방법에는 작은 주의 사항이 있습니다.

Gmail 사용자가 기본적으로 이미지를 끈 다음 활성화하면 작동하지 않습니다. 이는 이미지가 활성화되면 스타일이 부적절하게 변경되는 Gmail의 버그 때문입니다. 이메일 개발자 Remi Parmentier는 이 버그에 대해 좀 더 자세히 설명합니다.

옵션 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>

위의 예에서 실제 주소는 밑줄이 없는 회색으로 스타일이 지정되어 있으며 당사 웹사이트의 연락처 페이지에 연결되어 있습니다. 이렇게 하면 Gmail에서 기본 스타일과 기능을 적용할 수 없습니다.

안녕, Gmail 파란색 링크

세 가지 방법 중 하나를 사용하면 파란색 링크가 더 이상 이메일 디자인을 버리지 않고 Gmail에서 깨진 것처럼 보이게 하지 않습니다. 그리고 그것은 훌륭합니다. 깨진 이메일이 참여와 전환에 해를 끼칠 수 있기 때문입니다(그리고 당신은 분명히 원하지 않습니다).

우리의 방법에 대해 질문이 있습니까? 아니면 공유할 다른 솔루션이 있습니까? 아래 의견에 알려주십시오.

Litmus를 사용하여 브랜드에 오류 없는 이메일 생성

Gmail을 포함한 90개 이상의 이메일 클라이언트, 앱 및 기기에서 이메일이 어떻게 보이는지 확인하세요(파란색 링크가 더 이상 없습니까?). 깨진 이메일에 작별 인사를 하십시오. 아휴!

무료 평가판 시작 →

Jaina Mistry가 2017년 10월 13일에 처음 게시했습니다. 2021년 7월 16일에 마지막으로 업데이트되었습니다.