티스토리 목차 자동으로 만드는 방법-2022년, 정리버전

목차

 

티스토리 목차 자동으로 만드는 방법은 간단하게 정리하면 1. 첨부된 파일을 다운로드하고 2. html 편집을 하고 3. 서식에 집어넣어서 편하게 쓴다.입니다. 목차를 잘 만드셔서 구글 seo점수 높이셔서 상위 노출하세요.

 

1. 첨부된 파일을 다운로드한다.

아래 파일을 다운로드하신 다음에 압축을 풀어줍니다. 압축을 풀면 2개의 파일이 있는데요 2개 모두 다 필요합니다. 아래 설치 파일을 눌러서 다운로드 받으세요.

jquery.toc.zip

0.00MB

 

반응형

2. html 편집

다음으로 html 편집에 가셔서 파일 업로드를 눌러줍니다. 파일 업로드에 압출 해제된 파일 2개를 모두 넣어주세요. 첫 번째로 jquery.toc.min.js를 임포트 하기 위해서  </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>

1) css편집

그리고 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로 바꾸신 뒤에 아래 내용 복붙 하시면 됩니다. 아래 복붙을 하셔서 서식에 집어넣으셔서 사용하시면 미리 보기로면 목차가 2개가 나오게 됩니다. 

<div class="txc-textbox" style="border-style: solid; font-weight: bold; padding: 10px; border-width: 1px 1px 1px 5px; border-color: #fff;">
<script type="text/javascript" src="https://tistory3.daumcdn.net/tistory/4840878/skin/images/script.js"></script>
<p data-ke-size="size16">목차</p>
<ul id="toc" style="list-style-type: disc;" data-ke-list-type="disc"></ul>
<script type="text/javascript"> $(function(){ $("#toc").toc( {content: ".tt_article_useless_p_margin", headings: "h2,h3,h4", top:-30, isBlink:true, blinkColor:'#21B9DE'} )}); </script>
</div>
<p data-ke-size="size16">&nbsp;</p>

 

목차가 2개 나오죠. 그럴때는 아래 있는 스크립트를 지워주시면 됩니다. 

그럼 아래 처럼 목차가 자동으로 생성됩니다. 

4. 사용법

사용법은 제목1로 하시면 첫 번째 동그라미이고 제목 2로 글을 쓰시면 안쪽 동그라미가 됩니다. 제목 3으로 글쓰시면 제목 2의 안쪽 동그라미가 되겠죠. 이렇게 글쓰시면 됩니다. 쉽죠.

 

정리

티스토리에서 목차 만들기를 보니까 수동으로 하는 것이 있는데 수동은 너무 귀찮아서 못쓸 것 같고, 자동으로 만드는 것들은 설명이 난해해서 어려워서 정리해봤습니다. 목차 만드는 방법 1. 파일 다운로드 2. 파일 업로드 및 코드 복붙 3. 서식 설정 3단계로 하시면 됩니다. 목차 만드셔서 상위 노출하세요. 잘 안되시면 댓글 달아주세요.