티스토리 사이드바 카테고리 속성 변경하기

 

이번 시간에는 티스토리 사이드바에 있는 카테고리의 속성을 변경해 보겠습니다. 스킨에 따라 조금씩 차이는 있을 수 있지만 저는 제가 사용하는 Photo Essay스킨 기준으로 설명해 보겠습니다. 
  
먼저 스킨편집 창으로 가서 css탭을 클릭 후 ctrl + F를 누른 후 box_category를 검색하면 아래와 같은 소스를 볼 수 있습니다.

.box_category {padding-left:10px;}
.tit_category {width:181px;background-position:7px 9px;}
.box_category ul {margin-top:1px;}
.box_category ul ul {margin:0;}
.box_category ul li {:11px;}
.box_category ul li a {}
.box_category ul li li li a {padding-left:11px;background:url(images/bar_category.gif) no-repeat 3px 5px;}  
.box_category .selected a { }
.box_category .ib { cursor:pointer;} 
.box_category .branch3 {cursor:pointer;}
.box_category .c_cnt {:Dotum;}

여기서 몇 가지만 소개 드리자면 

  .box_category ul li a {}는 상위 카테고리 속성입니다. 상위 카테고리의 글씨체, 글씨크기, 글씨 색깔 등은 {}안에 취향에 따라 넣어주면 됩니다.

.box_category ul li li li a {padding-left:11px;background:url(images/bar_category.gif) no-repeat 3px 5px;}는 하위 카테고리 속성 입니다. 상위 카테고리 처럼 {}안에 취향에 따라 글씨크기와 글씨체, 글씨 색깔 등을 넣어서 수정 할 수 있습니다.

 .box_category .ib { cursor:pointer;}는 카테고리 글씨에 마우스가 올려 졌을때 마우스 포인트가 바뀌는 소스입니다. cursor:pointer; 를  cursor:auto로 하면 마우스 포인트는 바뀌지 않습니다.

   마지막으로 .box_category .c_cnt {:Dotum;margin-right:3px;} 는 카테고리 옆 포스팅 숫자 입니다. 

  몇가지만 실제로 변경해 보겠습니다. 

  먼저 하위 카테고리명을 굵게, 그리고 파란색으로 해 보겠습니다.

  위 소스 .box_category ul li li li a {padding-left:11px;background:url(images/bar_category.gif) no-repeat 3px 5px;}  에서 font:bold; color: blue;를 추가해 주면 됩니다. 

  그리고 카테고리의 포스팅 수를 붉은색으로 그리고 가장 오른쪽으로 정렬 해보겠습니다.

  위 소스 .box_category .c_cnt {:Dotum;} 에서 {}안에 margin-right:3px;color:red;float:right; 넣어 주면 됩니다. 여기서 float:right;는 오른쪽 정렬을 의미합니다. 

 

만약 카테고리명 크기를 바꾸고 싶으면 {}안에 :원하는크게pt, 파란색이나 붉은색이 아닌 원하는 색깔로 바꾸고 싶으면  color:원하는 색을 입력하면 됩니다. 색상은 영문명이나 html 코드색상표 중에 편한걸로 입력하면 됩니다.

아래 이미지는 위 소스를 모두 수정한 결과와 전체 html 소스 입니다. 

 

그럼 이것으로 티스토리 사이드바 카테고리 속성 변경하기를 마치겠습니다. 읽어 주셔서 감사합니다.