누구나 쉽게 따라 만드는 TOC 자동 목차 #2
오늘은 저번 '티스토리 자동 목차 #1'에 이어 조금 스타일이 다른 '티스토리 자동 목차 #2'에 대해 알아보겠습니다.
역시 제가 프로그래머도 블로그 고수도 아니기 때문에 그냥 다른 고수들이 올려주신 소스를 참고하며 조금씩 수정한 소스입니다.
이번에는 소제목 목록의 글 크기도 변경 가능하며, 글색상이 하이퍼링크의 퍼런 색상이 아닌 나만의 색으로 만들 수 있고 마우스 오버 시 글색상이 굵게 변경되는 소스로 제가 사용하는 목차입니다.
설명이 길고 이미지가 많아 복잡해 보이지만 설명대로 하나씩 따라 하시면 쉽게 'TOC 자동 목차'를 만드실 수 있으니 차근차근 따라 해 보시기 바랍니다.
'티스토리 자동 목차 #2'의 소제목 리스트 서식은 h2, h3만 출력되도록 작성 되었습니다.
목차
jquery.toc.min.js파일 다운로드
티스토리 블로그에 자동으로 글 목차를 만들어 주는 공개소스입니다.
1. 아래 링크에서 'jquery.toc.min.js'파일을 다운로드하세요.
jquery.toc.min.js파일 업로드
다운로드한 jquery.toc.min.js파일을 티스토리 스킨에 업로드합니다.
1. '블로그관리 > ①스킨편집 > ②html편집 > ③파일업로드 > ④추가'로 진입 후 jquery.toc.min.js파일을 업로드합니다.
2. 다운로드한 폴더를 찾아 jquery.toc.min.js 파일을 업로드합니다.
HTML 코드 삽입
1. 스킨 편집의 HTML을 클릭 후 아래의 코드를 복사 후 </head> 윗부분에 넣어 줍니다.
<!-- 목차 #1 -->
<script type="text/javascript" src="./images/jquery.toc.min.js"></script>
<!-- 목차 #1 끝 -->
2. </head> 윗부분에 코드를 넣은 후 저장을 눌러 저장을 해줍니다.
CSS코드 추가하기
1. '관리자 홈'에서 꾸미기 > 스킨 편집 > html 편집 > CSS'로 들어갑니다.
2. 아래 코드를 복사한 뒤 CSS의 맨 아래쪽에 넣어주면 됩니다.
(2024. 01 코드 수정)
/* 티스토리 자동목차(TOC)#2 */
#toc * {
font-size: 16px;
color: #313131 !important;
}
#toc a:hover {
font-weight: bold;
text-decoration: none;
color: #000000;
}
#toc ul {
margin-top: 5px;
margin-bottom: 0px;
}
#toc ol {
margin-top: 5px;
margin-bottom: 0px;
}
#toc {
margin-left: 0px;
}
#toc > li {
margin-bottom: 0;
margin-top: 7px;
}
#toc > li > a {
text-decoration:none;
}
#toc > li > ul {
margin-top: 0;
margin-bottom: 0;
}
#toc > li > ul > li {
font-size: 0.98em;
margin-bottom: 5px;
margin-top: 5px;
}
#toc > li > ul > li > a {
font-size: 0.98em;
text-decoration:none;
}
#toc > li > ul > li > ul {
margin-bottom: 0;
}
#toc > li > ul > li > ul > li {
font-size: 0.95em;
margin-bottom: 0px;
margin-top: 0px;
}
#toc > li > ul > li > ul > li > a {
font-size: 0.95em;
text-decoration:none;
}
/* 티스토리 자동목차(TOC)#2 끝 */
3. CSS의 맨 아래쪽에 넣은 후 적용을 눌러 저장합니다.
CSS코드 수정 가능한 부분 설명 (2024. 03월 일부 수정)
자동목차의 목록이 회색이 아닌 파란색 등 다른 색으로 나오시는 분은 !important를 추가 하시면 됩니다.
(이 부분을 수정하면 목차의 소제목 목록에 색상, 크기, 상하여백 등을 조정할 수 있습니다)
목차 서식 등록하기
티스토리 자동 목차에 서식을 사용하는 이유는 서식으로 미리 목차 코드를 만들어 놓은 뒤 글 쓸 때마다 편하게 불러와 원하는 위치에 목차를 넣어주기 위함입니다.
1. 아래 코드 중 원하는 스타일의 코드를 복사 후 서식 쓰기로 이동합니다.
(숫자 리스트)
<p data-ke-size="size18"><b>목차</b></p>
<ol id="toc" style="list-style-type: decimal;"></ol>
<script type="text/javascript"> $(function(){ $("#toc").toc({content: ".tt_article_useless_p_margin", headings: "h2, h3"}); });</script>
(점 리스트)
<p data-ke-size="size18"><b>목차</b></p>
<ul id="toc" style="list-style-type: decimal;"></ul>
<script type="text/javascript"> $(function(){ $("#toc").toc({content: ".tt_article_useless_p_margin", headings: "h2, h2"}); });</script>
2. 서식을 이용하려면 '블로그 관리 홈 > 서식 관리자 > 서식 쓰기'로 들어갑니다.
3. HTML 모드로 바꿔주시고 위에서 복사한 코드를 아래와 같이 넣어서 서식을 만들어주세요.
4. 코드를 넣은 후 기본모드로 돌아오면 아래처럼 보입니다. 여기서 완료를 눌러서 저장합니다.
서식코드 중 수정이 가능한 부분
소제목 리스트 앞부분을 점이나 숫자로 변경이 가능합니다.
또한 리스트도 제목1 (h2), 제목2 (h3), 제목3 (h4) 이렇게 나오길 원하시면 코드의 headings: "h2, h3"을 headings: "h2, h3, h4"으로 변경하시면 됩니다.
- 리스트
- 리스트
여기서 둥근 점이나 숫자가 나오는 게 싫으신 분은 "decimal" 나 "disc"를 "none"로 바꿔주시면 됩니다.
<ol id="toc" style="list-style-type: none;" data-ke-list-type="none" ></ol>
<ul id="toc" style="list-style-type: none;" data-ke-list-type="none" ></ul>
자동목차 적용이 안 되는 분은 아래처럼 코드를 변경해 보세요.
- Magazine 스킨은 .tt_article_useless_p_margin을 .inner_content으로 바꿔 주세요.
- #1 스킨을 사용하시는 분들 중 적용이 안 되는 분은 .tt_article_useless_p_margin을 .area_view으로 바꿔 보시기 바랍니다.
여기까지 하셨다면 기본 목차 만들기는 완료되었으며, 이제는 원하는 위치에 서식을 사용하여 목차를 넣어 주시면 됩니다.
서식 사용법
글에서 목차를 넣어줄 부분을 선택 후 우측 상단의 서식을 눌러 저장된 서식을 불러오면 됩니다.
1. '①더보기 > ②서식 > ③만들어둔 서식' 순으로 원하는 위치에 넣어주세요.
서식에 인용구를 이용해 커스터마이징 하기
제 포스팅 중 '티스토리 소제목 서식(HTML) 스타일 모음'에서 인용구의 텍스트 부분에 코드를 넣어서 사용하셔도 됩니다
인용구에 서식을 넣는 법 예제입니다
아래의 인용구에 목차 코드를 넣어 서식을 만들어 보겠습니다.
목차
이 부분에 서식을 넣어 주세요
1. 인용구의 기본 코드입니다.
코드의 빨간색 부분을 지우고 목차 코드를 넣어주면 됩니다.
<div style="padding: 0em 1em 0em 1em; margin: 0.5em 0em; border-left: 10px solid #009a87;">
<p data-ke-size="size18"><span style="color: #009a87; font-weight: bold;"> 목차 </span></p>
<p data-ke-size="size16">이 부분에 서식을 넣어 주세요</p>
</div>
2. 아래처럼 목차 코드를 넣어주면 완성입니다.
다소 복잡한 모양의 인용구도 방법은 동일합니다. <P코드>를 지우고 그 위치에 목차 코드를 넣어주면 됩니다.
<div style="padding: 0em 1em 0em 1em; margin: 0.5em 0em; border-left: 10px solid #009a87;">
<p data-ke-size="size18"><b>목차</b></p>
<ol id="toc" style="list-style-type: decimal;" data-ke-list-type="decimal" ></ol>
<script type="text/javascript"> $(function(){ $("#toc").toc({content: ".tt_article_useless_p_margin", headings: "h3"}); });</script>
</div>
3. 아래 코드는 인용구를 사용한 예제입니다, 복사해서 테스트해 보세요.
인용구 서식 목차 예제 1
<div style="padding: 0em 1em 0em 1em; margin: 0.5em 0em; border-left: 10px solid #009a87;">
<p data-ke-size="size18"><b>목차</b></p>
<ol id="toc" style="list-style-type: decimal;" data-ke-list-type="decimal"></ol>
<script type="text/javascript"> $(function(){ $("#toc").toc({content: ".tt_article_useless_p_margin", headings: "h3"}); });</script>
</div>
인용구 서식 목차 예제 2
<div style="padding: 10px 20px 0px 20px; border-radius: 10px; margin: 1em 1em; border: 1px solid #ccd0d7; background-color: #f5f5f5; box-shadow: 1px 2px 3px 1px rgba(0,0,0,.1);">
<p style="border-bottom: 2px solid #ccd0d7;" data-ke-size="size16"><b>▤ 목차</b></p>
<script src="./images/jquery.toc.min.js"></script>
<ul id="toc" style="list-style-type: disc;" data-ke-list-type="decimal"></ul>
<script type="text/javascript"> $(function(){ $("#toc").toc({content: ".tt_article_useless_p_margin", headings: "h2, h3"}); });</script>
</div>더 많은 '자동목차' 서식 보러가기
[▶ 티스토리 꾸미기] - 티스토리 꾸미기 | TOC 자동목차 서식(HTML) 스타일 모음
티스토리 꾸미기 | TOC 자동목차 서식(HTML) 스타일 모음
목차 자동목차(TOC) #2 서식 스타일 모음 제가 포스팅한 '자동목차(TOC) #2와 #4'에 적용 가능한 서식 스타일 모음입니다. 자동목차 서식 스타일 모음은 따로 CSS를 수정하지 않고 HTML 코드를 서식으로
galam.tistory.com
자동 목차가 작동이 안 될 경우.
※ 목차만 표시되고 소제목이 표시되지 않는 경우
간혹 '목차'만 표시되고 '소제목'은 표시되지 않는다는 분들이 계셔 검색을 해보니 스킨이나 기타 영향에 따라 <head>에 넣어야 작동하는 경우도 있고 <body>에 넣어야 작동하는 경우도 있다 합니다.
제대로 작동이 되지 않는 경우 <head>와 <body>에 각각 넣어보시기 바랍니다.
제 경우는 <head>와 <body> 모두에서 정상적으로 자동되었습니다.
※ 모바일에서 목차가 보이지 않는 경우
기본적으로 모바일에서 정상적으로 작동합니다.
다만 '티스토리 모바일 앱'을 통해서 접속하시면 '자동목차'가 작동하지 않습니다.
모바일 앱에서는 자바스크립트 코드가 작동하지 않습니다. 그렇기 때문에 애드센스 광고도 뜨지 않습니다.
마무리
이렇게 목록 만들기와 서식 사용법까지 알아봤습니다.
여기까지만 하시면 기본적인 목차는 완성입니다.
제 포스팅 중 '티스토리 인용구 서식(HTML) 스타일 모음'에서 인용구의 <P> 부분에 '목차 코드'를 넣어서 나만의 목차를 만들어 보세요.
관련글 보러가기
[˙티스토리 꾸미기] - 티스토리 자동목차(TOC) 쉽게 만들기 part 4 | 아래로 열리는 자동목차
티스토리 자동목차(TOC) 쉽게 만들기 part 4 | 아래로 열리는 자동목차
자동목차(TOC) 쉽게 만들기 #4 | 아래로 펼쳐지는 자동목차 오늘은 처음에는 목차의 리스트가 접혀있다 '▽열기'를 클릭 시 아래로 펼쳐지며 목차의 리스트가 나오는 아래로 열리는 '자동목차(TOC)
galam.tistory.com
[▶ 티스토리 꾸미기] - 자동목차(TOC) 쉽게 만들기 part 3 - 좌측에 따라 움직이는 자동목차
티스토리 꾸미기 | 자동목차(TOC) 쉽게 만들기 part 3 - 좌측에 따라 움직이는 자동목차
좌측에 따라 움직이는 자동목차(TOC) 만들기 오늘은 '자동목차 만들기 #2'에 이어 좌측에 아래위로 움직이는 '자동목차(TOC) #3'에 대해 알아보겠습니다. 이번 자동목차는 서식을 사용하는 목차가
galam.tistory.com
[▶ 티스토리 꾸미기] - 티스토리 소제목 꾸미기 | 서식(HTML) 스타일 모음 part 2
티스토리 소제목 꾸미기 | 서식(HTML) 스타일 모음 part 2
소제목 서식 모음 #2 티스토리에서 서식을 사용하는 장점은 다음과 같습니다. 시각적인 효과, 가독성 향상, 정보 전달 효과, 포스트 관리 용이성 등 포스트의 시각적 효과와 가독성, 정보 전달 효
galam.tistory.com
[▶ 티스토리 꾸미기] - 티스토리 소제목 꾸미기 | 서식(HTML) 스타일 모음 part 1
티스토리 소제목 꾸미기 | 서식(HTML) 스타일 모음 part 1
소제목 서식 스타일 모음 #1 ✓ 소제목 서식 사용법 티스토리에서 서식을 사용하는 장점은 다음과 같습니다. 시각적인 효과, 가독성 향상, 정보 전달 효과, 포스트 관리 용이성 등 포스트의 시각
galam.tistory.com
"쿠팡 파트너스 활동을 통해 일정액의 수수료를 제공받을 수 있습니다"
'▸ 티스토리 이야기 > └ TOC 자동목차 만들기' 카테고리의 다른 글
| 티스토리 꾸미기 | TOC 자동목차 서식(HTML) 스타일 모음 (12) | 2024.02.05 |
|---|---|
| 티스토리 자동목차(TOC) 쉽게 만들기 part 4 | 아래로 열리는 자동목차 (2) | 2024.01.31 |
| 티스토리 꾸미기 | 자동목차(TOC) 쉽게 만들기 part 3 - 좌측에 떠있는 스크롤 반응형 자동목차 (3) | 2024.01.30 |
| 티스토리 꾸미기 | 자동목차(TOC) 쉽게 만들기 part 1- 초보용 (28) | 2023.05.29 |
