티스토리 블로그 카테고리 숫자 나타내는 방법, 없애는 방법

티스토리 블로그를 운영하면서 재밌는 점은 스킨을 입맛대로 요리조리 수정할 수 있다는 것입니다. 저는 JB SKIN을 사용하면서 (제 능력이 닿는 선에서) 제 입맛에 맞게 수정해서 쓰고 있습니다. 카테고리 부분도 넣을 거 넣고 뺄꺼 빼고 하다보니 지금의 카테고리 모양이 되었는데요. 카테고리별로 몇 개의 글이 있는지 알려주는 숫자를 뺐던 적도 있고 넣었던 적도 있습니다.

 

 

기본적으로 [블로그관리] - [카테고리관리]- 하단에 "카테고리별 글 수를 표시합니다/표시하지 않습니다" 처럼 선택할 수 있게 돼있습니다.

 

하지만 저는 요리조리 스킨을 건드리다보니 저 기능이 먹히지를 안더라고요. 뭘 건드렸는지...(하하) 그래서 스킨 자체를 다시 또 건드려보기로 했습니다. 스킨 편집 화면의 CSS편집을 통해서요. 혹시 저처럼 스킨 편집 화면에서 카테고리 글 개수를 표출하거나 표출하지 않게 하시려는 분들은 아래 방법을 참고해주시면 도움될 것 같습니다.

 

1. 티스토리 [블로그 관리]에서 [스킨편집]으로 들어가 [HTML편집] - [CSS]로 들어간 후, F12버튼을 누르면 아래 파란색 네모박스 부분이 나타납니다.(저는 '크롬브라우저'를 사용하여 아래와 같은 '개발자도구'가 나타납니다.) 이 개발자도구가 나타나면 아래 빨간색 부분의 화살표 표시에 마우스를 올려 클릭합니다.

 

2. 그다음에 HTML, CSS코드를 보고싶은 부분에 마우스를 갖다댄 후 클릭을 하면 개발자도구에 해당 부분의 HTML코드가 나타납니다. 여기서 class명을 확인합니다. 제가 사용하는 스킨의 경우 sub_category_list라고 이름이 설정돼있습니다. class명은 스킨 제작자가 짓기 나름이기 때문에 스킨마다 다르겠지만, 카테고리 부분이기 때문에 대부분 category라는 단어가 포함돼있을 가능성이 큽니다.

3. 이제 CSS 편집화면의 아무곳에나 마우스를 한번 클릭하고, Ctrl+F키를 누르면 아래와 같이 노란색 부분이 뜨고, 위에서 찾은 class명을 입력한 후 엔터를 치면 검색이 됩니다. 그러면 아까 위에서 마우스오버 한 부분에 대한 CSS코드가 어떻게 짜여져 있는지 볼 수 있습니다. 

 

4. 여기서부터는 약간 감(feel)의 영역입니다.(+아주 약간의 HTML과 CSS에 대한 지식). 클래스명을 검색하여 나타난 부분을 자세히 보면, display:none; 이라는 부분이 보입니다. 'none'이라는 단어은 '아무것도 없다'는 뜻입니다. 이 부분을 'block'으로 바꿔주고 적용버튼을 누르고, 다시 블로그를 들어가보면 카테고리별 글 수가 표출되는 것을 확인할 수 있습니다.

 

카테고리별 글 수를 표출하려면 : display:block;

카테고리별 글 수를 표출하지 않으려면 : display:none;

모두 성공하셨나요?

포인트는 내가 수정하고자 하는 부분이 어떤 class명으로 돼있는지 크롬 개발자도구를 통해 확인하고, 해당 class명을 CSS편집화면에서 찾아가서 요리조리 수정해보면 대부분의 코드 문제들은 해결할 수 있을 것 같습니다. 혹시나 수정하고 새로고침 눌렀는데 변화가 없으면 CSS편집화면에서 ctlr+z를 눌러 없었던 것으로 하고 다시 적용버튼을 누르면 됩니다.^^