[수익형 블로그 만들기] 8탄 티스토리 목차 만들기, 목차 생성

 

티스토리 목차 만들기, 목차 생성

안녕하세요. 수익형 블로그를 만들면서 도움이 되는 정보들을 기록하고 공유하는 페이지를 만들고자 틈이 날때마다 글을 작성하고있습니다.

 

오늘은 간단한 작업으로 티스토리 글을 작성시 목차를 만들어서 포스팅 글을 편하게 볼수 있고, 깔끔하게 볼수 있도록 목차를 만들어 보겠습니다.

 

이 글을 읽고나면 여러분은 아주 손쉽게 목차를 만들수 있습니다.

목차를 만들게 되면 아래의 사진처럼 목차가 생성되니 한번 따라해보겠습니다.

티스토리 목차 만들기, 목차 생성

 

목차란?

목차는 책이나 서류 따위에서 항목 제목과 해당 쪽 번호를 차례대로 적은 목록으로, 그 내용을 간략하게 알거나, 쉽게 찾아 볼 수 있게 한 것입니다.

 

목차를 만드는 방법

 

1. 티스토리 관리자 페이지로 이동을 해줍니다. 이동을 한뒤 스킨편집에 들어가줍니다.

티스토리 목차 만들기, 목차 생성

 

2. 스킨편집에서 html 편집을 클릭해줍니다.

티스토리 목차 만들기, 목차 생성

 

3. 스킨편집을 클릭해준뒤 파일업로드 창으로 이동합니다.

이동을 한뒤 추가 버튼을 클릭해줍니다.

 

티스토리 목차 만들기, 목차 생성

 

4. 추가 버튼을 한뒤 아래의 파일을 압축해제한뒤 .js 파일 두개를 넣어줍니다.

넣어준뒤 적용을 클릭해줍니다.

 

jquery.toc.zip

0.00MB

 

 

 

5. html 코드를 수정하는곳을 돌아와서 아래의 코드를 </head> 바로 위에 넣어줍니다.

<!--  목차 커스텀 스크립트 시작-->

<script type="text/javascript" src="./images/jquery.toc.min.js"></script>

<!--  목차 커스텀 스크립트 끝 -->

head 부분 코드.txt

0.00MB

 

티스토리 목차 만들기, 목차 생성

 

6. 다음으로는 </body> 바로 위에 아래의 코드를 넣어줍니다. 그후에 적용을 클릭해줍니다.

 

 

<!--  목차 커스텀 스크립트 시작-->

<script type="text/javascript">

$(function(){

$("#toc").toc( {content: ".entry-content", headings: "h3,h2", top: -90, isBlink : true, blinkColor : '#21B9DE' } )

});

</script>

<!--  목차 커스텀 스크립트 끝-->

 

body 부분 코드.txt

0.00MB

 

티스토리 목차 만들기, 목차 생성

 

 

7. 그 다음으로 CSS로 들어간뒤 아래의 사진처럼 코드 맨 아래에 넣어줍니다.

복붙하기 편하게 파일안에 넣어놨습니다.

코드로 보실분은 코드로 보셔도 됩니다.

CSS코드.txt

0.00MB

/* 티스토리 북클럽 스킨 목차 - TOC */

.book-toc {

border: 1px solid #ccc;

padding: 10px 10px 0px 15px;

background-color: #f5f5f5;

}

.book-toc ul {

list-style-type: decimal;

}

.book-toc p {

font-weight: 550;

margin-bottom: 7px;

}

#toc * {

font-size: 17px;

color: #676767;

}

#toc a:hover {

color: #f00;

}

#toc ul {

margin-bottom: 0px;

margin-top: 5px;

}

#toc > li {

margin-bottom: 15px;

}

#toc {

margin-left: 10px;

}

#toc > li > ul li {

margin-bottom: 5px !important;

}

티스토리 목차 만들기, 목차 생성

 

8. 적용을 클릭해준뒤 관리자페이지로 돌아옵니다.

티스토리 목차 만들기, 목차 생성

 

9. 서식관리를 클릭해준뒤 새서식 쓰기를 클릭해줍니다.

티스토리 목차 만들기, 목차 생성

 

 

10. HTML모드로 들어가줍니다.

 

11. 아래와 같이 입력을 해줍니다.

 

티스토리 목차 만들기, 목차 생성

12. 기본모드로 돌아오면 아래사진처럼 보이게 됩니다. 제목을 취향것 정한뒤 완료를 클릭하여 저장해줍니다.

 

티스토리 목차 만들기, 목차 생성

13. 이제 적용이 잘 되었는지 확인해보겠습니다.

포스팅을 아래처럼 작성해봅니다.

 

 

 

14. 그 후에 서식을 클릭해줍니다.

티스토리 목차 만들기, 목차 생성

 

15. 방금 만든 서식을 확인 한뒤 클릭을 해줍니다.

티스토리 목차 만들기, 목차 생성

 

 

16. 그러면 아래의 사진처럼 작성이 되고 완료를 클릭합니다.

티스토리 목차 만들기, 목차 생성

 

17. 저장한 후에 글을 확인하게 되면 아래의 그림처럼 목차가 생긴것을 확인할 수 있습니다.

'돈을 아주 많이 벌자1'이 보라색인 이유는 제목에 옵션을 준건데 CSS 스타일을 조정한 것입니다.

아래의 링크를 통해서 제목에 디자인(디자인 종류 10가지)을 입힐 수 있습니다.

티스토리 목차 만들기, 목차 생성

 

티스토리 블로그 제목 디자인 변경하기.

[수익형 블로그 만들기]7탄 티스토리 제목 꾸미기 및 디자인 변경하기~! 효과 주기~!

[수익형 블로그 만들기]7탄 티스토리 제목 꾸미기 및 디자인 변경하기~! 효과 주기~!