티스토리에는 모든 글에 자동으로 목차를 표시하는 방법은 없지만, 원하는 글에 자동으로 목차를 삽입할 수 있습니다. 헤딩 태그를 인식하여 자동으로 목차를 생성하는 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