티스토리 블로그 북클럽(Book Club) 스킨에 자동 목차(TOC) 넣기

티스토리 글을 작성할 때 자동으로 목차를 적용할 수 있습니다. 제목 1(H2), 제목 2(H3), 제목 2(H4)를 이용해 글의 목차를 쉽게 작성할 수 있습니다. 이미 작성된 글이라면, H 태그를 이용해 목차(TOC)를 만들 수 있습니다. 목차는 글의 전체 흐름을 보여 줍니다.

 

목차

 

---

티스토리 블로그 북클럽(Book Club) 스킨에 자동 목차 넣기

 

 

 

 

---

 

 

 

 

티스토리 북클럽 스킨 목차(TOC)

글을 작성할 때 자동으로 목차를 적용할 수 있습니다. 

 

 

 

---

 

북클럽 스킨 편집 - HTML 

꾸미기 → 스킨편집 → HTML 을 선택합니다.  </head>와 </body> 위 두 곳에 코드를 추가해야 합니다. 

 

HTML에서 </head> 위에  toc.min.js 코드를 추가합니다.

<!--  목차 커스텀 스크립트 시작-->
<script type="text/javascript" src="./images/jquery.toc.min.js"></script>
<!--  목차 커스텀 스크립트 끝 -->
</head>

 

HTML에서  </body> 위에 다음 코드를 추가합니다.

<script src="./images/script.js"></script>
<!--  목차 커스텀 스크립트 시작-->
<script type="text/javascript">
$(function(){
$("#toc").toc( {content: ".entry-content", headings: "h3" , top: -90, isBlink : true, blinkColor : '#21B9DE' } )
});
</script>
<!--  목차 커스텀 스크립트 끝-->
</body>
</html>

 

 

---

 

북클럽 스킨편집 - CSS

꾸미기 → 스킨편집 → HTML을 선택합니다.  CSS 제일 아래쪽에 다음 코드를 추가합니다.

 

/* 티스토리 북클럽 스킨 목차 - TOC */

.book-toc {
border: 1px solid #ccc;
padding: 10px 10px 0px 15px;
background-color: #f5f5f5;
}

.book-toc ul {
list-style-type: decimal;
}

.book-toc p {
font-weight: 550;
margin-bottom: 7px;
}

#toc * {
font-size: 17px;
color: #676767;
}

#toc a:hover {
color: #f00;
}

#toc ul {
margin-bottom: 0px;
margin-top: 5px;
}

#toc > li {
margin-bottom: 15px;
}

#toc {
margin-left: 10px;
}

#toc > li > ul li {
margin-bottom: 5px !important;
}

 

 

 

---

 

 

 

북클럽 스킨 편집 - 파일 업로드

꾸미기 → 스킨 편집→ HTML을 선택합니다.  파일 업로드에서 jquery.toc.min.js 파일을 추가합니다.

 

jquery.toc.zip

0.00MB

 

 

---

 

글 작성

글쓰기에서 다음의 코드를 글쓰기→HTML 안에 코드를 추가합니다.

 

<p>&nbsp;</p>
<div class="book-toc">
<p>목차</p>
<ul id="toc"></ul>
</div>
<h3 data-ke-size="size23">제목1</h3>
<h3 data-ke-size="size23">제목2</h3>

 

 

 

 

---

 

 

 

마무리

글을 작성할 때 목차(TOC)를 제공하면 전체 글의 흐름을 한눈에 볼 수 있어 가독성이 향상되고, 구글(SEO)이 좋아하는 글이 됩니다. 서식을 이용해 글을 작성하게 되면 글쓰기에 매우 도움이 됩니다. 

 

 

티스토리 블로그 서식 등록 및 글쓰기 꿀팁