티스토리 자동 목차 만드는 방법

 

티스토리 블로그 작성시 목차를 작성해 주면 글을 읽는 사람이 원하는 정보를 쉽게 찾을 수 있고, 최적화에도 도움이 되어 목차를 작성해 주는 것이 좋습니다. 여러 가지 방법이 있겠지만, 초보자도 쉽게 블로그 작성시 자동으로 목차 만드는 방법을 알려드리고자 합니다. 오늘 소개해 드리는 방법은 단순히 블로그 작성시 html모드에서 글작성시 상단에 아래 코드를 추가해 주기만 하면 됩니다.

1. 자동 목차 생성 코드 복사

#table-of-contents {     background-color: #f9f9f9;     border: 1px solid #ddd;     padding: 10px;     margin-bottom: 20px;     font-size: 14px; } #table-of-contents h2 {     margin-top: 0;     font-size: 18px;     color: #333; } #table-of-contents ul {     list-style: none;     padding: 0; } #table-of-contents ul li {     margin: 5px 0; } #table-of-contents ul li a {     text-decoration: none;     color: #0073e6; } #table-of-contents ul li a:hover {     text-decoration: underline; }

자동목차만들기.txt

0.00MB

2. 티스토리 글쓰기

(1) 글쓰기 화면에서 HTML모드 클릭

(2) 위에서 복사한 코드를 상단에 붙여넣기

(3) 글 작성시 제목태그(h1, h2, h3)를 사용하여 목차에 포함될 제목을 작성

👌기본모드에서 글을 작성한다면 제목부문을 "제목1" 또는 "제목2, 제목3"으로 설정해 주면 자동으로 목차가 생성됨

3. 목차 스타일링

목차를 깔끔하게 보이게 하려면 아래 css코드를 추가해주면 더욱 깔끔한 목차를 만들 수 있습니다.

<div id="table-of-contents"></div> <script>     document.addEventListener('DOMContentLoaded', function () {         const content = document.querySelector('.entry-content'); // 본문 클래스         const headings = content.querySelectorAll('h1, h2, h3'); // 제목 태그         const toc = document.getElementById('table-of-contents');         if (headings.length > 0) {             let tocHtml = '<h2>목차</h2><ul>';             headings.forEach((heading, index) => {                 const id = `heading-${index}`;                 heading.id = id; // 제목 태그에 고유 ID 부여                 tocHtml += `<li><a href="#${id}">${heading.textContent}</a></li>`;             });             tocHtml += '</ul>';             toc.innerHTML = tocHtml;         }     }); </script>

목차스타일링css.txt

0.00MB

 

css 적용 방법

(1) 티스토리 관리자 페이지 > 스킨편집 > html편집 > css편집 으로 이동합니다.

(2) 위 목차스타일링 css코드를 복사하여 맨 아래에 붙여넣고 저장합니다.

4. 항상 자동 목차 적용하기

만약 모든 글에 목차를 자동으로 넣고 싶다면, 스킨의 HTML에 코드를 추가하세요.

 

(1) 티스토리 관리자 페이지 > 스킨 편집 > HTML 편집으로 이동합니다.

(2) <article> 태그 또는 본문 표시 영역(대부분 entry-content 클래스)의 상단에 위 1번 JavaScript 코드를 삽입합니다.

      (코드 추가 위치 : ctrl+f4를 클릭하여 "  article_rep_desc_ " 코드 있는 부분을 찾아서 그 위에 붙여주기)

(3) 저장 후 모든 글에 적용되는지 확인합니다.

5. 효과 확인

• 게시글 작성 시 제목 태그를 사용하면 자동으로 목차가 생성됩니다.
• 목차는 제목을 클릭하면 해당 위치로 스크롤 이동이 가능합니다.
• 별도의 작업 없이 목차를 지속적으로 사용할 수 있습니다.

 

 

티스토리 블로그에 네이버 애널리틱스 연결하기

 

구글 애널리틱스와 구글 애드센스 연결하기

 

구글 애널리틱스 가이드 : 설치 및 설정방법

 

티스토리 블로그 상단 이미지 배경 없애는 방법

 

티스토리 썸네일이미지 정사각형으로 변경

 

티스토리에 광고가 나오지 않을때