[최신] 그대로 따라만 하면 되는 티스토리 자동 목차 만들기

티스토리를 운영하다 보면 결국 구글 유입이 최고라는 것을 알게 됩니다. 구글 유입을 높이기 위해서는 SEO를 준수하여 글을 써야 합니다. 이때 SEO의 점수를 높이는 방법 중 하나가 글에 대한 목차를 만드는 일인데요. 이번 시간에는 티스토리 자동 목차 만들기에 대해 알아보겠습니다.

 

그대로 따라만 하면되는 티스토리 자동목차 만들기

목차

 

 

 

 

티스토리 자동 목차 만들기

1. jQuery TOC 파일 업로드

• jQuery TOC를 이용한 자동목차 만들기 방법에 대해 알아보겠습니다. jQuery는 자바스크립트 프레임워크로써 프로그램 개발 시 공통적으로 준수하고 활용할 수 있도록 공개된 프로그램 소스코드라고 이해하시면 됩니다.
  • 간혹 다운로드 받을 시 경고창이 뜨는 경우가 있는데 파일 확장자가 js라서 발생하는 것이니 안심하셔도 됩니다.
• 첨부한 jquery.toc.min.js 파일을 다운로드합니다.
• 다운로드한 jquery.toc.min.js 파일을 티스토리 관리자모드로 접속하여 파일 업로드합니다.
  • 파일 업로드 방법은 티스토리 관리자 화면 접속 → 꾸미기 → 스킨 편집 → html 편집 → 파일 업로드 → +추가 → jquery.toc.min.js 파일 선택 후 적용

jquery.toc.min.js

0.00MB

 

2. 자동 목차 만들기 태그 입력

• 티스토리 관리자 모드에서 꾸미기 → 스킨 편집 → html 편집 버튼을 클릭합니다.
• CTRL+F를 눌러 /body를 검색합니다.
• /body 바로 윗부분에 다음 스크립트 내용을 붙여 넣습니다.
• headings에 h2와 h3가 입력되어있습니다. 이는 h2와 h3를 목차로 만들겠다는 뜻입니다.
• h2만을 목차로 만들고 싶으시면 h3을 제거하시면 됩니다.

<script src="./images/jquery.toc.min.js"></script>
<script>
  $(document).ready(function() {
  $("#toc").toc({content: "스킨별 본문 클래스 확인", headings: "h2,h3"});
});
</script>

• 스킨별 본문 클래스 확인 방법입니다.
  • 우선 본인의 티스토리 글 중 하나를 열고, F12를 눌러줍니다.
  • 조금 전에 열었던 글에 상단 본문 부분을 클릭합니다.
  • 그럼 F12를 눌렀을 때 나온 창에 변화가 생기며 현재 클릭한 본문의 class를 표시를 해줍니다.
  • 저는 북클럽을 사용하고 있으며,  class명이 tt_article_useless_p_margin contents_style로 표시되었습니다.
  • 여기서 tt_article_useless_p_margin부분을 앞서 작성한 스킬 별 본문 클래스 확인 부분을 대체합니다. 이때 중요한 사항은 tt앞에 마침표. 을 꼭 찍어야 한다는 점입니다.
  • 완성동 스크립트 태그의 모습은 다음과 같습니다.

<script src="./images/jquery.toc.min.js"></script>
<script>
  $(document).ready(function() {
  $("#toc").toc({content: ".tt_article_useless_p_margin", headings: "h2,h3"});
});
</script>

 

 

 

 

3. 자동 목차 CSS에 입력하기

• 티스토리 관리자 모드에서 꾸미기 → 스킨 편집→ CSS 버튼을 클릭합니다.
• 자동 목차의 글자 크기와 색깔, 간격 등을 설정할 수 있는 CSS 코드를 추가해줍니다.
• 아래의 코드를 CSS 제일 마지막 부분에 추가해줍니다.

.book-toc {
  padding : 15px 0 5px;
  border-top : 1px solid #000000;
  border-bottom : 1px solid #000000;
}
.book-toc p {
  font-weight: bold;
  font-size: 1.5rem !important;
  color: var(--font-basic-1);
}
#toc {
  margin: 5px 0;
}
#toc * {
  font-size: 1.25rem;
  color:var(--font-basic-1) !important;
}
#toc a{
  font-weight:normal;
  text-decoration:none;
}
#toc a:hover {
  font-weight:bold;
}
#toc > li {
  margin-left: 30px;
  list-style-type: disc !important;
}
#toc > li > a {
  font-weight:bold;
  color : #006dd7 !important;
}
#toc > li > ul {
  margin-left: 10px;
}
#toc > li > ul > li {
  list-style-type: disc !important;
}
#toc > li > ul > li > a {
 
}
#toc > li > ul > li > ul {
 
}
#toc > li > ul > li > ul > li {
 
}
#toc > li > ul > li > ul > li > a {
 
}

 

• 마지막으로 그동안 입력한 소스코드를 간단하게 호출할 수 있도록  서식으로 만들어줍니다.
• 티스토리 관리자 → 콘텐츠 → 서식 관리 → 서식 쓰기를 클릭합니다.
• 서식 제목을 입력하고 기본모드를 클릭하여 HTML로 변경합니다.
• HTML로 변경한 후 다음의 코드를 붙여 넣고 완료를 클릭합니다.

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

스크립트 내용.txt

0.00MB

그대로 따라만 하면 되는 티스토리 목차 만들기에 대해 알아보았습니다. 목차를 만들면 SEO적으로도 유리하고, 보기에도 깔끔하니 블로그를 하시는 분들이라면 반드시 필요한 사항입니다. 복사 붙여 넣기가 안되시는 분들을 위해 스크립트 소스코드를 파일로 만들어 올려드리니 참고하시기 바랍니다^^

 

 

 

 

다음 키워드 검색량 조회 새로운 방법(사이트 주소)

다음 키워드 검색량 조회 새로운 방법(사이트 주소)

구글 애드센스 승인 가장 빠르게 나는 방법

구글 애드센스 승인 가장 빠르게 나는 방법