본문 바로가기

TBlog/TStory Skin / Tip

티스토리 블로그 스킨 수정 - 태그 아이콘 및 글꼴 변경


일반적으로 많은 양의 글을 분류하기 위해 기본적으로 카테고리를 두지만, 이를 보완하기 위해 태그를 입력하여 분류에 도움을 주기도 합니다.

티스토리에서도 태그 기능을 지원하고 있습니다. 간략하게 티스토리 Life In Mono 스킨의 태그 부분 아이콘 및 글자크기와 글꼴, 글자색 등을 변경하는 방법을 알아봤습니다.


1. 태그 아이콘 변경하기


 ➔


Life In Mono 스킨의 기본적인 태그 아이콘 이미지의 파일명은 ‘txt_tag.gif’ 인데, 변경할려고 하는 이미지 파일은 이와는 다른 이름으로 올립니다. 여기서는 ‘txt_tag02.gif’ 란 이름으로 티스토리의 관리자 페이지 ▶ 꾸미기 ▶ HTML/CSS편집 ▶ 파일업로드 항목을 이용하여 업로드 했습니다.


다음, 관리자 페이지의 [꾸미기]➔[스킨]➔[HTML/CSS 편집]으로 가서 Style.css 수정탭에서 Ctrl+F로 'tagtrail'로 검색하다 보면 아래와 같은 부분을 찾을 수 있습니다.

▶ .tagTrail {padding-left:38px; padding-bottom:18px; background:url(images/txt_tag.gif) no-repeat 0 1px;}


태그 부분의 배경이미지 경로를 업로드 한 images/txt_tag02.gif 로 변경해주시고, 이미지 가로폭에 맞춰서 padding-left:38px 수치를 수정해주시면 됩니다. 위에 변경된 이미지는 가로폭을 변경해줄 필요가 없어서 여기서는 이미지 파일명만 수정해주었습니다.

➔ .tagTrail {padding-left:38px; padding-bottom:18px; background:url(images/txt_tag.gif) no-repeat 0 1px;}

➔ .tagTrail {padding-left:38px; padding-bottom:18px; background:url(images/txt_tag02.gif) no-repeat 0 1px;}


2. 태그 글꼴 변경하기

태그 글꼴 및 글자크기와 글자색은 다음 줄을 살펴보시면 됩니다.

▶ .tagTrail, .tagTrail a {color:#A0A0A0; font:12px dotum; }


여기서 태그의 글자색깔(color:#A0A0A0)글자크기(font:12px). 글꼴(dotum)을 원하는대로 변경해주시면 됩니다. 글자색깔은 그대로 두고 글자크기를 11포인트로 줄이고 글꼴을 맑은 고딕체로 변경해봤습니다.

➔ .tagTrail, .tagTrail a {color:#A0A0A0; font:12px dotum; }

➔ .tagTrail, .tagTrail a {color:#A0A0A0; font:11px 맑은 고딕; }



적용 완료된 모습