구에디터에서만 동작합니다.
TOC (Table of Contents)
TOC 플러그인
본문 상단에 자동으로 목차가 들어가고 클릭을 하면 그 목차로 이동하게 됩니다. 자동으로 들어가게 하기 위해서는 몇 개의 설정이 필요합니다.
1. https://ndabas.github.io/toc/ : 먼저 플러그인을 깃에서 다운로드 하면 2개의 파일이 생깁니다. 플러그인을 티스토리 파일 업로드에 올려놔야합니다.
2. 스킨편집 >> html편집 >> 파일업로드 >> 추가
3. HTML 편집으로 와서 다음 코드를 <head> </head> 사이에 넣어주세요
<script type="text/javascript" src="./images/jquery.toc.min.js">
</script>
4. CSS 편집으로 와서 가장 마지막에 다음 코드를 넣어주세요.
/* 글 목차 */
.toc {
list-style-type: disc;
background: #fff none repeat scroll 0 0;
border: 1px solid #000;
display: inline-block;
font-size: 100%;
margin: 0px;
padding: 10px;
width: auto;
}
.toc ul {
list-style-type: none;
}
.toc > ul {
list-style-type: none;
}
.toc > ul > ul {
list-style-type: none;
}
.toc > ul > ul > ul {
list-style-type: none;
}
본문 적용
서식 추가
서식을 하나 만들게요. 티스토리 관리자 모드 >> 서식관리 >> 서식쓰기 >> html 에 붙여넣기
<p><br /></p>
<div class="txc-textbox" style="line-height: 1.8; border: 1px solid #000; background-color: #fff;">
<ul class="toc" data-toc="div.content" data-toc-headings="h3" style="list-style-type:disc"></ul>
</div>
<p><br /></p>
<div class="content" style="line-height: 1.8;">
<h3>목차 1</h3>
<p>글</p>
<p><br /></p>
<h3>목차 2</h3>
<p>글</p>
<p><br /></p>
</div><p><br /></p>html 을 체크해제하면 본문은 이렇게 보입니다.
미리보기 화면입니다. 화면에 보이는 밑줄들은 따로 세팅해 놓은 것이니 무시해주세요.
코드
h3은 머리말 3 입니다. "h3,h4,h5"식으로 확장 가능합니다.
<ul class="toc" data-toc="div.content" data-toc-headings="h3" style="list-style-type:disc"></ul>
<div> 와 </div> 태그 사이에 <h> 태그가 와야 합니다.
새로운 글씨기는 버그가 있습니다. 에디터 모드와 html모드를 왔다갔다하면 <ul></ul>이 사라집니다. 그러므로 서식으로 불러오거나 할 때 ul 태그가 없어야만 합니다. 새로운 글쓰기를 쓰시는 분들은 아래 코드를 쓰시길 바랍니다.
<p> </p>
<div class="toc" data-toc="div.content" data-toc-headings="h3" style="list-style-type:disc; width:100%;">
</div>
<p> </p>
<div class="content" style="line-height: 1.8;">
<h3>목차 1</h3>
<p>글</p>
<p> </p>
<h3>목차 2</h3>
<p>글</p>
<p> </p>
</div>
<p> </p>
목록 표시
list-style-type
disc : 목록 스타일 원으로 표시
square : 목록 스타일 네모로 표시
list-style-image
목록 스타일 이미지로 표시 합니다.
1. 파일 업로드에 아이콘으로 쓸 이미지를 올립니다.
2. CSS편집으로 옵니다. .toc ul 안에 다음과 같이 넣습니다.
.toc ul {
list-style-image: url("./images/이미지.png");
list-style-position: inside;
}
2-1. 북클럽스킨인 경우 entry-content ul 을 찾아 다음과 같이 바꿔줍니다.
.entry-content ul {
list-style-image: url("./images/이미지.png");
list-style-position: inside;
margin-bottom: 22px;
}
이미지가 목록 스타일에 반영되었습니다.
관련포스트
'웹 개발 > 블로그' 카테고리의 다른 글
| 브런치스토리 가입, 작가, 스토리크리에이터, 수익구조 (66) | 2023.08.14 |
|---|---|
| 블로그 | 개인블로그 개발 과정 정리 (40) | 2022.05.25 |
| 블로그 | 카카오뷰와 티스토리 연동 (12) | 2022.04.25 |
| 블로그 | IFTTT로 페이스북 페이지 연동 (0) | 2022.02.23 |
| 티스토리 | 본문 제목 영역 수정하기 (0) | 2020.08.12 |
| Bing 웹마스터 SEO (2) | 2020.06.10 |
| 검색 엔진 최적화를 위한 SEO (0) | 2020.05.14 |
| 티스토리 | 사이즈 이미지 태그 스킨 관련 팁 (0) | 2020.02.17 |
댓글