티스토리 자동 목차 만드는 방법

다른 티스토리를 방문했을때, 자동목차를 보며 이건 어떻게 만드는 거지 하고 궁금해 하셨던 분들 있을겁니다. 글을 쓸때 구글 SEO를 최적화를 위해 자동목차를 만든다면 구글 검색에 더 좋은 점수를 얻어 검색 노출에 더 좋은 결과를 얻을수 있을겁니다. 또한 자동목차가 있으면 블로그 방문자들이 목차를 보고 보고 싶은 곳을 바로 볼수 있으니 많이 편리할거라 여겨집니다.

 

목차

1. 티스토리 자동목차 만들기 파일 다운로드

jquery.toc.min.js

0.00MB

2. 관리자모드 → 꾸미기 → 스킨편집 → HTML편집 → 다운로드 파일업로드

3. HTML 편집하기

1) </HEAD>위에 밑에 코드 복사 붙여넣기

<!-- TOC 자동목차 코드 시작 -->
<script src="./images/jquery.toc.min.js"></script>
<!-- TOC 자동목차 코드 끝 -->

2) </BODY>위에 밑에 코드 복사 붙여넣기

<!-- TOC 자동목차 Script 시작 -->
<script>
 $(document).ready(function() {
  var $toc = $("#toc");
  $toc.toc({content: ".tt_article_useless_p_margin", headings: "h2,h3"});
 });
</script>
<!-- TOC 자동목차 Script 끝 -->

★ headings: "h2,h3"는 제목1, 제목2 여기에 제목3을 추가하고 싶으면 headings: "h2,h3,h4"

4. CSS 들어가서 맨아래 밑에 코드 복사 붙여넣기

/* TOC 자동목차 시작*/

.index_toc a:link{color:000;border:none;}
.index_toc {
 border: 1px solid #cccccc;
 background-color: #F2F4F7;
 font-weight:bold;
 padding: 5px;
}

#toc {padding-left:25px;}
#toc li > ul > li {list-style: none;}
#toc li > ul {padding: 0px 0 0px 0;}

/* TOC 자동목차 끝*/

★ 배경 색상을 바꾸고 싶다면  border: 1px solid■ #cccccc;  background-color:■ #F2F4F7; 사각형에 마우스 커서를 이동하면 위에 화면처럼 색상을 선택할수 있는 창이 자동으로 나타납니다.

모든 스킨편집이 끝났으니 적용 클릭

5. 콘텐츠 → 서식관리 → 글쓰기

1) 콘텐츠창  서식관리 들어가서 글쓰기에 HTML 모드 변경후 밑에 코드 복사 붙여넣기 

<div class="index_toc">
<p>목차</p>
<ul id="toc" style="list-style-type: disc;" data-ke-list-type="disc"></ul>
</div>

★ style="list-style-type: disc;" data-ke-list-type="disc" disc는 ●모양이 나타납니다.  아무것도 안나오게 하려면 none으로 변경하시면 되고 다른 모양을 넣으려면 다른 코드를 넣어주시면 됩니다.

모든 작업 종료후 완료 클릭하면 밑에 화면처럼 서식이 만들어집니다.

자동서식만드는 모든작업은 끝났습니다.

글쓰기를 하고 ···클릭 서식 클릭 만들어 놓은 서식 클릭하면 화면에 목차만 나타납니다. 당황하지 마시고 미리보기를 하면 밑에 화면처럼 작업한 글이 목차에 나타나는 것을 보실수 있습니다.

티스토리에 자동목록을 만들어서 조금이라도 구글 검색에 노출될수 있는 기회가 되기를 바랍니다.

티스토리를 글로벌하게 만들고 싶다면 아래방법을 확인하세요.

글로벌 티스토리 설정하기(구글 다국어 위젯 설정)

 

티스토리에서 나만의 코드블록 만드는 방법을 알고싶으시면 밑에 방법을 확인해보세요.

티스토리 글쓰기에서 나만의 코드복사 블럭 삽입하는 방법