티스토리 반응형 스킨 #1 카테고리 CSS 변경하기

오늘은 구글 검색 중 저와 같은 #1 반응형 스킨을 쓰는 분의 블로그를 우연히 가게 되었습니다. 굉장히 깔끔하게 되어 있는 스킨을 보다가 한 가지가 눈에 띄었습니다. 바로 오른쪽 상단에 있는 카테고리 버튼이 눌려진 상태로 활성화되어있는 것입니다. 또 카테고리마다 글 개수도 표시되고 있었습니다. 저와는 다른 상태였고 제가 얼마 전 고민했던 문제를 해결할 수 있을 것 같았습니다. 

 

카테고리를 펼쳐서 보여주게 되면 자연스럽게 다른 글로 유입이 되는 현상이 있습니다. 예를 들어 포스팅을 쓰고 마지막에 관련글을 넣어주면 자연스럽게 다른 카테고리의 글도 보게 되어 기타 유입이 늘어나게 됩니다. 이 결과 제 블로그에 남아있는 체류시간이 길어지게 되는 것입니다. 글 개수 또한 얼마나 이 카테고리에 집중하고 있는지 블로거의 성향을 파악할 수 있는 데이터가 될 수 있습니다.

 

자 그럼 위의 상태로 만들기 위해 제 블로그도 스킨편집을 해보겠습니다.

카테고리 버튼 펼치기 
카테고리 글갯수 보이기

블로그 관리탭에 스킨 편집 > HTML 편집 > CSS로 이동합니다. 이후 CSS 창에서 Ctrl+f를 눌러 list_cate를 검색해 줍니다.

list_cate

CSS 변경 전

먼저 카테고리 버튼을 펼쳐 보이게 하기 위해서는 82번째 줄 .area_menu .list_cate의 display:none; 이 부분을 삭제해 주시면 됩니다. 다음으로 글갯수를 보이게 하기 위해서는 91번째 줄을 모두 주석처리 해줍니다.

 

CSS 변경 후

위의 이미지는 변경 후 CSS 소스입니다. 나중을 위해 변경한 내용을 주석 처리하여 표시하였습니다. 재수정할 때 바로 찾아보기 편하고 번복할 경우도 있기 때문에 습관을 들이면 좋습니다. 결국에는 CSS를 분석하고 수정하는 작업이 주된 내용이었습니다. CSS 파악이 어느 정도 되다 보니 이것저것 변경하고 싶은 마음이 생기네요.

 

카테고리 글 개수 같은 경우는 블로그 관리 > 콘텐츠 > 카테고리 관리 메뉴 하단 카테고리 설정에서 표시 여부를 수정할 수 있습니다. 다만, 반응형 스킨#1 에서는 적용이 되지 않아 따로 CSS에서 주석처리해줘야 하는 것 같습니다.

 

 

이제 모두 수정되었습니다. 본문 글도 헤치지 않고 보기 좋은 것 같습니다. 참고로 모바일에서 볼 때 화면을 가리지 않을까 걱정했는데 모바일 화면에서는 작동하지 않습니다. 다음에는 카테고리를 상,하위로 분류하는 작업을 해볼까 합니다.