티스토리 카테고리 글 개수 카운터 삭제 (없애는) 방법

친효스킨에도 기본적으로 있는 티스토리 카테고리 글 개수 표시 기능! 이것을 없애려면 다음의 CSS 스타일을 추가로 삽입하면 됩니다. 티스토리의 카테고리 구조는 치환자를 대신해서 사용되고 있습니다. 치환자란 티스토리 내에서 제공하는 스크립트를 기반으로, 일종의 아이디와 비슷합니다. 티스토리 카테고리라는 아이디를 A라고 할 때, 티스토리를 구성하는 서버 파일 중에서 A에 대한 구조를 스크립트에 의해 불러오게 됩니다. 이 과정에서 HTML 및 CSS의 기본 뼈대가 구성됩니다.

일반적으로 스킨의 HTML 구조에서는 카테고리의 뼈대를 살펴볼 수 없습니다. 크롬이나 파이어폭스같은 브라우저에서 제공하는 소스 검사 기능을 사용해서 살펴볼 수 있습니다. 티스토리가 업데이트됨에 따라 기본 뼈대의 구성은 바뀔 수 있으며, 스타일 또한 변경될 수 있습니다. 그래서 티스토리는 모든 스킨을 일괄적으로 관리하기 위해 치환자라는 기능을 사용하는 것 입니다. 서버에서 하나만 바꾸면 모든 티스토리의 스킨에 일괄적으로 적용되기 때문에 유지보수 차원에서는 매우 간편한 방법이 됩니다.

크롬에서 HTML 뼈대 살펴보기

크롬에서 자신의 티스토리로 접속합니다. 여기에서는 친효스킨을 기준으로 설명드리겠습니다. 친효스킨의 카테고리에서 마우스 오른쪽 버튼을 누릅니다. 그리고 검사 항목으로 들어갑니다.

Elements 항목에서 HTML 구조를 볼 수 있습니다. 보니까 span 태그로 구성되어 있다는걸 확인할 수 있습니다. 클래스명은 c_cnt 로군요. 따라서 CSS에서 스타일을 부여해서 사용자가 원하는 스타일대로 만들 수 있습니다. 없애려고 한다면 단순히 보이지 않게만 하면 될 것 같으니 display: none; 을 사용하면 될 것 같습니다.

전체보기에 대한 글 개수 카운터도 위와 같은 방법으로 살펴보면 됩니다. 태그와 클래스명이 같습니다.

CSS 스타일 적용하기

이제 HTML 구조와 CSS 클래스명을 파악 했으므로 스타일을 지정할 수 있습니다. 위에서 말씀드린대로 보이지 않게 하기 위해서 display: none; 을 사용하면 될 것 같습니다. 그러면 이렇게 구성하면 되지 않을까 싶습니다.

/* 카테고리 전체보기 글 개수 숨기기 */

ul.tt_category .link_tit span.c_cnt {

display: none !important;

}

/* 카테고리 리스트 대분류 글 개수 숨기기 */

ul.tt_category ul.category_list a.link_item span.c_cnt {

display: none !important;

}

/* 카테고리 리스트 소분류 글 개수 숨기기 */

ul.tt_category ul.category_list ul.sub_category_list a.link_sub_item span.c_cnt {

display: none !important;

}

위의 스타일 태그는 아래의 첨부파일에서도 확인 가능합니다.

티스토리 카테고리 글 개수 숨기기 CSS.txt

한번에 몰아서 사용해도 되지만 일부러 나눈 이유는 어떤 사용자는 전체보기만 적용시키고 싶을수도 있고, 또 다른 사람은 카테고리 대분류 혹은 소분류 목록에만 적용시키고 싶을 수 있기 때문입니다. 각자의 취향에 맞춰서 사용하시라고 일부러 나눠 놓은 것 입니다. 또한 CSS 선택자가 구체적이여야 다른 HTML의 영역에 영향을 주지 않습니다. 예를 들어서 c_cnt 에 대한 선택자만 마크업하고 사용을 하게 되면, 스킨을 구성하는 HTML의 클래스명 중 c_cnt를 사용하는 모든 태그가 사라지게 될 것 입니다. 즉 사이드바의 글 보관함 모듈에도 영향을 주게 될 것 입니다. 그래서 카테고리에만 적용할 수 있도록 자세한 경로를 작성하는 것 입니다. 또한 티스토리에서 제공하는 기본 CSS 스타일이 있기 때문에 사용자가 지정한 스타일을 강제 적용시키기 위해서 !important를 사용해야 합니다.