티스토리 북클럽 스킨 자동목차(TOC) 만들기

목차

 

오늘은 티스토리 북클럽스킨에 자동목차(toc)를 넣는 방법에 대해 알아보겠습니다. 굳이 해야하나싶지만 구글 노출을ㄴ 노리신다면 필수로 넣어야하는 요소 중에 하나이죠. 이거말고도 구글 SEO가 궁금하신 분들을위해 추후 차근차근 설명해드리도록 하겠습니다.

1. 파일 업로드

파일을 다운받으시고 압축을 풀어주신 후 스킨편집- 파일업로드에 들어가서 업로드해주세요

jquery.toc.min.js

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"});
});
</script>

3. css코드 수정

아무곳에서 넣습니다.

/* 목차
 만들기 */
.book-toc {
    position: relative;
    border: 1px solid #b0d197;
    padding: 10px 20px 10px 15px;
}
.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;
}

4. 서식만들기

서식만들기에서 아래 코드를 넣습니다. 그런 후 글을 쓸때마다 사용하시면 됩니다. 수정을 원하시면 CSS를 추가수정하시면 됩니다. 유용하게 사용하시길 바랍니다.

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

함께보면 좋은 글

티스토리 북클럽 스킨 블로그이름 h1태그 제거하기