[티스토리 자동 목차(TOC)] 쉽게 만들기(3분), 포스팅별 적용

블로그를 찾아주는 분들의 가독성과 구글 SEO를 위해 목차는 중요한 역할을 합니다. 이번 포스팅에서는 목차가 필요한 포스팅에 자동으로 깔끔한 목차(TOC)를 설정할 수 있는 방법을 알려드립니다. 보통 설정방법 2가지로 '목차생성 파일 사용'과 '자바스크립트 코드 삽입' 입니다. 저는 사용 및 관리가 편한 '목차생성 파일 사용' 방법을 선택했고, 깔끔한 디자인으로 설정했습니다.

목차

 

 

자동 목차(TOC) 만드는 순서

 

파일 다운로드와 HTML만 적용하면 바로 사용할 수 있는 방식입니다.(CSS 적용 없음)

차근차근 따라하시면 금방(3분이내) 완성된것을 확인하실 수 있습니다.

 

1. 자동 목차 파일(jquery.toc) 다운로드

2. 티스토리에 파일 적용

3. 자동목차 코드 HTML에 넣기

4. 서식 만들기 : 각 포스팅에 쉽게 적용 

5. 포스팅에 자동 목차 서식 적용하기

 

 

자동 목차 파일(jquery.toc) 다운로드

앞서 말했듯이, 무료로 배포되어 있는 '자동 목차(TOC) 생성 파일'을 다운로드 하여 셋팅하겠습니다.

 

아래의 파일을 다운 받아서 압축을 풀어줍니다.

jquery.toc 폴더 아래 2개의 파일(jquery.toc.js, jquery.toc.min.js)이 생성됩니다.

 

jquery.toc.zip

0.00MB

 

 

 

티스토리에 파일 적용

위 다운로드 한 파일을 티스토리에 적용시킵니다. 차근차근 따라하면 쉽습니다.

 

파일 적용 순서

① 티스토리 관리 > 꾸미기 > 스킨 편집

② html 편집

③ 파일업로드

④ +추가

⑤ 위 다운로드한 2개의 파일(jquery.toc.js, jquery.toc.min.js) 선택하여 열기(업로드)

⑥ 링크주소 메모장에 복사 : 글 마지막에 쉽게 서식을 저장해 놓고 사용하기 위함입니다.

업로드 된 "images/jquery.toc.js" 선택후 오른쪽 마우스 → 링크 주소 복사 → 메모장에 붙여넣기 

 

 

 

 

자동 목차 코드 HTML에 넣기

자동 목차를 만들기 위해, HTML에 코드를 추가합니다.

 

① 티스토리 관리 > 꾸미기 > 스킨 편집

② hteml 편집

③ HTML : </head> 위에 아래 코드 붙여넣기 → 적용

<!-- 자동 목록 코드 시작 -->
<script type="text/javascript" src="./images/jquery.toc.min.js"></script>
<!-- 자동 목록 코드 끝 -->

 

 

 

서식 만들기 : 각 포스팅에 쉽게 적용 

원하는 포스팅과 위치에 '자동목차를 적용'하기 위해 서식을 만듭니다. 

서식은 글 작성시 자주 사용하는 문구나 기능들을 간편하게 불러와 적용할 수 있도록 해주는 기능입니다.

 

① 블로그관리 > 콘텐츠 > 서식관리

② 서식쓰기

③ 편집기 모드 : 기본모드 → HTML로 변환 

 

④ 코드 붙여 넣기

<script type="text/javascript" src="위에서 복사한 images/jquery.toc.js 링크 주소"></script>
<p data-ke-size="size18"><b>목차</b></p>
<ul id="toc"></ul>
<script type="text/javascript"> $(function(){ $("#toc").toc( {content: ".tt_article_useless_p_margin", headings: "h2,h3,h4" , top: -90, isBlink : true, blinkColor : '#21B9DE' } ) }); </script>

 

위의 코드를 붙여넣습니다. 

그리고 "위에서 복사한 images/jquery.toc.js 링크 주소" 를 메모장에 복사해놓은 주소로 변경합니다.

" "안에 붙여넣어주세요.

※ 위의 사진은 저의 복사된 주소를 적용한 것입니다. 각자 복사된 주소를 적용해주세요.

 

● 참고

- h2 : 제목1

- h3 : 제목2

- h4 : 제목3

 

⑤ 제목을 정하고 저장합니다. 끝!!!

 

 

포스팅에 자동목차 서식 적용하기

이제 글쓰기에 적용할 차례입니다. 글쓰기 창에 들어갑니다.

목차를 넣고 싶은 위치에서 목차서식을 불러옵니다.

미리보기를 통하여 보면, 글 안에 작성된 제목1,2,3이 자동으로 목차로 생성된것을 확인할 수 있습니다.

 

① 서식 선택

② 위에서 만든 '자동목차 서식' 클릭

 

 

목차가 생성되셨나요? 지금까지 티스토리 자동목차 만들기를 알아봤습니다. 

검색을 하다보면 CSS도 적용하는 포스팅이 많이 있습니다. 목차를 조금더 예쁘게 꾸미기 위한 것인데요.

글자색이나 배경등 원하는 모양이 있으면 서식에 적용하셔도 됩니다(방법이 너무 많아요~)

저는 위의 서식에 테두리(블럭코드에 서식적용)만 추가로 적용했습니다.(필요하신 분 요청주시면 따로 더 포스팅 하겠습니다)

 

자동 목차 생성 도움이 되셨길 바래요!!