티스토리 뷰
티스토리에 TOC 자동 목차를 만들고 싶은 이유는 포스팅 글을 좀 더 깔끔하고 구조화가 되어 보이고 싶기 때문입니다. 자동목차는 TOC라고 하는데, 웹 페이지나 문서에서 사용자가 콘텐츠의 구조를 파악하고 원하는 정보를 빠르게 찾을 수 있도록 도와주는 목차를 말합니다. 티스토리 초보 블로그에게 유용할 것 같아서 정리를 하였습니다.
[목차여기]
티스토리 자동목차를 사용하는 방법은 무엇이 있을까?
자동 목차를 적용하는 방법은 메인 HTML에서 전체 포스팅 글에 반영하는 방법과 포스팅할 때마다 목차를 만드는 방법이 있습니다. 이번 포스팅에 사용된 스킨 기준으로는 전체 포스팅에 적용하기 위한 방법에 대해 정리하였습니다. 처음에는 복잡해 보일 수 있지만, 아래 순서를 따라서 해보시고, 해당 항목의 요약 사진을 보신다면 이해가 되실 것이라고 봅니다.
저는 기존에는 잘 사용하던 스킨에서 #1 스킨으로 넘어오면서 자동 목차가 전체 반영이 되지 않아 여러 방법을 찾게 되었습니다. 제가 테스트한 스킨은 #1 스킨-아로스 버전과 선한 오가닉님의 스킨에 적용하여 테스트를 하였습니다.
기존 인터넷에 북스킨이나, 고래스킨은 소스가 많기 때문에 인터넷에 찾으면 자료가 많이 있으니, 웹서핑하신다면 쉽게 해결하실 수 있으실 것입니다.
스킨 Organic 스킨에서 자동 목차 적용 과정 요약
Organic Skin은 인터넷 공개된 내용을 바탕으로 제가 수정 테스트를 해보았습니다. 제가 참고한 곳은 Living-T 님의 글을 참고하여서 js파일을 제 블로그에 적용하였습니다. 스크립트의 자동목차를 티스토리 기준 제목 1(H2), 제목 2(H3)가 자동 목차가 나오도록 수정하였습니다.
#1 스킨_아로스 버전에서 자동 목차 적용 요약
#1 스킨_아로스 버전은 위 방법으로 적용이 안되어 자바스크립트 코드를 이용하여 직접 자동 목차를 만들어 주는 방식을 찾게 되었습니다. 이 부분은 아직 코드 해석을 제가 못해서 시간이 좀 더 걸릴 것 같습니다. 추가적으로 수정을 해보려고 했지만 실패를 했습니다.
스킨 편집 및 적용 실습 해보기
지금부터 실습입니다. 스킨 #1이면, 파일만 받고 적용만 하시면 바로 사용할 수 있을 것이며, 오가닉 스킨은 순서대로 따라와 주세요.
#1 스킨_아로스버전 기준 실습
#1 스킨은 아래 파일을 다운로드 후 </body> 위에 코드를 삽입하고, 적용을 누릅니다. 이후 [목차 여기]라고 글쓰기위치에 작성을 하시면 바로 적용이 됩니다.
오가닉 스킨 기준 실습_목차 파일 다운로드하기
먼저 자동 목차를 만들어 줄 수 있는 js 파일은 다운로드합니다. 자동목차(TOC)를 생성하기 위한 jQuery 플러그인인 jquery.toc.min.js 파일의 코드 내용입니다. 아래 사진은 오가닉 스킨에 자동 목차 적용하는 방법을 전체적으로 요약해 놓았습니다.
이 코드는 Nikhil Dabas가 개발한 Table of Contents jQuery 플러그인으로, 웹 페이지에서 자동목차를 생성하는 데 사용됩니다. 이 플러그인은 해당 웹 페이지 내에서 특정 제목 요소를 인식하여 목차로 구성하고, 각 제목 요소에 대한 링크를 생성합니다. 이렇게 생성된 목차를 클릭하면 해당 섹션으로 즉시 이동할 수 있습니다.
자동목차를 생성하려면 jQuery 라이브러리가 필요하며, 해당 코드는 이 라이브러리를 기반으로 작동합니다. 이러한 자동목차 플러그인을 사용하면 사용자들이 웹 페이지 내의 콘텐츠를 쉽게 파악하고 탐색할 수 있으며, 웹 페이지의 사용성과 SEO 향상에 도움을 줄 수 있습니다.
이러한 플러그인을 사용하면 웹 개발자들은 자동목차를 간편하게 구현할 수 있으며, 사용자들은 원하는 정보를 빠르게 찾을 수 있어 좋은 사용자 경험을 얻을 수 있습니다.
js파일 티스토리에 적용하기
다운로드한 파일을 티스토리 편집에 있는 파일 업로드 항목으로 이동합니다. 이동 후 js 파일을 업로드합니다. 업로드를 하셨다면 적용하기를 누릅니다. 사진 1 참조 부탁드립니다.
js 파일을 불러오기 위해 HTML 코드 삽입하기
티스토리편집에 있는 HTML 항목으로 이동합니다. 아래 코드를 복사하여 </head> 윗부분에 넣어 줍니다. 잘 모르겠으면, 사진 파일 참조 부탁드립니다.
<!-- 목차 #1 -->
<script type="text/javascript" src="./images/jquery.toc.min.js"></script>
<!-- 목차 #1 끝 -->
목차를 꾸며주기 위해 CSS 코드 추가해 주기
스킨편집에 있는 CSS 탭 항목으로 이동합니다. 아래 코드를 복사 후 붙여 넣기 해주세요. 위치는 코드 마지막줄에 저는 넣었습니다. 위치는 크게 중요하지 않으니 부담 없이 진행해 주세요. CSS 코드는 화면에 보이는 부분을 꾸며주는 역할을 하기 때문에 개인 블로그 성향에 맞추어 수정하셔서 사용해도 됩니다. 코드 설명을 이해하고 싶으시다면, 제가 참조했던 블로거님 사이트에 상세히 나와있으니 참조하시면 도움이 되실 것입니다.
/* 티스토리 자동목차(TOC)#2 */
#toc * {
font-size: 16px; /* 리스트 글 크기 */
color: #313131; /* 리스트 글 기본 색상 */
}
#toc a:hover {
font-weight: bold; /* 리스트에 마우스오버시 글 굵게하는 설정 */
text-decoration: none; /* 리스트 마우스오버시 밑줄없어짐 */
color: #000000; /* 마우스 오버시 글색생 변경 설정 */
}
#toc ul {
margin-bottom: 0px;
margin-top: 10px;
}
#toc ol {
margin-bottom: 0px;
margin-top: 10px;
}
#toc {
margin-left: 0px; /* 리스트 좌측 간격 설정 */
}
#toc > li {
margin-bottom: 10px; /* 리스트 상하 간격 */
}
#toc > li > ul {
margin-bottom: 10px;
}
#toc > li > ul > li {
margin-bottom: 10px
}
/* 티스토리 자동목차(TOC)#2 끝 */
목차 서식 만들기
목차 서식을 만드는 이유는 블로그 작성 시 미리 작성된 코드를 즐겨 찾기 해놓았다가 바로 불러와서 설정하기 위해서입니다. 애드샌스 광고 서식 만들었다가 붙여 넣는 이유와 동일합니다. 아래 코드를 복사 후 서식을 만들고 저장해 주세요.
<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>
자동목차란 무엇인가요?
자동목차(TOC, Table of Contents)는 웹 페이지나 문서에서 사용자가 콘텐츠의 구조를 파악하고 원하는 정보를 빠르게 찾을 수 있도록 도와주는 목차를 말합니다. 자동목차는 웹 페이지의 제목 요소를 자동으로 인식하여 각 섹션의 링크를 생성하고, 사용자가 목차를 클릭하면 해당 섹션으로 바로 이동할 수 있습니다.
자동목차의 만드는 이유가 무엇일까요?
자동목차를 사용하는 것은 티스토리 초보 블로거에게 많은 의미가 있습니다.
- 콘텐츠 구조화: 긴 글이나 복잡한 내용을 가진 블로그 글도 자동목차를 통해 사용자가 콘텐츠의 구조를 빠르게 파악할 수 있습니다.
- 사용자 편의성: 자동목차를 통해 사용자들은 원하는 정보로 바로 이동할 수 있으므로 편리하게 블로그 글을 읽을 수 있습니다.
- 검색 엔진 최적화(SEO): 검색 엔진은 목차를 활용하여 웹 페이지의 구조를 파악하고 콘텐츠를 인덱싱 합니다. 자동목차를 추가하면 검색 엔진 최적화에 도움이 됩니다.
- 프로페셔널한 블로깅: 자동목차를 추가하면 블로그 글이 보다 전문적이고 질서 있게 보이며, 독자들에게 더 나은 사용자 경험을 제공할 수 있습니다.
즉, 티스토리 초보 블로거들은 이러한 자동목차 사용 방법과 의미를 이해하고 활용함으로써 블로그 글의 가치를 높일 수 있습니다.
마무리하며
#1 스킨과 오가닉 스킨 모두 많이 사용되는 스킨이며, 처음 제가 블로그를 하면서 배우고 적용하고 있는 스킨입니다. 다만, #1은 조금 폐쇄적인 특징을 제가 사용하는 방식에서는 조금씩 발견되고 있습니다. 아마도 제가 실력이 부족해서 일 것 같습니다. 시간이 지나고, 좀 더 능숙해진다면 또 수정할 수 있겠지만, 지금처럼 제가 원하는 내용을 조금씩 업그레이드해 가면서 성장해 가보려고 합니다. 여러분들도 지금도 글 쓰시는데 힘드실 텐데, 힘내시길 바랍니다.
2023.07.05 - [티스토리공부] - SEO 측면 블로그 작성 시 유의, 금지해야 할 사항
2023.07.03 - [티스토리공부] - 티스토리 자체 광고와 애드센스 미노출 원인 분석 하기- 테스트 3차
2023.06.28 - [티스토리공부] - SEO 기초 가이드, 블로그 최적화 방법과 주요 요소
2023.07.18 - [IT Tip] - 맥북 에어 PhotoscapeX 무료 사진 편집 초보 블로거에게 강추
'티스토리공부' 카테고리의 다른 글
| 네이버 애널리틱스 티스토리 연동하여 블로그 유입 분석하기 (4) | 2023.07.27 |
|---|---|
| 티스토리 맨 위로 가기 버튼 만들기 (Home / Top / Bottom) (0) | 2023.07.25 |
| 티스토리 블로그 최적화를 위한 WebP 이미지 활용법! (0) | 2023.07.18 |
| SEO 측면 블로그 작성 시 유의, 금지해야 할 사항 (0) | 2023.07.05 |
| 티스토리 자체 광고와 애드센스 미노출 원인 분석 하기- 테스트 3차 (0) | 2023.07.03 |