티스토리에서 목차 넣는 3단계+더 쉽게 정리

목차

티스토리 상위 노출과 글의 가독성을 높이기 위해서는 목차가 필수인데요. 목차를 만드는 방법을 간단하게 정리해봤습니다. 목차 만드는 방법을 3단계로 설명하면 첫 번째는 파일을 다운로드하여 업로드한다. 두 번째는 아래 있는 코드를 지정된 위치에 복사, 붙여 넣기 한다. 3단계는 서식으로 지정한다.입니다.

1. 파일 다운 및 업로드

자바 스크립트 파일을 다운로드합니다.

jquery.toc.min.js

0.00MB

 

코드.txt

0.00MB

 

 

 

 

관리 페이지로 들어가 꾸미기로 들어가 스킨 편집 들어가서 파일 업로드를 클릭하시고 아래쪽에 있는 추가 버튼을 눌러줍니다.  그럼 파일이 추가됩니다. 

 

추가로 코드 복사가 안되실까봐 코드도 올려두었습니다. 코드 복사 안되시면 다운받으셔서 사용하세요.

 

 

2. 코드 삽입

스킨 편집에 html 편집에 들어가서 </body> 윗부분에 아래 코드를 복사 붙여 넣기 합니다.

<script src="./images/jquery.toc.min.js"></script>
<script>
    // 목차 생성
    $(document).ready(function() {
        $("#toc").toc({content: ".tt_article_useless_p_margin", headings: "h2,h3,h4"});
    });
</script>

 

다음은 html이 아니고 css탭으로 이동하여 목차 스타일과 글자 스타일을 넣어줍니다.

넣으실 때 중괄호 사이에 넣으시면 안 되고 이미 있는 코드 중 중괄호가 끝나는 부분에 한 줄 띄고 넣어주세요. 

/* 목차 스타일 */
.book-toc {
    position: relative;
    width: fit-content;
    border: 1px solid #b0d197;
    padding: 10px 20px 10px 15px;
    z-index: 1;
}
.book-toc:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #b0d197;
    z-index: -1;
    opacity: 0.1;
}
.book-toc p {
    font-weight: bold;
    font-size: 1.2em !important;
    color: #396120;
}
#toc * {
    font-size: 20px;
    color: #000 !important;
}
#toc {
    margin-bottom: 0;
}
#toc a:hover {
    color: #000;
}
#toc ul {
    margin-top: 5px;
    margin-bottom: 0px;
}
#toc > li {
    padding-left: 0;
    text-indent: 0;
    list-style-type: disc;
    margin-bottom: 10px;
}
#toc > li > a {
    text-decoration:none;
}
#toc > li > ul {
    padding-left: 20px;
    margin-top: 0;
    margin-bottom: 0;
}
#toc > li > ul > li {
    font-size: 0.87em;
    padding-left: 0;
    text-indent: 0;
    list-style-type: disc;
    margin-bottom: 0;
    margin-top: 5px;
}
#toc > li > ul > li > a {
    font-size: 1em;
    text-decoration:none;
}
#toc > li > ul > li > ul {
    padding-left: 10px;
    margin-top: 0;
    margin-bottom: 0;
}
#toc > li > ul > li > ul > li {
    font-size: 0.87em;
    padding-left: 0;
    text-indent: 0;
    list-style-type: disc;
    margin-bottom: 0;
    margin-top: 3px;
}
#toc > li > ul > li > ul > li > a {
    font-size: 0.875em;
    text-decoration:none;
}

/* 글 제목1,2,3 스타일 */
.tt_article_useless_p_margin h2 {
	text-align: left;
	border-left: #517135 12px solid;
	border-bottom: 1px solid #517135;
	padding: 3px 0 10px 10px;
	margin: 30px 0 20px 0;
}
.tt_article_useless_p_margin h3 {
	text-align: left;
	border-left: #548a25 8px solid;
	border-bottom: 1px solid #548a25;
	padding: 3px 0 10px 10px;
	margin-bottom: 15px;
}
.tt_article_useless_p_margin h4 {
	text-align: left;
	border-left: #71b932 6px solid;
	border-bottom: 1px solid #71b932;
	padding: 3px 0 10px 10px;
	margin-bottom: 15px;
}

3. 목차 서식 넣기

목차 서식 등록을 해줍니다. 관리 페이지에 콘텐츠에 서식관리 가서 서식 작성에 들어가서 일반 모드가 아닌 html모드로 바꾸시고 복붙 해주세요.

<div class="book-toc">
  <p>목차</p>
  <ul id="toc"></ul>
</div>

 

4. 사용법

목차 서식으로 불러오신 뒤 목차를 원하는 곳에 제목 1 제목 2 제목 3으로  문단 모양을 바꿔주시면 됩니다.

이렇게 쓰시면 자동으로 사용됩니다. 

목차 넣는 방법이 검색해도 너무 어렵게 쓰여있어서 논문 수준이라 깔끔하게 정리해봤습니다. 이렇게 3단계로 파일 다운로드하여 업로드하고, 코드 넣어주고, 서식 넣어주면 3단계로 깔끔하게 목차를 넣을 수 있습니다.