티스토리의 카테고리
티스토리의 카테고리는 기본적으로 펼쳐져있으며, 관리자 메뉴에서 접기/펼치기 설정하는 기능이 없다. 따라서, 카테고리가 추가될수록 웹사이트 디자인이 상당히 지저분하게 보일 수 있고 카테고리가 너무 많아서 방문자는 원하는 정보를 찾는데 어려움을 겪을 수 있다.
특히 수익형 블로그를 운영하는 사람들에게는 상당히 치명적인데, 카테고리 하단에 광고를 배치하는 경우 카테고리가 너무 길어서 광고가 노출되지 않을 수 있다. 즉, 사이드바에 광고를 배치하는 것은 무의미한 행위라는 것이다.
JB 스킨, hELLO 스킨, 미넴 스킨에서는 카테고리 접기/펼치기 기능을 지원한다. 카테고리 접기/펼치기 기능을 원하는 경우 해당 스킨을 사용하면 되고 직접 구현하고 싶은 경우 해당 포스팅 또는 서근님, 제이스토리님 블로그를 참고하자.
(티스토리) 사이드바 카테고리 접기/펼치기 버튼 구현하기!
사이드바 카테고리 접기 및 펼치기 버튼 구현 티스토리에서 기본적으로 제공하는 카테고리는 보통 펼쳐진 상태입니다. 만약 본인이 사용하는 스킨에 카테고리 접기 및 펼치기 스크립트 기능이
seons-dev.tistory.com
티스토리 접고 펼치는 토글(toggle) 카테고리(category)
웹사이트 방문자는 카테고리에서 원하는 정보를 찾아 들어가기 때문에, 웹사이트 운영자는 웹사이트 방문자가 원하는 정보를 신속하고 정확하게 찾을 수 있도록 카테고리를 상세하게 구성하기
jinyh.tistory.com
스킨 가이드
티스토리의 스킨 가이드로 이동하면 카테고리 치환자를 볼 수 있다. ##_category_## 치환자는 카테고리가 접힌 상태 ##_category_list_## 치환자는 카테고리가 펼쳐진 상태를 의미한다.
티스토리의 카테고리는 기본적으로 펼쳐져있으므로 스킨 편집의 html 탭에서 ##_category_list_## 치환자를 찾을 수 있다. 참고로 예제로 사용되는 블로그는 더 이상 운영을 안 하는 서브 블로그이며, 기본 스킨인 Obyssey를 적용하였다.
##_category_list_## 치환자를 다음 사진처럼 ##_category_## 치환자로 변경 후 적용해보자.
그러면, 다음과 같이 적용된다.
일단... 안 이쁘다... 디자인이 별로다... 서브 카테고리가 최상위 카테고리인 "분류 전체보기"보다 폰트 사이즈가 크다보니 뭔가 이질감이 생긴다.
결국 원하는 디자인을 적용하기 위해 직접 고쳐야 한다.
접기/펼치기 적용
접기/펼치기 기능을 사용하려면 아래 소스 코드를 HTML 탭의 <body> ~ </body> 사이에 삽입한다.
<script>
$(function() {
$("ul.category_list > li:has(ul) > a").addClass("custom-category-sub").removeAttr('href'),
$("a.custom-category-sub").click( function() {
$(this).siblings().slideToggle();
});
});
</script>폴더(=상위 카테고리)에 custom-category-sub이라는 클래스를 addClass() 메서드를 사용하여 추가하고 href 애트리뷰트를 removeAttr() 메서드를 사용하여 제거한다. href 애트리뷰트를 제거하면 상위 카테고리를 클릭하면 링크가 이동되지 않고 하위 카테고리가 접기/펼치기 된다.
접기/펼치기 기능은 활성화되지만 카테고리가 기본적으로 열려있는 상태다. 블로그 접속시 카테고리가 접힌 상태로 나타나도록 하고 싶은 경우 다음 소스 코드를 CSS탭에 적용한다.
.sub_category_list { display:none }다음은 script와 css를 적용한 결과다.
다음 포스팅은 접기/펼치기를 꾸미는 방법에 대해 설명하도록 하겠다.
'티스토리 > 티스토리 스킨 제작' 카테고리의 다른 글
| [티스토리]코드블럭 highlight 적용방법 (1) | 2022.12.21 |
|---|
댓글