티스토리 목록(목차) 자동 만들기 - 간단, 초보 용

 

 

목차

 

 

글의 맨 위에 목차가 있으면 처음 읽을 때는 처음부터 끝까지 쭉 읽는 경우가 많기 때문에 별 도움이 안되는 경우도 있지만, 어떤 이유로든 다시 읽거나 여기저기를 참고하고자 찾아가면서 읽을 때는 목차가 큰 도움이 됩니다. 더구나 긴 내용의 경우 목차가 없으면 필요한 내용을 못찾을 수도 있기 때문에 내용이 길수록 내용이 중요할수록 목차의 필요성은 더 커집니다.

 

jquery.toc.min.js 파일 다운로드 

이 파일은 공개소스 입니다. 공개해 주신 분께 감사 드립니다. 사실 이런 기술적인 노하우를 공개해 주시는 분들 덕분에 저 같이 프로그래밍을 할 줄 모르는 사람도 이런 좋은 기능을 쓸 수 있는 것 같습니다. 다시 한번 감사 드립니다. 

jquery.toc.min.js

0.00MB

 

jquery.toc.min.js 파일 업로드 

다운로드 받은 파일을 "관리 > 스킨편집 > 파일업로드" 기능으로 블로그 홈디로토리에 업로드 합니다. 

 

HTML 코드 삽입

아래 내용을 </head> 바로 윗부분에 삽입해 넣으세요. 

<!-- 목차 #1 -->
<script type="text/javascript" src="./images/jquery.toc.min.js"></script>
<!-- 목차 #1 끝 -->

 

CSS 코드 추가하기 

아래 CSS 코드를 "관리 > 스킨편집 > html편집 > CSS" 메뉴로 들어가, 맨 아래 부분에 추가해 주세요. 

/* 티스토리 자동목차 */
#toc * { font-size: 16px; color: #444 !important; }
#toc { margin-left: 0px; }
#toc a:hover { font-weight:bold; color: #222 !important; }
#toc ul, #toc ol { margin-top: 5px; margin-bottom: 0px; }
#toc > li { margin-bottom: 0; margin-top: 7px; }
#toc > li > a { text-decoration:none; font-weight:bold; border-bottom:1px dotted #bbb; transition:color .3s ease; }
#toc > li > ul,
#toc > li > ol { margin-top: 0; margin-bottom: 0; }
#toc > li > ul > li,
#toc > li > ol > li { font-size: .95em; margin-bottom: 5px; margin-top: 5px; }
#toc > li > ul > li > a,
#toc > li > ol > li > a { font-size: 1em; text-decoration:none; }
#toc > li > ul > li > ul, #toc > li > ol > li > ol { margin-bottom: 0; }
#toc > li > ul > li > ul > li,
#toc > li > ol > li > ol > li { font-size: .95em; margin-bottom: 0px; margin-top: 0px; }
#toc > li > ul > li > ul > li > a,
#toc > li > ol > li > ol > li > a { font-size: .975em; text-decoration:none; }
/* 티스토리 자동목차 끝 */

 

 

서식 등록하기 

"관리 > 콘텐츠 > 서식관리"로 들어가 목차를 위한 서식을 만들어 둡니다. (서식1) 하나는 목차들의 머리가 점으로 되어 있는 것으로 만들고, (서식2) 두번째는 목차들의 글머리가 '숫자'로 되어 있는 것, 이렇게 두가지를 만들어 두고 필요에 따라 꺼내 쓰면 됩니다. 

 

만들 때는 글쓰기 모드 중 '기본모드'에서는 만들 수 없으며, html 모드에서 만들어야 합니다.  

(숫자형 목록)
<p data-ke-size="size18"><b>목차</b></p>
<ol id="toc" style="list-style-type: decimal;"></ol>
<script type="text/javascript"> $(function(){ $("#toc").toc({content: ".tt_article_useless_p_margin", headings: "h2, h3, h4"}); });</script>

(점스타일 목록)
<p data-ke-size="size18"><b>목차</b></p>
<ul id="toc" style="list-style-type: decimal;"></ul>
<script type="text/javascript"> $(function(){ $("#toc").toc({content: ".tt_article_useless_p_margin", headings: "h2, h3, h4"}); });</script>

 

 

서식은 원하는 대로 만들 수 있는 방식은 매우 많습니다. 

 

사용법 

"글쓰기 > 기본모드 > 점세개 > 서식 > 서식선택" 순으로 메뉴를 들어가 아까 위에서 만들어둔 '서식 2개' 중 하나를 선택해서 '글'에 삽입해 주면 그 위치에 글을 쓰는 중간중간에 '제목' 스타일로 쓴 행에 있는 글자들이 순서대로 '목차(목록)'이 나타나게 됩니다. 

 

이때 흔히 인용부호를 붙여서 다른 글들과 구분되게 하면 더 알아보기 쉽습니다.