티스토리 블로그 스킨 수정 - 외부 링크 화살표 아이콘 표시하기

포스팅을 하다보면 중요한 부분을 강조할 경우 글자색을 변경하거나 밑줄을 부가하기 마련입니다. 하지만 이런 식으로 글을 작성하다 보면 링크가 걸린 문구와 강조된 부분이 유사하여 혼동되는 경우가 많습니다.

티스토리에서 링크를 강조하는 플러그인으로는 무지개 링크 플러그인 뿐입니다. 일단 적용은 해줬지만, 링크위에 커서를 올려야만 링크된 문구임을 확인할 수 있어 여전히 혼동되는 부분이 있습니다. 그런 터에 검색을 통해 링크가 걸린 문구 오른편에 화살표 아이콘을 표시하는 방법을 알게 되어 적용했습니다.

그래서 이번엔 티스토리 블로그 Life in Mono 스킨을 기준으로 링크가 걸린 문구 오른쪽에 화살표 아이콘을 달아두는 외부링크(external link) 표시 방법을 정리해 보겠습니다.

1. 이미지 파일 업로드

먼저 이미지 파일을 올려줘야 하는데, 직접 본인의 입맛에 맞게 제작하면 좋겠지만 (16×16 size), 그럴 여력이 없는 분들은 구글 이미지검색에서 'external link'로 검색 후 ‘아이콘’ 사이즈로 분류하면 관련 이미지가 많이 나옵니다. [구글 이미지 검색결과 바로가기]

전 일단 익숙한 위키용 아이콘()을 사용했습니다.

여기서 다운받은 이미지 파일이름을 ‘exlink.gif’으로 변경한다는 가정하에 정리하겠습니다. 이미지 파일은 이제 티스토리의 관리자 페이지 ▶ 꾸미기 ▶ HTML/CSS편집 ▶ 파일업로드 항목을 이용하여 업로드 합니다.

2. style.css 태그 수정

아래의 코드를 HTML/CSS편집의 style.css에 맨 아래 추가해줍니다.

/* 외부링크 표시 */
 .external a[href^="http://"] {
       background: url(./images/exlink.gif) no-repeat right center;
       padding-right: 14px;
 }

▶ href^="http://"

• 이 부분에 대해서 설명하자면 모든 링크는 보통 ‘http://’로 시작하기 때문에 ‘http://’ 으로 시작하는 모든 링크는 ‘/images/exlink.gif’를 배경이미지로 둔다는 뜻입니다.

▶ right center

• 이미지 파일의 가로(left, center, right), 세로(top, center, bottom) 정렬위치를 지정해줍니다. 가로 위치는 right로 지정해줘야 문구와 겹치지 않습니다. 세로위치는 글자크기에 따라 위아래 공백이 생길 경우도 있으니 원하는 위치로 정렬해주시면 됩니다.

▶ padding-right: xpx

• 링크가 걸린 문구 우측으로 x 픽셀 만큼의 여백을 둡니다. 이 여백이 없으면 링크문구와 이미지가 겹치게 되고, 너무 여백을 많이 주면 링크문구와 동 떨어져 보이니 잘 맞게끔 해주시면 됩니다.

응용해서 특별히 아이콘을 좌측에서 보여주고 싶다면 아래처럼 수정하면 됩니다.

/* 외부링크 표시 */
 .external a[href^="http://"] {
                 background: url(./images/exlink.gif) no-repeat left center;
                 padding-left: 14px;
 }

혹시나 본문에 첨부한 이미지에도 화살표가 붙게 된다면, 다음 태그를 추가해 보세요.

.external a[href^="http://cfile"] {
       background : none;
       padding-right: 0;
 }

티스토리는 첨부된 이미지의 주소가 http://cfile로 시작하므로 http://cfile로 시작하는 링크는 배경이미지 없음(none)으로 적용합니다. (이게 정확한건지는 장담을 못합니다.;)
 

3. skin.html 태그 수정

다음 위 태그 속성을 포스트 본문에만 적용하기 위해서 HTML/CSS편집의 skin.html 부분에서 ctrl+F 로 article_rep_desc 을 검색한 후 아래처럼 앞뒤로 아래의 코드를 추가 해줍니다.

<!-- 포스트 본문 외부링크 표시 -->
 <div class="external">
 

포스팅을 하다보면 중요한 부분을 강조할 경우 글자색을 변경하거나 밑줄을 부가하기 마련입니다. 하지만 이런 식으로 글을 작성하다 보면 링크가 걸린 문구와 강조된 부분이 유사하여 혼동되는 경우가 많습니다.

티스토리에서 링크를 강조하는 플러그인으로는 무지개 링크 플러그인 뿐입니다. 일단 적용은 해줬지만, 링크위에 커서를 올려야만 링크된 문구임을 확인할 수 있어 여전히 혼동되는 부분이 있습니다. 그런 터에 검색을 통해 링크가 걸린 문구 오른편에 화살표 아이콘을 표시하는 방법을 알게 되어 적용했습니다.

그래서 이번엔 티스토리 블로그 Life in Mono 스킨을 기준으로 링크가 걸린 문구 오른쪽에 화살표 아이콘을 달아두는 외부링크(external link) 표시 방법을 정리해 보겠습니다.

1. 이미지 파일 업로드

먼저 이미지 파일을 올려줘야 하는데, 직접 본인의 입맛에 맞게 제작하면 좋겠지만 (16×16 size), 그럴 여력이 없는 분들은 구글 이미지검색에서 'external link'로 검색 후 ‘아이콘’ 사이즈로 분류하면 관련 이미지가 많이 나옵니다. [구글 이미지 검색결과 바로가기]

전 일단 익숙한 위키용 아이콘()을 사용했습니다.

여기서 다운받은 이미지 파일이름을 ‘exlink.gif’으로 변경한다는 가정하에 정리하겠습니다. 이미지 파일은 이제 티스토리의 관리자 페이지 ▶ 꾸미기 ▶ HTML/CSS편집 ▶ 파일업로드 항목을 이용하여 업로드 합니다.

2. style.css 태그 수정

아래의 코드를 HTML/CSS편집의 style.css에 맨 아래 추가해줍니다.

/* 외부링크 표시 */
 .external a[href^="http://"] {
       background: url(./images/exlink.gif) no-repeat right center;
       padding-right: 14px;
 }

▶ href^="http://"

• 이 부분에 대해서 설명하자면 모든 링크는 보통 ‘http://’로 시작하기 때문에 ‘http://’ 으로 시작하는 모든 링크는 ‘/images/exlink.gif’를 배경이미지로 둔다는 뜻입니다.

▶ right center

• 이미지 파일의 가로(left, center, right), 세로(top, center, bottom) 정렬위치를 지정해줍니다. 가로 위치는 right로 지정해줘야 문구와 겹치지 않습니다. 세로위치는 글자크기에 따라 위아래 공백이 생길 경우도 있으니 원하는 위치로 정렬해주시면 됩니다.

▶ padding-right: xpx

• 링크가 걸린 문구 우측으로 x 픽셀 만큼의 여백을 둡니다. 이 여백이 없으면 링크문구와 이미지가 겹치게 되고, 너무 여백을 많이 주면 링크문구와 동 떨어져 보이니 잘 맞게끔 해주시면 됩니다.

응용해서 특별히 아이콘을 좌측에서 보여주고 싶다면 아래처럼 수정하면 됩니다.

/* 외부링크 표시 */
 .external a[href^="http://"] {
                 background: url(./images/exlink.gif) no-repeat left center;
                 padding-left: 14px;
 }

혹시나 본문에 첨부한 이미지에도 화살표가 붙게 된다면, 다음 태그를 추가해 보세요.

.external a[href^="http://cfile"] {
       background : none;
       padding-right: 0;
 }

티스토리는 첨부된 이미지의 주소가 http://cfile로 시작하므로 http://cfile로 시작하는 링크는 배경이미지 없음(none)으로 적용합니다. (이게 정확한건지는 장담을 못합니다.;)
 

3. skin.html 태그 수정

다음 위 태그 속성을 포스트 본문에만 적용하기 위해서 HTML/CSS편집의 skin.html 부분에서 ctrl+F 로 article_rep_desc 을 검색한 후 아래처럼 앞뒤로 아래의 코드를 추가 해줍니다.

<!-- 포스트 본문 외부링크 표시 -->
 <div class="external">
 
 </div>

마치며..

마지막으로 링크이미지와 맞게끔 링크의 글자색을 변경해주는 과정이 있는데, 이 방법은 관련 포스팅을 참고하시기 바랍니다. (관련 글 : 티스토리 블로그 스킨 수정 - 하이퍼링크, 링크색 및 밑줄 제거)

저도 HTML/CSS는 문외한이라 맨땅에 헤딩 수준으로 수정해서 본문 링크에 화살표 이미지가 잘 적용되긴 했습니다만, 그동안 엉망으로 정리된 태그들로 인해 숨겨진 링크에까지 모두 아이콘이 보이는 결과를 초래했습니다.;;

어쨌든 그동안 포스팅한 개수가 많지 않으니 이번 기회에 일일이 수정이 가능했지만, 기존에 작성한 포스팅이 많으신 분들은 일일이 수정하기가 쉽지 않을지도 모르니 이점 염두해두세요 :)

 </div>

마치며..

마지막으로 링크이미지와 맞게끔 링크의 글자색을 변경해주는 과정이 있는데, 이 방법은 관련 포스팅을 참고하시기 바랍니다. (관련 글 : 티스토리 블로그 스킨 수정 - 하이퍼링크, 링크색 및 밑줄 제거)

저도 HTML/CSS는 문외한이라 맨땅에 헤딩 수준으로 수정해서 본문 링크에 화살표 이미지가 잘 적용되긴 했습니다만, 그동안 엉망으로 정리된 태그들로 인해 숨겨진 링크에까지 모두 아이콘이 보이는 결과를 초래했습니다.;;

어쨌든 그동안 포스팅한 개수가 많지 않으니 이번 기회에 일일이 수정이 가능했지만, 기존에 작성한 포스팅이 많으신 분들은 일일이 수정하기가 쉽지 않을지도 모르니 이점 염두해두세요 :)