티스토리에서 링크 옆에 이미지 붙이기

 

안녕하세요, 흔한공돌이 입니다.

오늘은 왠지모르게 나무위키에서 외부링크 왼쪽에 이미지가 붙는걸 보고 "나도 해보고 싶다!" 싶어서 여기저기 뒤적거리다가 찾아서 간단히 소개하고자 포스팅 올립니다.

 

 

이게 필요한가?

링크를 일반 본문과 구분하기 위해서는 볼드 처리, 밑줄, 색 변경 등의 처리가 필요합니다. 현재 제 블로그의 기본 테마는 볼드 처리와 함께 마우스를 올리면 색이 변하도록 처리가 되어있습니다. 그런데 이런 폰트 변경 수준에서는 이게 강조를 하기 위한 것인가, 링크를 뜻하는 것인가 하는 혼동이 올 수 있습니다.

이런 혼동을 피하기 위해 링크에만 붙는 특이한 표시가 필요하게 되는데, 링크 앞 또는 뒤에 링크를 뜻하는 이미지를 붙여주면 이게 링크구나! 하고 확실히 파악을 할 수 있겠죠.

예시: 공돌이블로그, 이런 식으로 오른쪽에 이미지가 붙도록 설정해봅시다.

 

 

 

 

 

어떻게 하면 되는데?

일단 [블로그관리 - 꾸미기 - 스킨 편집]으로 들어가셔서 다음 CSS 태그를 넣어주세요.

.article a.tx-link:after { content:url('images/[파일 이름.확장자]'); position:relative; }

 

그리고 적당한 이미지 파일을 업로드해주세요.

 

 

 

이게 제가 쓰는 이미지 파일입니다. 혹시 이용하시려면 가져다 쓰세요.

 

 

설명 + 주의사항 (18.4.7 수정)

Tistory 편집기의 URL 버튼을 이용해 링크를 삽입하시는 경우 a 태그에 자동으로 class="tx-link" 가 붙는 것을 이용했습니다. 

 

.article 클래스는 본인의 블로그 디자인마다 클래스 이름이 다를 수 있으니 적절히 수정해주세요.

 

만약 이미지를 링크의 왼쪽에 붙이고 싶으시면 :after를 :before 로 바꿔주세요.

 

 

 

 

기타 참고 링크

혹 저보다 더 잘 아시는 분들이라면, 다음 링크들을 참고하시면 본인 마음에 들게 더 잘 수정하실 수 있을거라고 봅니다. 저는 이런거 봐도 멍- 한 수준인지라...

 

[공유]::before와::after, 그들의 정체는? :after와 :before에 대한 설명이 나와있는데 뭔소린지 공부를 해봐야 알겠습니다.

 

Using :before CSS pseudo element to add image to modal StackOverflow 라는 곳에서 찾은건데, 이렇게 쓰는게 맞냐?, 이렇게 말고 저렇게 써봐 뭐 이런 겁니다.

 

블로그 링크(link) - 이미지 아이콘으로 강조하기 거의 3시간 정도 이걸 붙잡고 있었는데, 다른 방식으로 4년 전에 이미 글을 작성하셨더군요. 게다가 이미 방법 다 찾아내고 포스팅해야징! 하고나서 찾아가지고... 현자타임이 오긴 했지만 그래도 태그는 다르니까! 하는 자기합리화를 거쳐 포스팅을 올립니다.