티스토리 블로그 목차 넣는 방법, 목차 이동 방법(CSS 코드 제공)

티스토리 블로그에 목차를 넣으면 이용자가 목차를 통해 필요한 곳으로 빠르게 이동할 수 있을 뿐 아니라, 게시글에 어떤 내용이 있는지를 빠르게 전달할 수 있는 장점이 있어요. 또한 해당 링크의 클릭을 통해 전면광고의 발동을 초래할 수도 있어요. 오늘은 티스토리 블로그 내 목차 넣는 방법에 대해 알려드릴게요.

Contents

• 1. 블로그 목차 필요성
• 2. 목차 넣는 방법

티스토리 블로그 목차 넣는 방법

 

 

블로그 목차 필요성

티스토리 블로그 게시글을 작성하다 보면 목차가 있으면 좋겠다는 생각을 할 때가 있지 않나요?

블로그 글의 도입 부에 목차가 있으면 해당 글에 어떠한 내용이 있는지를 독자에게 어필할 수도 있고 독자도 시간 낭비 없이 필요한 부분을 빠르게 이동해 읽을 수 있기 때문에 목차는 대단히 중요한 요소라고 생각되어요.

하지만, 티스토르 블로그에는 목차가 기본기능으로 제공되고 있지 않기 때문에 목차를 추가하기 위해 HTML이나 CSS 코드를 이용해야 해요.

목차를 추가할 경우 다음과 같은 목차가 나타남을 확인할 수 있어요.

목차 적용 예시

 

목차 넣는 방법

티스토리 블로그에 목차를 넣기 위해서는 다음의 순으로 진행을 해야 하며, 각 순서에 대해 아래에서 설명할게요.

1. CSS 코드 내 목차 부분 추가
2. 티스토리 서식 내 목차서식 추가
3. 블로그 게시 글에 목차 추가
4. 목차 이동을 위한 링크 추가

 

 

CSS 코드 내 목차 추가

CSS 내에 목차 코드를 추가해요. 목차 코드는 아래 텍스트 파일을 다운로드하여서 메모장으로 읽으시면 돼요. 메모장 내 모든 코드를 복사한 후 내 스킨의 CSS 마지막 부분에 추가하면 돼요.

• 티스토리 관리자메뉴 > 꾸미기 > 스킨 편집 > HTML 편집 > CSS 선택 후 아래 코드 추가

 

CSS 내 목차 코드 추가

 

목차 CSS코드.txt

0.00MB

 

 

목차 서식 추가

목차를 서식으로 지정합니다. 관리자메뉴에서 콘텐츠 내 서식 관리를 누른 후 서식 쓰기를 통해 서식을 입력하면 돼요.

서식은 아래 첨부 코드를 이용하면 되며 반드시 HTML모드로 변경 후 입력하여야 해요.

목차 서식 추가

 

목차_서식코드.txt

0.00MB

 

<li role=”listitem”><a href="#i1"><span class="toc_number toc_depth_1">1. 제목 1</span></a></li>
<li role=”listitem”><a href="#i2"><span class="toc_number toc_depth_1">2. 제목 2</span></a></li>
<li role=”listitem”><a href="#i3"><span class="toc_number toc_depth_1">3. 제목 3</span></a></li>

 

목차가 많은 경우 위 부분을 추가하면 되는데 href 내에 값은 고유의 값을 지정해 주어야 해요. 예를 들면 #i4, #i5 등의 값을 지정해 주어야 해요

 

블로그 글 내 목차 추가

블로그 글 작성 중 목차가 들어갈 위치에서 서식으로 지정한 목차를 추가하면 돼요.

 

목차 이동을 위한 링크 추가

목차를 클릭 시 이동할 곳을 지정해 주는 단계에서 보통 목차를 H2 태그에 많이 달기 때문에 H2 태그에 아래와 같이 <div> 코드를 추가하면 돼요. div 태그 내 id가 클릭 시 링크를 위한 id를 지정하는 것으로 고유의 값으로 지정해 주어야 해요.

<div id="i1">
<H2>제목 1</H2></div>

 

 

---

오늘은 티스토리 블로그 게시글 내 목차를 넣는 방법에 대해 알아보았어요. CSS 코드 작업과 함께 약간의 HTML 편집만 할 수 있다면 쉽게 목차를 넣을 수 있으니 해당 기능을 꼭 이용해 보시기 바래요.

 

함께 읽으면 좋은 글

애드센스 광고 티스토리 블로그 상단에 넣는 방법

티스토리 블로그(수익형 블로그) 만드는 방법 총정리