블로그 운영/티스토리

티스토리 목차 , 자동목차 만드는 방법

Oliviamy 2023. 3. 1.

1. 자동목차

티스토리 운영하시면서 글의 목차가 적용되어 있는 티스토리 블로그를 만나 보신 적이 있으실 겁니다. 티스토리에서 목차를 적용하는 이유는 첫 번째로는 사용자의 편의성이라고 이야기하기는 합니다. 하지만, 이보다 중요한 것은 수익형 블로그 운영에서 목차를 삽입하는 이유는 목차가 있으면 SEO측면의 유리함을 가장 우선으로 꼽고 있습니다. 따라서 가급적이면 티스토리 운영 하시면서 목차를 우선 만드시는 것을 추천드립니다.

1.1. 자동목차

티스토리 목차는 TOC(Table of Contents)라고 하는데요. 티스토리의 목차를 자동으로 적용시켜 주시기 위해서는 스킨편집파일과 html코드를 입력해 주어 적용시킬 수 있다고 합니다.

우선 첫째로 웹검색을 통해서 js파일을 다운로드시켜 줍니다. 다운로드한 js 파일에 대해서 티스토리 메뉴에 들어가서 '스킨편집'을 통하여 'html편집' 그리고 '파일 업로드' 항목을 클릭하여서 '적용'을 눌러 적용시켜 줍니다.

화면을 보시면 티스토리 관리자 메뉴에서 - 스킨편집 - HTML편집으로 들어가서 우선 JS파일을 업로드시켜주는 작업을 하는 과정이 되겠습니다.

주의하셔야 할 것은 이렇게 업로드를 하시고 바로 '적용'을 클릭 후에 닿으시면 안 되고 , images/jquery.toc.js 파일에 마우스를 갖다 대시면 음영이 나오고, 이때 마우스 우클릭 통하여 , '링크 주소 복사'를 진행합니다. 링크주소를 복사하여 메모장이나 워드파일에 붙여 넣어 두시고, 추후 서식 생성 시 필요한 정보입니다.

1.2.HTML 목차코드 작성 및 삽입

HTML 목차 코드를 만들어서 , 관리자 메뉴 - 꾸미기 - 스킨편집 - HTML편집으로 들어가서 "./images/jquery.toc.min.js"에 대한 코드를 , 다른 코드를 추가한 경우와 마찬가지로 <head>와 <head> 사이에 삽입해 주고 , 적용을 클릭해 주시면 기본적으로 목차가 들어갈 준비가 완료되는 것입니다. 코드는 <script type="text/javascript" src="./images/jquery.toc.min.js"></script>로 들어갈 수 있습니다. 마지막으로 서식에서 불러와서 사용하실 수 있도록 html 모드로 들어가서 , 목차코드 서식을 미리 만들어 두고, 콘텐츠 작성 시 불러와서 사용하실 수 있습니다.

<div class="txc-textbox"> <script type="text/javascript" src="메모장에 적어 놓은 images/jquery.toc.js 링크 주소"></script> <h2 data-ke-size="size26"><b> 목차 </b></h2> <ul id="toc" style="list-style-type: disc;" data-ke-list-type="disc"></ul> <script type="text/javascript"> $(function(){ $("#toc"). toc( {content: ". tt_article_useless_p_margin", headings: "h1, h3, h4" , top: -90, isBlink : true, blinkColor : '#3669 CF' } ) }); </script>

여기서 "메모장에 적어 놓은 images"의 경우에는 image 파일 업로드한 js파일의 링크주소를 넣어 주시면 됩니다. 이러한 작업은 블로그 관리메뉴에서 - 콘텐츠- 글관리-서식관리에서 입력하시면 되며, 모드는 '기본모드'가 아닌 'HTML'모드로 작성하시고 서식제목을 '목차'로 해서 저장하시면 글을 쓰실 때, 서식에서 불러오기 하여서 사용하실 수 있습니다.

2. 고래스킨 자동목차 만들기

2.1. 자동목차 만들기

기본적으로 jquery.toc.js 파일을 스킨편집에서 html편집을 통해서 "파일업르도"화면에 업로드 시켜 주는 것은 동일합니다.

2.2.HTML 편집

다음으로 html 명령어와 css 영역에 아래의 파일을 다운로드해 줍니다. head 영역에는 <script type="text/javascript" src="./images/jquery.toc.min.js"> </script>로 헤드영역으로 입력이 들어가야 합니다. 다음으로 body 영역에는 아래의 코드를 입력하여야 합니다.

다음으로 CSS 영역에 아래의 코드를 입력하여 줍니다.

/* 자동목차 스타일 */
. book-toc {
  padding : 10px 0 5px;
  border-top : 1.5px solid #000000;
  border-bottom : 1.5px solid #000000;
}
.book-toc p {
  font-weight: bold;
  font-size: 1.3 rem! important;
  color: var(--font-basic-1);
}
#toc {
  margin: 10px 0;
}
#toc * {
  margin-top: 5px;
  font-size: 1.0 rem;
  color:var(--font-basic-1)! important;
}
#toc a {
  font-weight:normal;
  text-decoration:none;
}
#toc a:hover {
  font-weight:bold;
}
#toc > li {
  margin-left: 0px;
  list-style-type: none! important;
}
#toc > li > a {
  font-weight:bold;
  color : #000000! important;
}
#toc > li > ul {
  margin-left: 0px;
}
#toc > li > ul > li {
  list-style-type: none! important;
}
#toc > li > ul > li > a {

}
#toc > li > ul > li > ul {

}
#toc > li > ul > li > ul > li {

}
#toc > li > ul > li > ul > li > a {

}

3. 자동 서식 등록

3.1. 서식관리 - 자동목차 양식

이제는 관리자 메뉴에 들어가셔서 '서식관리'에서 목차 관련 서식을 하나 만들어 저장하셔서 사용하시면 되겠습니다. 코드는 아래와 같습니다.

<div class=book-toc">
<p data-ke-size="size16"> 목차 </p>
<ul id="toc" style="list-style-type: disc;" data-ke-list-type="disc></ul>
</div> 이렇게 등록하시면 됩니다.

4. 마지막 방법

4.1. 이도 저도 잘 모르겠다면

일반적으로 html에서 수동으로 목차에 대한 링크를 넣어 두면 복잡하지 않게 각 목차와 목차내용으로 링크로 연결되게 됩니다. 각 목차의 내용에는 <a href="1"> 1. 단락제목 </a> <a href="1"> 2. 단락제목 </a> 목차 단락제목을 클릭하면 , 바로 그 해당내용으로 넘어가게 됩니다. 그곳에서 링크를 받아야 하니까 , 받는 곳의 html <id="1"> 두 번째 링크는 <id="2"> 이렇게 받습니다. 이렇게 작업을 서식에서 해두시는 방법도 있습니다.

이밖에도 블로그 관련 정보가 궁금하시다면 아래글을 참고해 보시기 바랍니다.

[블로그 운영/블로그 고급설정] - 백링크 설정 nofollow 와 follow 개념 및 블로그 적용법

백링크 설정 nofollow 와 follow 개념 및 블로그 적용법

앞서 백링크 설정 개념 및 이해 nofollow와 dofollow의 뜻, 그리고 관련된 외부링크와 내부링크, 좋은 백링크 만드는 법과 내 사이트에서 백링크 확인하는 방법까지 알아 보았습니다. 여기서는 추가

knowledge.cat-dreaminvestment.com

[블로그 운영/티스토리] - 티스토리 메뉴설정 - 블로그 주소 설정 방법 어떻게 해야할까?

티스토리 메뉴설정 - 블로그 주소 설정 방법 어떻게 해야할까?

티스토리 블로그 주소설정 방법에 대해서 한번 이야기해 보겠습니다. 블로그 주소설정은 크게 두 가지로 나누어집니다. 대다수 기본적으로 세팅되어 운영되는 것이 바로 콘텐츠 발행글 번호로

knowledge.cat-dreaminvestment.com

[블로그 운영/블로그 고급설정] - 티스토리 고수익 전략 , 버튼 및 다운로드 클릭바 만들어 보자

티스토리 고수익 전략 , 버튼 및 다운로드 클릭바 만들어 보자

티스토리 고수익 전략으로 버튼 만들기 이외 여러 가지가 있을 수 있습니다. SEO 로 검색엔진 최적화 및 링크설정 방법으로 전면광고 확률 높이기 , 이미지 CDN사용으로 블로그 속도 높이기로 최

knowledge.cat-dreaminvestment.com

저작자표시 비영리 변경금지

'블로그 운영 > 티스토리' 카테고리의 다른 글

티스토리 스킨선택 등록 방법_ 2.블로그 기본세팅 (0)	2023.03.21
티스토리 개설 방법 간단히 따라하자 - 1.개설하기 (0)	2023.03.19
구글 애널리틱스 가입 및 티스토리 연동 , 왜 해야할까? (0)	2023.03.11
블로그 카테고리 선정방법 , 수익성 높은 주제와 카테고리는? (0)	2023.03.03
티스토리 사이드바 광고 , 멀티플렉스 광고 적용방법 (0)	2023.03.01
블로그 사진 webp , 웹피로 제작하면 장점이 많을까? (0)	2023.03.01
블로그 상위노출 방법 , 구글과 네이버 어떻게 공략? (0)	2023.03.01
블로그 상위노출 위한 운영기간은? 1분 블로그 지식백과 (0)	2023.02.28

티스토리 목차 , 자동목차 만드는 방법