티스토리 블로그 목차 3분만에 완성하는 법 - 가독성 UP, 방문자 체류시간 UP

 

안녕하세요.

오늘은 가독성 UP, 방문자 체류시간 UP되는 티스토리 목차 3분만에  만드는 법에 대해 함께 알아보기로 해요!

티스토리 블로그에 자동목차를 추가하면 독자들이 글의 구조를 쉽게 파악하고 원하는 섹션으로 빠르게 이동할 수 있습니다. 이 글에서는 초보자도 쉽게 따라할 수 있는 자동목차 추가 방법을 상세히 설명하겠습니다.

 

3분만에 완성하는 티스토리 블로그 목차의 마법: 가독성 UP, 방문자 체류시간 UP!

 

안녕하세요, 여러분! 오늘은  티스토리 블로그를 한 단계 업그레이드할 수 있는 꿀팁, 가독성 UP, 방문자 체류시간 UP되는 티스토리 목차 3분만에  만드는 법을 가져왔어요.

목차 만들기와 문단 간격 조절하는 방법, 이 두 가지만 마스터해도 여러분의 블로그가 확 달라질 거예요!, 

목차의 마법, 3분이면 충분해요!

목차를 만들면 독자들이 글의 구조를 한눈에 파악할 수 있어 가독성이 훅 올라가죠. 게다가 원하는 섹션으로 바로 이동할 수 있어서 사용자 경험도 좋아집니다. SEO에도 도움이 된다니 일석삼조네요!

1. 필요한 파일 준비하기

먼저, 자동목차 기능을 위한 JavaScript 파일을 다운로드해야 합니다.

1. 'jquery.toc.zip' 파일을 다운로드합니다.
2. 압축을 풀면 'jquery.toc.js'와 'jquery.toc.min.js' 두 개의 파일이 나옵니다

 

 

https://ndabas.github.io/toc/

Table of Contents jQuery Plugin — jquery.toc

 

다운로드 링크: https://ndabas.github.io/toc/assets/jquery.toc.zip

 

 

2. 파일 업로드하기

다운로드한 jQuery.toc.js 파일을 티스토리 스킨에 업로드합니다.

1. 티스토리 관리자 페이지에서 '스킨 편집' > 'html 편집' > '파일업로드'로 이동합니다.
2. '추가' 버튼을 클릭하고 'jquery.toc.min.js' 파일을 업로드합니다.
3. 파일이 성공적으로 업로드되었는지 확인 후 '적용' 버튼을 클릭합니다

 

 

 

티스토리 스킨 편집' > 'html 편집' > '파일업로드

'jquery.toc.min.js' 파일을 추가해줍니다.

 

 

관리 페이지 > 꾸미기 > 스킨 편집 > html 편집 > 파일업로드로 이동 후 다운로드 한 파일 추가

(압축파일 풀어서 .min.js 파일 추가)

 

 

3. HTML 코드 추가하기

3-1. HEAD 섹션에 코드 추가

 

관리 페이지 > 꾸미기 > 스킨 편집 > html 편집 으로 이동

<!-- 자동 목차 시작 -->
<script src="./images/jquery.toc.min.js"></script>
<!-- 자동 목차 끝 -->

 

head 태그 사이에 .js 파일 추가(즉, 이 코드를 HTML의 </head> 태그 바로 위에 붙여넣습니다 )

 

 

 

 

3-2. BODY 섹션에 코드 추가

<!-- 자동 목차 시작 -->
<script>
$(document).ready(function () { var $toc = $("#toc"); $toc.toc({ content: ".tt_article_useless_p_margin", headings: "h2, h3, h4" }); });
</script>
<!-- 자동 목차 끝 -->

 

이 코드를 HTML의 </body> 태그 바로 위에 붙여넣습니다

 

 

4. CSS 스타일 추가하기

목차의 스타일을 꾸미기 위해 다음 CSS 코드를 추가합니다. 'CSS' 편집 페이지의 가장 하단에 붙여넣으세요.

 

HTML 탭 바로 옆에 CSS 탭이 있습니다.

/* 자동 목차 꾸미기 */ .book-toc { position: relative; width: fit-content; border: 1px solid #ffb33f; padding: 10px 20px 0px 20px; z-index: 1; margin-top: 100px; margin-bottom: 100px; } .book-toc:after { content: ""; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: #fe9900; z-index: -1; opacity: 0.1; } .book-toc p { font-weight: bold; font-size: 1.2em !important; color: #1b9a1a; } #toc * { font-size: 18px; color: #000 !important; } #toc { padding: 0px 20px 0px 25px; } #toc ul { margin-top: 5px; margin-bottom: 0px; } #toc > li { font-size: 0.87em; padding-left: 0; text-indent: 0; list-style-type: none; padding: 0px 20px 0px 0px; margin-bottom: 10px; margin-top: 7px; text-align: left; } #toc > li > ul { padding-left: 20px; margin-top: 0; margin-bottom: 0; } #toc > li > ul > li { font-size: 0.87em; padding-left: 0; text-indent: 0; list-style-type: none; margin-bottom: 10px; margin-top: 7px; } #toc > li > ul > li > ul { padding-left: 20px; margin-top: 0; margin-bottom: 0; } #toc > li > ul > li > ul > li { font-size: 0.87em; padding-left: 0; text-indent: 0; list-style-type: none; margin-bottom: 10px; margin-top: 7px; }

 

부드러운 스크롤 효과를 원한다면 다음 코드도 추가하세요:

 

/* 부드러운 스크롤 이동 기능 */ html { scroll-behavior: smooth; }

 

5. 자동목차 적용하기

글 작성 시 HTML 모드에서 원하는 위치에 다음 코드를 붙여넣습니다:

<div class="book-toc" style="margin-top: 20px; margin-bottom: 30px;">
<p data-ke-size="size16">목차</p>
<ul id="toc" style="list-style-type: none;" data-ke-list-type="none"></ul>
</div>

 

매번 다시 설정하기 귀찮다면 서식에 자동목차 서식을 저장해두고 활용하세요.

 

티스토리 서식관리

 

 

 

 

이제 글을 발행하면 자동으로 목차가 생성됩니다

티스토리 자동목차

 

 

단, 목차에 표기되기를 원하는 텍스트의 경우 설정을 제목으로 해주는 것, 잊지 마세요!

 

티스토리 제목 설정

이렇게 간단한 팁으로 티스토리 블로그에 쉽게 자동목차를 추가할 수 있습니다.

목차는 독자들의 글 이해를 돕고 네비게이션을 개선하여 블로그의 UX(사용자 경험)을 향상시킵니다.

 

검색엔진도 좋아하니 일거양득이죠!

여러분의 블로그가 더욱 빛나길 바라며, 오늘도 행복한 블로깅 하세요! 😊

 

이렇게 오늘은 가독성 UP, 방문자 체류시간 UP되는 티스토리 목차 3분만에  만드는 법에 대해 함께 알아보았습니다.

 

알려드린 내용이 도움이 되었다면 구독 & 좋아요를 눌러주세요!

앞으로 좋은 정보를 계속 알려드리는 것에 큰 힘이 됩니다.

모두 행복한 하루 되시길 바라요!