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

이번 포스팅에서는 '티스토리 목차 만들기 팁'을 알려드리겠습니다. 우선 저는 '북클럽 스킨'을 적용하고 있으며, 이제 막 블로그를 시작하는 입장에서 많은 게시물을 보았지만 코드를 어디에 넣어야 하는지 왜 제대로 적용이 안되는지 잘 모르겠더라고요. 그래서 저와 같은 분들에게 조금이나마 도움이 되고자 최대한 쉽게 설명드리도록 하겠습니다.

자동 목차의 장점

자동 목차 양식을 한번 저장해놓으면 글을 작성할 때마다 코드를 넣을 필요 없이 서식 탭에서 삽입이 가능해요. 그렇게 생성된 목차에는 링크도 적용이 돼서 제목1, 제목2 탭으로 쉽게 이동이 가능하며, 페이지 정리도 훨씬 깔끔하게 할 수 있다는 장점이 있습니다. 그럼 목차 만드는 방법을 순서대로 알아보겠습니다.

티스토리 목차 만들기(1)

https://ndabas.github.io/toc/assets/jquery.toc.zip

우선 해당 링크를 통해 알집 파일을 다운로드하여 주세요. 압축을 풀어서 'jquery.toc.min.js' 파일을 티스토리 관리자 화면에서 스킨 편집 - html 편집 - 파일업로드에 업로드합니다. 그리고 해당 파일이 정상적으로 업로드됐는지 확인해주세요.

티스토리 목차 만들기(2)

파일 업로드가 끝났으면 지금부터는 코드를 삽입할 겁니다. 파일 업로드 탭 옆에 있는 'HTML' 탭에 들어가 주세요. 그리고 스크롤을 제일 아래쪽으로 내려보시면 </body>가 있을 거예요. </body> 바로 위에다가 이 코드를 넣어주세요.

// 목차 생성

$(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)

코드 작업은 마무리가 됐고, 이제는 목차 서식을 만드는 작업을 할 거예요. 서식을 저장해놓으면 글을 작성할 때마다 서식 탭에서 불러오기 해서 목차를 삽입할 수 있으니 이 작업이 꼭 필요합니다. 이제 관리자 화면으로 다시 나오셔서 콘텐츠 - 서식관리 - 서식 쓰기 클릭해주세요.

그러면 해당화면이 나올 거예요. 제목은 편하게 작성하시고 화면과 같이 모드를 'HTML'으로 변경해주세요.

그리고 마지막으로 아래 글을 붙여 넣으시고 완료를 눌러주세요. 이제 서식 메뉴에 들어가시면 방금 작성한 서식이 보이실 거예요.

</div>

티스토리 목차 만들기(5)

이제 제대로 만들어졌는지 확인해보겠습니다. 글 작성 화면에서 더보기 메뉴 - 서식 클릭하셔서 목차 생성하시면 됩니다.

목차가 정상적으로 적용된 화면입니다. 순서대로 따라 하셨으면 분명 이렇게 적용이 되셨을 거라고 봅니다.

마무리

최대한 쉽게 설명한다고 했는데 보시는 분들이 어떠실지 모르겠네요. 그리고 저도 다른 포스팅을 참고해서 작성한 글입니다. 조금씩 수정을 거쳐서 지금의 목차를 만들었기 때문에 약간의 차이가 있을 순 있지만 이 블로그에도 자세한 설명이 있으니 한 번씩 참고해보시라고 링크 남겨두겠습니다. https://sangminem.tistory.com/307

티스토리 글에 자동으로 목차 넣기

목차를 넣고 싶긴한데 글 쓸 때마다 매번 수작업으로 만든다면 상당히 번거롭겠죠. 그래서 jQuery 플러그인 Table of Contents(TOC)를 이용하여 자동으로 넣는 방법을 소개합니다. 저는 제목1, 제목2로

sangminem.tistory.com

- 오늘의 포스팅이 도움이 되었다면, 구독, 추천, 댓글 남겨주시면 감사하겠습니다 -

저작자표시 비영리 변경금지

인플란트 이야기