티스토리 자동 목차(TOC) 만들기_따라하면 성공률 100%

[ 목차 ]

자동목차(TOC) 만드는 순서
자동목차 파일 다운로드
티스토리에 파일적용
자동목차 코드 HTML에 넣기
티스토리내 서식 만들기
포스팅에 자동목차 서식 적용하는 방법

티스토리 자동목차 만들기

 

티스토리 블로그를 시작하면서 가장 많이 들었던 말 중 하나가 "처음 설정이 어렵다"는 것이었어요. 저도 막막한 마음으로 하나씩 검색해보고, 책도 찾아보며 조금씩 배워가는 중인데요. 그 과정에서 정말 유용하다고 느낀 기능이 바로 자동 목차 만들기였답니다.

가독성을 높이는 데도 좋고, 구글 검색 최적화(SEO)에도 효과가 있어서 티스토리를 운영하신다면 꼭 한 번쯤은 활용해보셨으면 하는 기능이에요.

저처럼 처음엔 어렵게 느껴질 수 있지만, 직접 해보니 정말 생각보다 간단했어요! 오늘은 제가 실제로 따라하며 익힌 자동 목차 설정 방법을 차근차근 소개해드릴게요. 캡처와 함께 자세히 정리했으니, 함께 따라해보시면 분명 도움이 되실 거예요

 

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

CSS적용없이 파일을 다운로드하여 HTML에 적용하면 바로 사용할 수 있습니다.

1. 자동 목차 파일 다운로드
2. 티스토리에 파일적용
3. 자동목차 코드 HTML에 넣기
4. 티스토리내 서식 만들기
5. 포스팅에 자동목차 서식 적용하는 방법
6. 적용된 목차 확인하는 방법

 

자동 목차 파일 다운로드

자동 목차(TOC) 생성 파일은 무료로 배포가 가능해 누구나 쉽게 다운받아 사용할 수 있습니다. 안심하고 다운로드 받아주세요.

jquery.toc.zip 를 다운받아 압축을 풀어줍니다. 폴더에 jquery.toc.js와 jquery.toc.min.js 가 있습니다.

 

jquery.toc.zip

0.00MB

 

티스토리에 파일적용

여기서 블로그 팁!! 내 블로그 홈에서 키보드 Q(대문자/소문자 상관 없음)를 누르면 티스토리 관리 페이지로 넘어갑니다. 반대로 티스토리 관리 페이지에서 키보드 Q를 누르면 내 블로그 홈으로 넘어갑니다. 

 

① 티스토리 관리 페이지 → 꾸미기 → 스킨편집

② html 편집(화면 오른쪽 상단) →  파일업로드 → 추가( jquery.toc.js와 jquery.toc.min.js)

③ jquery.toc.js  선택 후 오른쪽 마우스 →  링크 주소 복사 →   메모장에 저장(서식에 적용할 용도) 

 

자동목차 코드 HTML에 넣기

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

① 티스토리 관리 페이지 → 꾸미기 → 스킨편집

② html 편집(화면 오른쪽 상단)

③ HTML 내 : </head> 바로 위에 ↓코드 붙여 넣기(위치를 모를 경우 ctrl + f 로 </head>  검색) → 적용

티스토리내 서식 만들기

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

 

① 블로그 관리 페이지 → 콘텐츠 → 서식 관리

② 서식쓰기 → 기본모드 → 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 링크 주소" 부분에 복사해 놓은것을 붙여넣기하면 됩니다. 꼭 "  " 안에 넣으셔야 합니다. 

제목설정 후 완료 누르시면됩니다. 

 

포스팅에 자동목차 서식 적용하는 방법

서식을 등록했으면 이제 글쓰기 창에서 자동목차가 생성이 되는지 확인해보겠습니다. 

① 서식선택

② 조금전에 만들어둔 자동목차 서식 클릭

③ 포스팅 내용을 쓰는 부분에 스크립트와 목차가 입력이 됩니다.

④ 포스팅 내용 입력 : 입력 시 문단모양 제목1, 제목2, 제목3 부분이 목차로 생성됩니다. 

⑤ 포스팅 내용 작성 후 왼쪽 하단에 미리보기를 눌러서 확인해야 목차부분이 자동생성 된것을 확인할 수 있습니다.

(미리보기를 누르지 않아 자동목차 적용을 해놓코도 안된줄알고 한참을 헤맸습니다.)

 

---

처음엔 복잡하게만 느껴졌던 자동 목차 기능도, 하나씩 따라하다 보면 금세 익숙해질 거예요. 포스팅을 꾸준히 쓰는 분들일수록 더더욱 필요한 기능이니 꼭 한 번 설정해보시길 추천드려요! 저도 아직은 배우는 중이지만, 앞으로도 제가 직접 써보고 효과 있었던 꿀팁들을 공유드릴게요.