티스토리 자동목차 사용 방법

티스토리 자동목차 사용 방법에 대해 정리해 보도록 하겠습니다. 티스토리 블로그로 발행한 글들을 보면 목차가 표시된 글들을 보실 수 있습니다. 물론 제가 발행하는 글들도, 첫 글을 제외하면 모두 목차가 포함되어 있습니다.

 

목차

티스토리 로고

 

티스토리 자동목차 스킨편집 방법

티스토리 자동목차는 html 파일과 css를 직접 수정하여야 하기 때문에 아래에서 설명하는 방법대로 따라 해 주시기 바랍니다.

티스토리 HTML 수정

티스토리 주소로 가신 후 로그인이 된 상태라면, 아래와 같은 화면이 나올 텐데요. 여기에서 관리 메뉴를 선택해 주세요.

티스토리 관리 메뉴

 

아래와 같이 메뉴가 나오면, 꾸미기에서 스킨편집 메뉴를 선택합니다.

 

티스토리 스킨 편집

 

우측 상단에 있는 html 편집을 눌러 주세요. 경고 문구가 나오면 확인 버튼을 선택합니다.

 

티스토리 html 편집

 

아래의 파일을 다운로드하여서, /head 위에 삽입해 주시기 바랍니다. 정확한 위치는 아래의 그림 중 오른쪽 상단의 빨간색 박스를 참조해 주세요.

 

head 위.txt

0.00MB

 

 

 

아래의 파일을 다시 다운로드하신 후에, 해드 아래 있는 <s_t3> 위에 삽입해 주시기 바랍니다. 정확한 위치는, 아래의 그림 중, 우측 하단의 빨간색 박스를 참조해 주시기 바랍니다.

 

body 아래.txt

0.00MB

 

 

 

아래와 같이 두 개의 파일을 삽입하셨다면, 우측 상단의 적용 버튼을 눌러서 수정된 html 파일을 저장합니다.

 

티스토리 html 수정

 

이제 html 파일 수정이 끝이 났으니, 바로 옆에 있는 css 파일을 수정해 보도록 하겠습니다.

 

티스토리 css 수정

html 수정을 마쳤으면, 아래의 그림처럼 CSS 메뉴를 눌러 주신 후에, 제일 아래까지 스크롤을 해서 내려주세요. 아무것도 손대지 않은 순정 상태의 북클럽 css 파일이라면 아마 4630번째 라인이 마지막 라인 일건대, 이 끝부분에 아래의 파일을 다운로드하여서, 삽입을 해주시기 바랍니다.

 

css 끝.txt

0.00MB

 

css 수정

 

아래의 그림처럼, 4630번째 라인이 CSS의 끝인데, 그 아래 부분에 다운로드한 파일을 카피하여 붙여 넣기 방식으로 삽입을 해주신 후에, 우측 상단의 적용 버튼을 눌러 주세요.

 

티스토리 CSS 파일 수정

 

html과 css 수정을 무사히 마쳤다면, 이제 파일 업로드를 해주어야 합니다.

 

티스토리 파일 업로드

먼저 아래의 두 개의 파일을 본인의 컴퓨터의 같은 디렉터리에 다운로드해 주세요.

 

jquery.toc.js

0.00MB

jquery.toc.min.js

0.00MB

 

 

 

위의 두 개의 파일을 다운로드하셨다면, 이제 다시 티스토리 편집 화면으로 돌아와서 파일 업로드를 눌러 주시고, 아래 화면에 있는 +추가 버튼을 눌러 주세요.

 

티스토리 파일 추가

 

추가 버튼을 누르신 후에, 탐색기가 열리면, 위에서 다운로드해 두었던 두 개의 파일을 선택해 주세요.

 

파일선택

 

두 개의 파일을 선택하면, 자동으로 티스토리에 업로드되며, 아래와 같은 화면을 보실 수 있습니다. 이렇게 하면, 모든 작업은 완료되었고, 이제 자동목차를 쓸 수 있습니다.

 

티스토리 파일추가

 

티스토리 자동목차 사용 방법

아래의 파일을 특정 디렉터리에 일단 다운로드하여 주시기 바랍니다.

자동목차 html.txt

0.00MB

 

 

 

 

이제 티스토리 글쓰기 화면으로 돌아와서 설명을 계속해보도록 하겠습니다. 글을 쓰다가 상단에 목록을 만들고자 한다면, html 편집 모드로 들어가 주어야 합니다. 아래의 그림을 참고해 주세요.

티스토리 html 모드 변경

 

위의 화면처럼 글을 쓰다, 기본모드를 눌러 html을 선택해 주면 아래의 화면이 나오는데, 확인 버튼을 눌러 주세요.

 

티스토리 html 수정모드

 

이제 아래와 같이 편집기가 html 모드로 바뀌어 보이게 되는데, 뭐 복잡해 보여도 처음에만 그렇지 나중에는 익숙해져야 할 화면입니다.

 

위에서 다운로드한 파일을 열어보면, 아래의 빨간 박스처럼 5줄의 텍스트 파일이 있는데, 이 부분을 글 상단에 붙여 넣기를 통해 삽입을 해주세요.

 

html 편집 모드

 

이제 다시 우측 상단의 html 모드를 눌러 기본모드로 변경하신 후에, 화면 좌측 하단에 있는 미리 보기 화면을 클릭해 보세요.

 

티스토리 미리보기

 

아까 글을 쓰다가 자동목차 html을 삽입한 부분이 아래처럼 목차가 나타난 것을 보실 수 있습니다.

 

 

참고로, 자동목차 들어가는 내용은, 아래의 그림에서처럼 글씨크기가 제목 1, 제목 2, 제목 3의 크기로 쓴 제목 부분의 글만 목록으로 추가가 되는 것이니 글을 쓸 때 참고 해보시기 바랍니다.

 

티스토리 글씨크기

 

조금 복잡한 감이 있지만 위에서부터 차례대로 따라서 해보시면 쉽게 따라 해 볼 수 있으리라 생각됩니다. 다음 글은, 위의 자동목차를 이용해 서식으로 저장을 하여 편리하게 글을 쓸 수 있도록 하겠습니다.

 

추천글

[컴퓨터 IT] - 도메인 구매 및 설정, 티스토리에 연결하는 방법 (호스팅케이알 기준)

도메인 구매 및 설정, 티스토리에 연결하는 방법 (호스팅케이알 기준)

 

[컴퓨터 IT] - 티스토리 블로그 사진 넣는 방법 (무료 사진, 화면 캡처 프로그램)

티스토리 블로그 사진 넣는 방법 (무료 사진, 화면 캡처 프로그램)

 

[컴퓨터 IT] - 알캡처 다운로드 및 알캡처 설정 방법

알캡처 다운로드 및 알캡처 설정 방법