티스토리 본문 자동 목차 만들기
- Blog/Tistory
- 2022. 9. 14.
Contents
개요
SEO(Search Engine Optimization)에 긍정적인 효과가 있는 블로그 본문의 자동 목차 만들기 방법
서식 삽입 기능을 이용하여 블로그 글 상단이나 하단에 자동으로 목차를 만들어 넣을 수 있다.
STEP 1 - jquery.toc.min.jc 파일 업로드
스킨 편집 - html 편집 - 파일 업로드 탭에서 해당 첨부파일을 업로드
STEP 2 - HTML Head 세션에 추가
<head></head> 사이에 아래의 코드를 추가한다. </head> 바로 윗줄에 추가하는 것이 좋다.
<script src="./images/jquery.toc.min.js"></script>STEP 3 - HTML body 세션에 추가
<body></body> 사이에 아래의 코드를 추가한다. </body> 바로 윗줄에 추가하는 것이 좋다.
<script>
$(document).ready(function () {
var $toc = $("#toc");
$toc.toc({ content: ".tt_article_useless_p_margin", headings: "h2, h3, h4" });
if ($(".another_category").length > 0) {$toc.find("li:last").remove();}
});
</script>STEP 4 - CSS 에 추가
/* 자동 목차 스타일 */
.book-toc {
position: relative;
width: fit-content;
border: 1px solid #8a8a8a;
padding: 10px 20px 0px 20px;
z-index: 1;
}
.book-toc:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: #8a8a8a;
z-index: -1;
opacity: 0.1;
}
.book-toc p {
font-weight: bold;
font-size: 1.2em !important;
color: #396120;
}
#toc * {
font-size: 18px;
color: #000 !important;
}
#toc {
padding: 0px 20px 0px 25px;
}
#toc a:hover {
color: #000;
}
#toc ul {
margin-top: 5px;
margin-bottom: 0px;
}
#toc > li {
padding-left: 0;
text-indent: 0;
list-style-type: disc;
padding: 0px 20px 0px 0px;
margin-bottom: 10px;
margin-top: 7px;
}
#toc > li > a {
text-decoration:none;
font-weight: bold
}
#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: disc;
margin-bottom: 5px;
margin-top: 5px;
}
#toc > li > ul > li > a {
font-size: 1em;
text-decoration:none;
}
#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: disc;
margin-bottom: 0px;
margin-top: 0px;
}
#toc > li > ul > li > ul > li > a {
font-size: 0.875em;
text-decoration:none;
}
/* h2, h3, h4 스타일 */
.tt_article_useless_p_margin h2 {
text-align: left;
color: white;
background-color: black;
border-left: gray 10px solid;
border-bottom: 1px solid gray;
padding: 3px 0 5px 10px;
margin: 30px 0 20px 0;
}
.tt_article_useless_p_margin h3 {
text-align: left;
border-left: #2c2c2c 8px solid;
border-bottom: 1px solid #2c2c2c;
padding: 3px 0 5px 10px;
margin-bottom: 15px;
}
.tt_article_useless_p_margin h4 {
text-align: left;
border-left: #8a8a8a 6px solid;
border-bottom: 1px solid #8a8a8a;
padding: 3px 0 5px 10px;
margin-bottom: 15px;
}STEP 5 - 서식 쓰기
콘텐츠 - 서식관리 - 서식 쓰기에서 기본모드가 아닌 HTML모드에서 아래의 코드를 입력한다.
<div class="book-toc">
<p data-ke-size="size16">Contents</p>
<ul id="toc" style="list-style-type: disc;" data-ke-list-type="disc"></ul>
</div>
<p data-ke-size="size16"> </p>'Blog > Tistory' 카테고리의 다른 글
| 04. 티스토리 블로그 북클럽 뉴북 썸네일 크기 변경 (0) | 2022.09.19 |
|---|---|
| 03. 티스토리 블로그 스킨 HTML & CSS 수정 (0) | 2022.09.17 |
| 02. 티스토리 블로그 검색엔진 등록(네이버, 다음, 구글, 줌, 빙, 야후) (0) | 2022.09.16 |
| 01. 티스토리 블로그 기본 설정 (0) | 2022.09.16 |
| 티스토리 북 클럽 스킨 상단메뉴 고정하기 (0) | 2022.09.14 |