Odyssey 스킨 - 나만의 심플한 자동목차 만들기 (보관용)

워드프레스를 기반으로 하는 블로그인 경우 적용하는 테마(티스토리의 스킨) 레벨에서 파워풀하게 목차를 자동 생성해주기 때문에 한번도 따로 고민해 본 적이 없었는데; 아무튼, 잘 정리된 이 블로그 를 참고로 기본적인 설정후, 1단계 목차만 나오도록 수정후 적용된 굵은 폰트를 일반폰트로 변경하고 배경 색상을 살짝 변경해서 Odyssey 스킨에 적용한 내용을 보관용으로 정리해 둡니다.

 

목차 (INDEX)

 

파일업로드

⛳️ 직접 링크: https://MY-BLOG-ID.tistory.com/manage/design/skin/edit#/source/file

⛳️ 수정 불필요

폰트 굵기 변경 & 배경색상 변경하기

1. HTML 편집

⛳️ 직접 링크: https://MY-BLOG-ID.tistory.com/manage/design/skin/edit#/source/html

⛳️ 목차를 만드는 헤드 태그 지정 부분(headings)에서 h2 만 남겨두면, 글 작성시 지정하는 제목1 스타일이 적용된 워드만 인덱싱됩니다.        => $toc.toc({content:".tt_article_useless_p_margin", headings:"h2"});  // <-- 이렇게 해두면 스타일이 깨질 염려X

  ...
  <!-- jquery.toc -->
  <script src="./images/jquery.toc.min.js"></script>
</head>

    ...
    <!-- // wrap -->
    <script>
      $(document).ready(function() {
        var $toc=$("#toc");
        $toc.toc({content:".tt_article_useless_p_margin", headings:"h2"});
      }); 
    </script> 
  </s_t3>
</body>
</html>

2. CSS 편집

⛳️ 직접 링크: https://MY-BLOG-ID.tistory.com/manage/design/skin/edit#/source/css

⛳️ 🔥 목차 영역의 백그라운드 색상을 변경하려면 background-color: #f1f1f1;  // <-- 마우스를 가져가면 색상이 표시되므로 원하는 색상으로 변경해 줍니다.

⛳️ 🔥 자동 생성되는 폰트를 두꺼운 굵기에서 일반 굵기로 바꾸려면 font-weight:normal;  // <-- normal 또는 bold 로 변경해 줍니다.

 

.index_toc a:link{color:000;border:none;}
.index_toc {
 border: 1px solid #cccccc;
 background-color: #f1f1f1;
 font-weight:normal;
 padding: 5px;
}
#toc {padding-left:25px;}
#toc li > ul > li {list-style: none;}
#toc li > ul {padding: 5px 0 20px 0;}

3. 서식으로 만들어둔 목차

⛳️ 실제 표시되는 목차의 타이틀을 목차 (INDEX) 로 변경함

<div class="index_toc">
<p data-ke-size="size16">목차 (INDEX)</p>
<ul id="toc" style="list-style-type: disc;" data-ke-list-type="disc"></ul>
</div>

 

워드프레스(WordPress) 에서의 목차 생성 예

WordPress Mokuji

 

팁(TIP) / 주의점

⛳️ 스킨편집 > HTML / CSS 메뉴에서 변경하고 저장하면 목차를 표시중인 기존 글에(도) 즉시 반영되므로 주의가 필요

⛳️ 기존 글에도 목차를 추가 / 제거할 수 있으나, 제거할 때 가비지 코드같은 게 남아 있을 수 있으니 미리보기 로 확실하게 제거되었는지 확인이 필요

⛳️ 목차를 삽입하기 좋은 위치는?

----

타이틀

포스트(글)에 대한 설명

목차    // <-- HERE

제목1

...

제목1

...

----