티스토리 블로그 본문 소제목에 입력된 연속 번호 숨기기(feat. 자동 목차 번호 숨기기)

목차 번호 숨기기 

개요

지난번에는 CSS의 counter() 함수를 이용해 본문 소제목에 자동으로 목차 번호를 입력하는 방법을 올렸다.

티스토리 블로그 본문 소제목에 연속된 번호 달기(feat. 자동 목차 번호)

이번에는 자동으로 입력된 목차 번호를 숨기는 방법을 기술한다. 이 글에는 아래의 방법이 적용돼 소제목과 목차에 목차 번호가 보이지 않는다.

 
 

원리

1. 티스토리 블로그 글쓰기 화면에서 목차 번호 숨김 플래그(깃발)를 세운다.
2. 목차 번호 숨김 플래그가 있으면 목차 번호를 감추는 CSS를 정의할 class를 추가한다.
   → skin.html에 추가
3. 위에서 추가한 class를 이용해 목차 번호를 숨기는 속성과 속성값을 입력한다.
   → style.css에 추가

 
 

소스 코드

목차 번호 숨김 플래그 작성

<div id="hideTocNumFlag" style="color:#A10000;">목차 번호 숨기기</div>

▲ 소스 코드 다운로드
▼ 적용 방법
위 소스 코드를 서식으로 작성해 글쓰기 화면에서 불러온다. 티스토리 블로그의 서식 만들기와 활용 방법은 아래 링크 참조.

티스토리 블로그 서식 만들기 및 활용 (구글애드센스 광고 포함)

 

목차 번호 숨김 플래그 검사 및 클래스 추가

<script>
  var tocNumFlag = document.getElementById("hideTocNumFlag");
  if(tocNumFlag != null) {
    var element = document.querySelector(".article_view .contents_style");
    if(element != null) {
      element.classList.add("hTagBefore");
      tocNumFlag.style.display = "none";
    }
      element = document.querySelector("#toc-elements");
    if(element != null) {
      element.classList.add("toc-level-wrap");
    }        
  }
</script>

▲ 소스 코드 다운로드
▼ 적용 방법

• 블로그 관리 페이지 > 꾸미기 > 스킨 편집 > html 편집 > HTML 클릭
• 소스 코드를 skin.html의 </html> 위에 붙여넣기

※ contents_style 클래스가 없을 경우 위 소스 코드에서 ".contents_style" 삭제할 것.

 

목차 번호 숨기기

/* 본문의 목차 번호 숨기기 */
.article_view .hTagBefore h2::before,
.article_view .hTagBefore h3::before,
.article_view .hTagBefore h4::before {
  display: none;
}

/* 목차(사이드)의 목차 번호 숨기기 */
#wrapToc .toc-level-wrap .toc-level-1::before, 
#wrapToc .toc-level-wrap .toc-level-2::before {
  display: none;
}
#wrapToc .toc-level-wrap .toc-level-1 {
  padding-left: 15px;
}
#wrapToc .toc-level-wrap .toc-level-2 {
  padding-left: 35px;
}

▲ 소스 코드 다운로드
▼ 적용 방법

• 블로그 관리 페이지 > 꾸미기 > 스킨 편집 > html 편집 > CSS 클릭
• 단축키 Ctrl + F 입력 후 ".article_view .contents_style h4::before"로 검색
  ※ contents_style 클래스가 없을 경우 ".article_view h4::before"로 검색
• 검색 결과 아래에 위 소스 코드 붙여 넣기

※ padding-left 값을 본인 스킨에 맞게 수정할 필요 있음.