링크(앵커) 텍스트 클릭률 올리는 방법

제 블로그에는 링크들로 연결이 많이 되어 있습니다.

그런데 생각보다 링크(앵커 텍스트) 클릭률이 저조하더군요.

(수익 끝판왕인 전면 광고를 띄우려면 링크를 클릭하도록 유도해야 합니다.)

왜 그런지 분석해 보니 링크가 링크인지 알 수 없는(?) 디자인이 한몫 하고 있었습니다.

 

<변경 전>

 

<변경 후>

 

어떤가요? <변경 후> 링크가 더욱 클릭하고 싶지 않나요?

 

이번 포스팅에서는 앵커 텍스트에 스타일을 적용하는 법을 알아보겠습니다.

(링크 버튼 스타일 적용법은 이 글을 참조하세요.)

CSS 파일 다운로드

아래 CSS 파일을 다운 받아주세요.

앵커-텍스트-스타일-적용.txt

0.00MB

 

CSS 파일 커스텀

먼저 해당 코드를 이해할 필요가 있습니다.

 

컬러 변경

빨간색 부분이 마우스를 올렸을 때 색을 지정하는 부분입니다.

여러분 입맛에 맞게 이 부분을 변경해주시면 됩니다.

 

 

클래스명 수정

다음으로 수정해야 할 부분입니다.

해당 부분은 본문 위치를 의미하는 클래스명 인데요.

스킨에 따라 다르기 때문에 필히 수정해 주셔야 합니다.

 

클래스명 찾기

개발자창을 열어(F12 or Ctrl+Shift+I) 마우스를 통해 본문에 해당하는 위치를 찾아냅니다.

html 태그에서 마우스를 움직 일 때마다 해당 영역을 의미하는 부분이 블록으로 표시됩니다.

블록이 본문을 가리킬 때 멈춘 뒤 해당 클래스명을 확인해 주세요.

 

(이해를 돕기 위해 영상을 첨부합니다.)

 

영상에서 본문을 나타내는 클래스명은 "entry_content" 입니다. 

그렇다면 아래와 같이 수정해 줘야겠죠?

 

자, 이제 완성된 css를 티스토리에 적용해 볼 차례입니다.

 

티스토리 적용

스킨 편집에서 CSS 탭을 눌러주세요.

CSS 코드를 제일 하단에 붙여 넣어 준 뒤 '적용' 버튼을 꼭 눌러 주셔야 합니다.

 

개발자창 다루는 법이 낯선 분은 해당 포스팅에서 좀 더 자세히 설명하고 있으니 참조해보세요.

 

 

다양한 앵커 텍스트 서식 보기 >>

 

 

FAQ(자주 묻는 질문)

Q: 다른 링크에도 앵커텍스트 스타일이 모두 적용 됩니다.

A: 기존 소개했던 css에 아래와 같이 p 태그를 추가해주세요.

 

추가적으로 버튼에도 스타일이 적용된다는 분도 계신데요.

이 케이스는 <a> 태그를 버튼 모양으로 만들었을 경우 발생됩니다.

 

생긴것만 버튼이지 사실 앵커텍스트와 같기 때문인데요.

 

버튼을 사용하고자 한다면 <button> 태그를 사용해주세요.

버튼 태그 관련 사항은 해당 포스팅 참조바랍니다.