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

2020. 5. 10. 08:43 | 댓글 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

 

  • 네이버 블러그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 카카오스토리 공유하기

댓글을 달아 주세요

">
  1. 이전 댓글 더보기
  2. thumbnail
    OTFreak

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

  3. thumbnail
    OTFreak

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

  4. thumbnail
    2020.09.03 14:54

    비밀댓글입니다

    • thumbnail
      홈페이지 제작, 워드프레스, 웹호스팅 정보를 제공하는 블로그 Avada
      2020.09.03 15:05 신고

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

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

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

  5. thumbnail
    방문자
    2020.12.09 05:11

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

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

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

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

  6. thumbnail
    질문이 있습니다.
    2020.12.13 08:27

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

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

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

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

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

  7. thumbnail
    #1 스킨 적용된 블로그 주소입니다.
    2020.12.13 11:12

    https://tipfac.tistory.com/1

    여기에 있습니다.

  8. thumbnail
    ★.★

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

  9. thumbnail
    치꼬리타

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

  10. thumbnail
    치꼬리타

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

  11. thumbnail
    ★☆○◇

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

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

  12. thumbnail
    2021.01.16 19:55

    비밀댓글입니다

  13. thumbnail
    2021.01.18 13:28

    비밀댓글입니다

    • thumbnail
      홈페이지 제작, 워드프레스, 웹호스팅 정보를 제공하는 블로그 Avada
      2021.01.18 13:50 신고

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

      <!-- 목차 -->
      <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로 적절히 수정해보시기 바랍니다.

    • thumbnail
      2021.01.20 21:39

      비밀댓글입니다

    • thumbnail
      홈페이지 제작, 워드프레스, 웹호스팅 정보를 제공하는 블로그 Avada
      2021.01.20 21:58 신고

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

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

    • thumbnail
      2021.01.20 22:11

      비밀댓글입니다

    • thumbnail
      홈페이지 제작, 워드프레스, 웹호스팅 정보를 제공하는 블로그 Avada
      2021.01.20 22:20 신고

      안녕하세요?

      살펴보니 <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>가 삽입되지 않을 것입니다. 먼저는 엔터를 두 번 치지 않도록 주의해보시고, 잘 안 되면 위에 제시된 스크립트로 문제가 해결되는지 체크해보시겠어요?

  14. thumbnail
    레디​

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

  15. thumbnail
    디럭스

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

  16. thumbnail
    테스트
    2021.04.05 16:45

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

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

    다른 스킨은 잘 됐거든요.

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

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

  17. thumbnail
    2021.07.21 02:04

    비밀댓글입니다

  18. thumbnail
    2021.07.21 09:35

    비밀댓글입니다

  19. thumbnail
    2021.07.29 02:00

    비밀댓글입니다

  20. thumbnail
    2021.07.29 09:59

    비밀댓글입니다

  21. thumbnail
    클릭이얌

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