티스토리 카테고리 접고 펴기
- 티스토리스킨수정/사이드바
- 2013. 9. 22. 01:00
티스토리 사이드바에 위치한 카테고리를 접고 펴는 방식에 대한 포스팅입니다.
예전에 발행한 글인데 실수로 비공개로 발행이 되어서 공개로 전환합니다.
1. html 을 수정합니다.
2. css 를 수정합니다.
3. jquery 를 추가합니다.
에드센스 스킨에 적용되었던 방법입니다.
기존의 자바스크립트를 이용하는 방법은 아래의 링크를 참고하세요.
카테고리 펼쳐보이기 -> http://demun.tistory.com/919
원하는 곳만 펼치거나 접거나 할 수 있습니다.
아이콘을 클릭하면 접거나 펼쳐지고, 카테고리 텍스트를 클릭하면 기존의 카테고리로 이동이 되는 방식입니다.
펼쳐진 카테고리는 리스트 아이콘 이미지가 보이고, 접혀진 곳은 플러스 아이콘이 보여집니다.
먼저 결과 화면을 보여드리겠습니다.
에드센스 스킨에 적용된 화면.
로컬 컴퓨터에서 확인한 화면.
우선 로컬에 컴퓨터에서 잘 되는지 확인한 후 각자의 스킨에 적용하세요.
로컬 컴퓨터에서 하는것을 설명한 후 스킨에 적용하는 방법으로 진행하겠습니다.
내용을 모르고서는 적용하기 힘듭니다.
고수분들은 제외겠지만.....
결론부터 이야기하자면 티스토리에서 카테고리를 표현하려면 카테고리 치환자 하나면 표시하면 됩니다.
카테고리가 속해있는 대략적인 사이드바의 모습입니다.
위 형식이 아닌 ##_category_## 는 티스토리에서 제공하는 접혀있는 형태입니다.
위처럼 펼쳐져 있는 치환자를 써야 css 로 스타일을 잡고 자바스크립트로 펼쳐지거나 접혀지게 합니다.
로컬컴퓨터에서 테스트를 해보려면 아래와 같은 형식으로 작업을 해봅니다.
즉 #category ul li ul li ul li 까지 나오는 depth 입니다.
<div id="category">티스토리치환자</div> 하면 저런 구조입니다.
2. CSS 살펴보기
먼저 스타일에 사용되는 이미지는 총 3개 입니다. 먼저 사용된 이미지를 보시죠.
이렇듯 총 3개의 이미지 입니다.
스타일은 아래와 같습니다.
이미지에서 보듯 중요한것은 배경입니다.
평상시와 펼쳐있을때는 file 아이콘이고, 접혀있을때는 plus 아이콘 이미지가 보이는 형식입니다.
먼저 jquery 를 로드합니다.
맨먼저 클래스를 설정합니다. 각 뎁스마다 클래스를 지정하고 삭제합니다.
두번째로는 하위 카테고리의 높이를 설정합니다.
하위메뉴가 없으면 folder_none 클래스를 추가해서 파일모양의 아이콘이 보여지도록 합니다.
이제 클릭 이벤트가 들어갑니다.
클릭하면 보여지고 감쳐집니다. 그때마다 클래스가 변경이 되어서 파일명 아이콘과 플러스 아이콘이 번갈아 보여지게 됩니다.
맨 마지막에는 기본적으로 접혀있게 할곳을 지정합니다.
첫번째 카테고리는 0번부터 시작합니다.
각자의 카테고리마다 접혀있게 하고자 하는곳이 다르기때문에 이것은 본인이 수정해야 합니다.
수정이라 해봤자 숫자만 바꿔주면 됩니다.
예제에서는 2라고 적혀있으니 세번째 카테고리겠지요....
완성된 파일은 다운로드해서 로컬에서 보시기 바랍니다.
초보자에게는 이 부분이 힘든부분입니다.
간단한것 같으면 그냥 적용하면 되는데, 이것은 html, css, jquery 까지 손을 보야하니까요.
그리고 한가지더 본인의 스킨 스타일을 어느정도 알고 있어야 합니다.
먼저 마구잡이로 몇분의 스킨을 예로 들어보겠습니다. 나쁜뜻은 아니니 이해해주시겠지요.
저는 크롬 개발자 도구로 보았지만 여러분은 파이어폭스나, 사파리, 오페라, 익스플로러 개발자도구 등등으로 보셔도 됩니다. F12 누르면 나옵니다.
html 변경.......
잠시 확인하겠습니다.
html 구조에서 제일 중요한것은 티스토리의 카테고리 치환자가 어디에 잇느냐 입니다.
제가 알려준것은 바로 <div id="category">티스토리치환자</div> 입니다.
바로 이 부분을 어디에 넣으면 되느냐를 살펴보는겁니다.
아래 스킨을 보시면 <div class="contents">.....</div> 이 부분을 <div id="category">티스토리치환자</div> 로 교체하면 됩니다.
그럼 다른 스킨을 볼까요?
이 스킨은 <ul>.....</ul> 부분을 교체하면 됩니다.
그럼 다른스킨은?
이 스킨은 table 로 되어 있네요. 바로 이부분을 수정해주면 됩니다.
css 추가.....
css 는 스킨편집에서 style.css 에서 제일 아래에 추가하면 됩니다.
css 특성상 제일 나중에 설정한 것이 위의 것을 덥어 씁니다.
그러니 제일 아래에 적용하면 됩니다.
jquery 추가.....
jquery 는 스킨편집에서 skin.html 에서 </head> 바로 위에 넣어도 되고,
</body> 위에 넣어도 됩니다.
한가지 아래 이미지처럼 <s_t3> 있다면 그 위에 넣어야 합니다.
이것은 티스토리 태그로써 그 위에 넣어야 자바스크립트가 작동이 됩니다.
이제 각각에 생김새, 설명, 그리고 삽입하는 방법과 다른 스킨의 예제까지 보았으니 적용할 수 있겠죠???
모르시면 댓글 주세요....
zip 파일 안에는 아래처럼 총 6개가 있습니다.
실질적으로 필요한것은 index.html 과 style.css 만 있으면 됩니다.
나머지는 그냥 참고하시라고 같이 올립니다.
category.html 은 티스토리 치환자가 들어가 잇는 모습을 볼 수 있습니다.
다운로드.
categoryToggle.zip