티스토리 블로그에 목차(TOC) 추가하기

워드프레스 정보를 제공하는 블로그 Avada 2018. 8. 20. 11:06 • 댓글:

들어가며

목차(TOC; Table of Contents)를 추가하며 사용자가 쉽게 원하는 내용으로 이동할 수 있어 사용자 경험을 향상시킵니다.

실제로 목차를 추가하여 구글 검색엔진에서 순위가 상승했다는 내용의 글도 있습니다.

워드프레스에서는 플러그인을 사용하여 간단히 목차를 추가할 수 있습니다.

티스토리에서는 jQuery 스크립트를 적용하여 목차를 만들 수 있습니다. 구글을 검색해보면 다양한 목차 스크립트가 있습니다.

다만, 개별 글에서 목차를 추가할 때 조금 번거로운 작업을 해주어야 합니다. 저는 시간 날 때마다 필요한 글에만 목차를 추가해볼 생각입니다.

※2020년 5월 업데이트: 아래의 방법은 조금 번거롭습니다. 티스토리 블로그에서 H2 태그가 2개 혹은 3개 이상인 모든 글에 목차를 표시하도록 할 수 있습니다. 자세한 방법은 "티스토리 블로그의 모든 글에 자동으로 목차 표시하는 방법"을 참고해보세요.

티스토리 블로그에 목차 추가하기

적용 방법

저는 티스토리 목차/TOC/Table Of Contents 적용하기 글에서 제시한 스크립트(https://github.com/diversen/js-toc/blob/master/jquery.toc-1.1.4.min.js)를 이용했습니다.

링크된 글에서는 다소 복잡하게 설명했는데요. 저는 스크립트 소스를 수정하지 않고 CSS 코드를 하나 추가했습니다.

적용 방법은 링크된 글을 참고하시고, CSS 코드 부분을 다음 코드로 변경하면 bullet이 사라집니다.

/* 티스토리 목차 TOC 스타일  */
div#toc ul { margin: 0; }
#toc ul li {
    list-style: none !important;
}
div#toc { background: #f9f9f9 none repeat scroll 0 0; border: 1px solid #aaa; display: table; font-size: 100%; margin: 0; padding: 5px; width: auto; }

위의 코드를 적절히 수정합니다.

개별 글의 HTML 소스에 다음 태그를 직접 추가해주면 목차가 표시됩니다.

<div id="toc"><b>Table of Contents</b></div>
<div class="toc-contents" id="toc-contents">
본문 내용
</div>

적용 예

H2, H3, H4... 등의 태그를 사용한 소제목이 목차로 표시됩니다.

티스토리 목차

스타일은 CSS를 사용하여 적절히 변경할 수 있습니다.