본문으로 바로가기
  1. Home
  2. IT & 기타/티스토리
  3. 티스토리에 목차 표시하는 방법 (북클럽 스킨)

티스토리에 목차 표시하는 방법 (북클럽 스킨)

· 댓글 104

티스토리에는 모든 글에 자동으로 목차를 표시하는 방법은 없지만, 원하는 글에 자동으로 목차를 삽입할 수 있습니다. 헤딩 태그를 인식하여 자동으로 목차를 생성하는 jQuery를 사용할 수 있습니다. 저는 다른 방법으로 목차를 생성하여 삽입하다 lie7님 블로그의 "티스토리 블로그 자동 목차 (TOC) 만들기" 글을 참고하여 TOC 스크립트를 바꾸었습니다.

이 글에서는 티스토리 북클럽 스킨에 목차를 표시하는 방법과 티스토리 헤딩(소제목) 스타일을 변경하는 방법에 대해 간단히 설명하겠습니다. (다른 스킨에서도 그대로 응용이 가능합니다.)

※업데이트: H2 또는 H3 태그 개수를 카운트하여 일정 개수(예: 2개 또는 3개) 이상인 모든 글에 목차를 표시할 수 있습니다. 자세한 방법은 별도의 글에서 다루도록 하겠습니다. 그리고 보다 쉽게 목차 스크립트를 넣을 수 있도록 단계적으로 설명해보겠습니다.

☞ 자동으로 목차를 생성하는 방법은 avada.tistory.com/1784 글을 참고해보세요.

 

티스토리 북클럽 (Book Club) 스킨에 목차 표시하는 방법

먼저 lie7님 블로그 글에 소개한 jQuery 스크립트를 다운로드하여 업로드하고 글에서 제시하는 스크립트를 스킨 편집 > HTML 편집에서 <head>...</head> 사이에 추가하도록 합니다.

목차 스타일은 CSS를 사용하여 조정해야 합니다. 저는 다음과 같은 CSS 코드를 만들어 추가했습니다.

/* 티스토리 북클럽 스킨 목차 - TOC */

.book-toc {
    border: 1px solid #ccc;
    padding: 10px 10px 0px 15px;
	background-color: #f5f5f5;
}

.book-toc ul {
    list-style-type: decimal;
}

.book-toc p {
    font-weight: 550;
	margin-bottom: 7px;
}

#toc * {
    font-size: 17px;
    color: #676767;
}

#toc a:hover {
    color: #f00;
}

#toc ul {
    margin-bottom: 0px;
	margin-top: 5px;
}

#toc > li {
    margin-bottom: 15px;
}

#toc {
    margin-left: 10px;
}

#toc > li > ul li {
    margin-bottom: 5px !important;
}

이 코드를 활용할 경우 색상과 숫자 값은 적절히 변경하여 목차 레이아웃을 조정하시기 바랍니다. 티스토리 블로그에서 CSS 코드를 추가하려면 꾸미기 > 스킨편집 > html편집 > CSS 탭을 클릭하여 맨 아래에 추가하도록 하도록 합니다.

그리고 HTML 탭에서 다음 스크립트를 </body> 바로 위에 추가하도록 합니다.

<script type="text/javascript">
  $(function(){
    $("#toc").toc( {content: ".entry-content", headings: "h2,h3,h4" , top: -90, isBlink : true, blinkColor : '#21B9DE'  } )
  });
</script>

그런 다음 글을 작성할 때 목차를 표시하고 싶은 경우 다음 HTML 코드를 원하는 곳에 추가합니다. HTML 코드를 추가하려면 HTML 모드로 전환해야 합니다.

<div class="book-toc">
<p>목차</p>
<ul id="toc"></ul>
</div>

그러면 다음과 같은 모양으로 목차가 표시됩니다.

배경색, 글자색, 글자 크기 등은 CSS 코드에서 적절히 조정하시기 바랍니다.

목차를 추가해야 하는 이유

긴 글에는 목차를 추가하는 것이 SEO(검색엔진최적화)에 유리합니다. 실제로 구글에 잘 노출되는 위키백과 글들을 살펴보면 도입부 바로 아래에 목차가 표시됩니다.

 

도입부에 글에서 다루는 내용은 요약하여 기재하면 독자들이 해당 글의 내용이 자신이 원하는 글인지 판단하는 데 도움이 됩니다.

워드프레스 SEO 플러그인에서도 목차(TOC)를 사용할 것을 권장하고 있습니다.

 

효과적인 글쓰기를 위한 Rank Math 활용 방법 - 워드프레스 기본

이 워드프레스 블로그에 Yoast SEO 플러그인을 오랫동안 사용하다가 얼마 전에 Rank Math로 SEO 플러그인을 바꾸었습니다. 이 글에서는 효과적인 글쓰기를 위한 Rank Math 활용 방법에 대해 살펴보겠습니다. 글 분석 기능을 활용하면 구글 노출에 도움이 됩니다.

www.thewordcracker.com

티스토리 소제목 (헤딩) 스타일 변경

내킨 김에 소제목 (heading) 스타일도 변경했습니다. 

위의 그림과 같은 스타일로 소제목을 변경하는 방법이 어떤 티스토리 글에서 소개되었습니다. 하지만 찾아보아도 검색이 잘 안 되네요. 티스토리에서는 다음과 비슷한 CSS 코드를 넣으면 됩니다.

/* 북클럽 소제목 스타일 */
.entry-content h2 {
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
COLOR: #666;
PADDING-BOTTOM: 10px;
TEXT-ALIGN: left;
BORDER-LEFT: #55555B 8px solid;
padding: 3px 9px;
margin: 30px 0 20px 0;
BACKGROUND-COLOR: #FFF;
BORDER-BOTTOM: 1px solid #000;
}


.entry-content h3 {
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
COLOR: #2E86B9;
PADDING-BOTTOM: 10px;
TEXT-ALIGN: left;
border-left: rgba(85, 85, 91, 0.5882352941176471) 8px solid;
padding: 3px 9px;
BACKGROUND-COLOR: #FFF;
border-bottom: 1px solid rgba(85, 85, 91, 0.5882352941176471);
margin-bottom: 15px;
}

.entry-content h4 {
padding: 3px 9px;
border-left: 5px solid #eeeeee;
border-bottom: 1px solid #eeeeee;
margin-bottom: 15px;
}

위의 코드는 북클럽에서 잘 작동합니다. 다른 티스토리 스킨에서도 잘 작동할 것 같습니다. 제대로 작동하지 않으면 댓글을 통해 블로그 주소를 남겨주시면 코드를 확인해드리겠습니다.

마찬가지로 컬러, 패딩(padding), 마진(margin), 테두리(border) 등을 적절히 변경하시기 바랍니다.

 

CSS Borders

CSS Borders CSS Border Properties The CSS border properties allow you to specify the style, width, and color of an element's border. I have borders on all sides. I have a red bottom border. I have a blue left border. CSS Border Style The border-style prope

www.w3schools.com

마치며

티스토리에도 자동으로 소제목을 인식하여 목차를 생성해주는 플러그인이 있으면 좋겠지만 아직 그런 플러그인은 없는 것 같습니다. 임시방편으로 구글에서 검색되는 목차 스크립트를 활용할 수 있습니다. 조금 불편하지만 목차를 생성할 곳에만 HTML 코드를 넣도록 합니다.

 

워드프레스에서는 헤딩 태그(H2, H3, H4, H5)의 개수를 체크하여 일정 개수 이상이면 자동으로 목차를 표시하는 플러그인을 사용할 수 있습니다.

 

워드프레스 목차 만들기 플러그인 Fixed TOC - 워드프레스 기본

긴 글을 작성하는 경우 목차를 추가하면 독자들이 쉽게 원하는 부분으로 이동할 수 있어 글의 가독성과 사용성을 향상시키며 구글 검색 순위에도 긍정적으로 작용합니다. 워드프레스에는 자동�

www.thewordcracker.com

목차를 표시하면 SEO(검색엔진최적화)에도 유리하게 작용합니다. 긴 글에는 목차(TOC)를 삽입하는 것을 고려해볼 수 있습니다.

참고

 

티스토리 Book Club 스킨 수정: 본문 글자 크기 변경하는 방법

이 블로그에는 현재 최근 공개된 Book Club (북 클럽)이라는 스킨이 적용되어 있습니다. 북 클럽 스킨에서는 본문 글자 크기가 0.9375em으로 설정되어 글자가 다소 작게 느껴질 수 있습니다. 저는 스킨을 변경하면..

avada.tistory.com

https://avada.tistory.com/1789

 

티스토리 블로그 고래 스킨에 목차 자동 생성하는 방법

하루일기 님이 티스토리 스킨 중 하나인 고래 3.4에서 목차가 생성되지 않는 문제가 발생한다고 하여 고래 3.4 스킨에서 목차를 적용하는 방법에 대해 간단히 정리해보았습니다. 이 방법은 고래

avada.tistory.com

 

SNS 공유하기
💬 댓글 104
이전 댓글 더보기
logo

30분을 씨름한 결과, 드디어 목차가 생성되었습니다.
감사합니다.

logo

설명이 어렵게 되어 있는가 보네요. 시간이 날 때 좀 더 쉽게 글을 수정해보겠습니다.

즐거운 주말 보내세요.

logo

설명이 어려웠다기보다는, 제가 완전 문외한이어서 그렇습니다.
한 번 성공하고 나니, 쉽게 이해가 됩니다.
감사합니다. ^^

logo
익명

비밀댓글입니다

logo

목차 만들기는 https://avada.tistory.com/1784 글을 참고해보시기 바랍니다.

H2 태그가 2개 이상 있는 모든 글에 목차가 표시될 것입니다.

북클럽 스킨에서도 잘 작동하는 것을 확인했습니다. 잘 작동하지 않는다면 적용 시 오류가 있었을 가능성이 있습니다. 다른 스크립트가 있다면 일시적으로 제거한 상태에서도 테스트해보세요.

logo
방문자

정말 감사합니다. 잘 적용되네요.
질문이 있는데요,
목차에서

1. 2. 3 이거 없애려면 어떻게 하나요?

혹은 그냥 '쩜'으로 표기하려면요.

CSS 코드에서 바꾸는 것 맞죠?

logo

CSS로 시도해볼 수 있을 것 같습니다.

logo
질문이 있습니다.

안녕하세요?
Avada님 덕분에 목차라는 것도 사용해보고 좋네요.

혹시 티스토리 "#1" 스킨도 적용할 수 있는 방법이 있을까요?

"Poster" 스킨은 그대로 적용이 되는데,

"#1" 스킨은 '목차' 글씨와 네모박스만 뜨네요.

제가 다른 곳을 열심히 뒤져봤지만, 여기서 유일하게 성공하여서 여쭙니다.

logo

안녕하세요?

#1 스킨이 적용된 블로그 주소가 어떻게 되나요?

logo
#1 스킨 적용된 블로그 주소입니다.

https://tipfac.tistory.com/1

여기에 있습니다.

logo

.entry_content를 모두 .skin_view .area_view로 바꾸어보시겠어요? (CSS, javascript 스크립트 내의 모든 항목)

logo

.skin_view 라고 바꾸니까 되네요!
정말 감사합니다!
복받으실거에요 ㅠ

logo

안녕하세요?
저는 #2 스킨을 사용 중인데요,
목차가 잘 적용이 되지 않아서요.
댓글 읽어보면서
.entry_contetnt, .skin_view .area_view, .entry 등 다 적용해 봤는데 잘 안되서요.
도와 주시면 정말 감사하겠습니다.
https://lifemaga.tistory.com/4

logo

그냥 .area_view로 해보시겠어요?

logo

대박! 되네요! 됩니다!
정말 감사합니다 ㅠ

logo

저 죄송한데css코드는 제가 하나씩 입력해야하는건가요?
복사로 넣으려 하니
https://tistory1.daumcdn.net/~~~ 이런식으로 입력이 되더라고요..
제가 수기로 입력하다가 코드를 잘 못 입력할 것 같아서
어떻게 하는지 잘 모르겠네요 ㅠㅠ

logo

저는 테스트해보니 복사하는 데 문제가 없습니다.

브라우저를 바꾸어서 복사해보시기 바랍니다. Ctrl + C, Ctrl + V...

logo

ㅜㅜ 이상하네요 익스플로어로 바꾸어도 복사하면 avada님 티스토리 주소만 복사되네요....
혹시 메모장에 css랑 html코드 올려주실 수 있으실까요?ㅠㅠ

logo

저는 엣지 브라우저와 크롬에서 테스트해보니 이상이 없네요.

시간이 될 때 텍스트 파일로 올려드리고 여기에 댓글로 알려드리겠습니다.

즐거운 하루 보내세요.

logo

안녕하세요^^ 덕분에 목차 설정 잘하였습니다. 그러나 문제는 모바일에서 적용이 안되는데 해결방법이 있나요? 사이트 주소는 https://lifepartner.tistory.com/4 입니다.

그리고 목차를 숫자로 표현하고 싶고 대분류 소분류 나눠서 하려면 어떻게 해야하나요?

logo

모바일에서 체크하니 잘 되는 것 같네요.

소제목

h2
h3
h3

h2
h3
h3
h3

이런 식으로 구분하여 사용해보시기 바랍니다. h2, h3... 등을 잘 활용해보시기 바랍니다.

숫자로 나오게 하려면 css를 조금 알면 가능할 것입니다. ol과 ul에 대해 구글에서 한번 검색해보시겠어요?

logo
익명

비밀댓글입니다

logo

소제목을 h2, h3를 본문에 사용해보시기 바랍니다.

h1은 글 제목이고, 페이지에 하나만 있어야 합니다.


h2
h3
h3
h3
h2
h3
h3
...

이런식으로 하시기 바랍니다.
그리고 카테골의 다른 글 이런 부분의 헤딩 태그를 확인해보세요. h4로 설정하고, 목차에는 h2와 h3만 표시되도록 하면 될 것입니다.

logo
익명

비밀댓글입니다

logo

제 블로그는 살펴보니 다음과 같은 스크립트를 사용했네요.

<!-- 목차 -->
<script>
const table = '<div class="book-toc ol-toc first-toc"><p>목차</p><ol id="toc"></ol></div>';

if ( $( ".e-content h2" ).length > 1 && !$("#toc").length ) {

$('.e-content h2:first-of-type').before(table);
}
</script>




<script>
$(function(){
$("#toc").toc( {content: ".e-content", headings: "h2,h3,h4" , top: -90, isBlink : true, blinkColor : '#21B9DE' } )
});
</script>

레이아웃은 CSS로 적절히 수정해보시기 바랍니다.

logo

비밀댓글입니다

logo

본문의 p 태그에 여백을 적용했을 것 같습니다.

CSS를 조금 알면 쉽게 여백을 적용할 수 있을 것입니다. 만약 본문의 p 태그에 여백을 조정하기를 원하시는 경우 사이트 URL을 알려주시면 확인해드리겠습니다.

logo

비밀댓글입니다

logo

안녕하세요?

살펴보니 <p>&nbsp;</p>가 각 문단 아래에 추가되네요.

https://www.screencast.com/t/cFhFymKx

다음 코드를 </body> 바로 위에 추가해보시겠어요?

<script>
jQuery('p').each(function() {
var $this = $(this);
if($this.html().replace(/\s|&nbsp;/g, '').length == 0)
$this.remove();
});
</script>


저는 체크해보니 '단락 앞뒤에 공백을' 사용합니다로 설정되어 있네요.

그런 경우 글을 작성할 때 엔터를 두 번 치지 않도록 하면 <p>&nbsp;</p>가 삽입되지 않을 것입니다. 먼저는 엔터를 두 번 치지 않도록 주의해보시고, 잘 안 되면 위에 제시된 스크립트로 문제가 해결되는지 체크해보시겠어요?

logo

최곱니다. 정말 감사합니다

logo

square 스킨에서는 적용이 안되는데 방법알려주실수 있을까요?

logo

square가 기본 스킨 중 하나인가요? 무료 스킨이라면 제가 시간이 날 때 한 번 확인해보겠습니다.

먼저 html 파일에 추가한 다른 javascript 코드가 있다면 일시적으로 삭제한 후에 잘 작동하는지 테스트해보시겠어요?

logo

Square 스킨을 사용하는 경우 다음 글을 참고해보시겠어요?

https://avada.tistory.com/2209

logo
테스트

안녕하세요? 저도 squre 스킨 사용 중인데요,

이 스킨에서는 .entry 로 넣는 것 같은데, 잘 안되네요 ㅠ

다른 스킨은 잘 됐거든요.

https://inf-news.tistory.com/entry/test

한 번 봐주시면 감사하겠습니다~

logo

Square 스킨을 사용하는 경우 다음 글을 참고해보세요.

https://avada.tistory.com/2209

logo

됩니다 ㅠ 됩니다 ㅠ
정말 감사합니다 ㅠ

logo

혹시 도메인주소로 할 때랑 다르게 적용되나요?
도메인 주소 입힌 다른 블로그로 해보니, 티스토리 원주소로 접속하면 목차가 보이는데, 도메인주소로 접속하면 목차가 안보여서요.

logo

2차 도메인을 입힌 경우에도 잘 작동합니다.

예시:

https://dream.izu.kr/105

logo
익명

비밀댓글입니다

logo

다른 곳의 CSS 때문입니다.

.entry-content ul li {
position: relative;
margin-bottom: 10px;
padding-left: 22px;
font-size: 0.9375em;
line-height: 1.5714;
color: #666;
text-indent: -22px;
list-style: inherit;
}

위에서 padding-left와 text-indent 두 라인을 삭제하여 문제가 해결되는지 체크해보시기 바랍니다.

logo
익명

비밀댓글입니다

logo
익명

비밀댓글입니다

logo

이 문제는 '카테고리의 다른 글'이라는 제목의 헤딩 태그를 바꾸는 등의 방법을 통해 해결할 수 있을 것입니다. 다음 글에서 이와 비슷한 문제에 대한 언급이 있으므로 참고해보세요.

https://avada.tistory.com/1789

logo
익명

비밀댓글입니다

logo

목차를 추가하고 잘사용하고 있습니다.
한가지 물어보고 싶은것이 있는데 아바다님 같은 목차순서표시를 h3에선 1.1 이나 2.1 이렇게 하고싶은데 어떻게 해야하는건지 모르겠네요;;
스킨은 #1 스킨을 사용하고있어요

logo

아래 문서에서 ul과 ol의 차이에 대해 한 번 살펴보시기 바랍니다:

https://www.w3schools.com/html/html_lists.asp

ul과 ol의 차이를 이해하신 후에 위에 제시된 코드에서 ul 부분을 ol로 바꾸어서 테스트해보시겠어요?

logo

ol 로 바꿔서 숫자까지는 된것같은데
1.1 이나 1.2 같은것은 모르겠습니다 ;;;

logo

다음 문서가 오래되었지만 1.1, 1.2 이런 식으로 표시해주는 방법이 설명되어 있습니다. 참고해보세요.

https://stackoverflow.com/questions/4098195/can-ordered-list-produce-result-that-looks-like-1-1-1-2-1-3-instead-of-just-1

logo

css는 띄어쓰기나 줄바꿈만 잘못되어도 적용이 안되는군요;;;
알려주신 코드자체를 그대로 복사해서 쓰니 해결되었습니다 어떻게든 비슷하게 목차를 꾸몄네요 감사합니다 ^^;

이름을 저장합니다.

가성비가 뛰어난 웹호스팅

저렴하고 가성비 좋은 웹호스팅

최근 댓글

가성비적인 측면에서 괜찮은⋯ 💬워드프레스, 웹호스팅 정보를 제공하는 블로그 Avada 요가하구 비보북 너무 괜찮은⋯ 💬Hman 윈도우 11은 아직 사용해 보⋯ 💬空空(공공) 감사합니다. 다시 한번 차근⋯ 💬viator_min 사이트 속도가 느리면 SEO(검⋯ 💬워드프레스, 웹호스팅 정보를 제공하는 블로그 Avada

워드프레스 시작 가이드

워드프레스 시작하기