목차
티스토리 블로그에 이렇게 자동으로 목차를 만들어 주는 방법이 궁금하신가요?
애드센스 블로그를 쉽게 설명해주는 온마정에서 자동으로 목차 만들 수 있는 가이드를 설명드리겠습니다.
온마정이 알려주는 티스토리 목차 서식 만드는 방법 가보실까요?
1. 무료 jquery.toc파일 미리 다운로드 받기
위 파일을 클릭해서 jquery.toc.zip파일을 다운로드하세요.
파일을 다운 받고 압축파일을 푸시면 됩니다.
이렇게 파일 2개가 뜨는 걸 확인하면 준비 완료입니다!
2. 관리 - 스킨 편집 - html 편집 클릭
관리에 들어가서 '꾸미기' - '스킨 편집'을 클릭해줍니다.
오른쪽 상단에 있는 'html 편집' 버튼을 눌러줍니다.
3. jquery.toc 파일 업로드
1) 파일 업로드 탭을 클릭합니다
2) 하단에 있는 '+추가' 버튼을 클릭합니다.
3) 파일탐색기가 열립니다.
아까 다운 받았던 파일 2개를 모두 선택하고 '열기' 버튼을 눌러줍니다.
이렇게 업로드 되면 잘하고 계신겁니다.
4) jquery.toc.js 링크 복사하기
그리고 2개 중에서 images/jquery.toc.js라는 파일을 클릭 후 오른쪽 마우스를 누릅니다.
마우스 우클릭하면 링크 주소 복사를 클릭하면 복사가 되겠죠?
이걸 메모장에 따로 저장해둡니다. 나중에 서식을 만들 때 사용될 예정이니 기억해두세요.
4. HTML 코드 적용하기
HTML 코드를 적어둔 메모장 파일입니다. 이걸 다운로드 합니다.
다운 받은 HTML 코드 메모장을 열고 전체 복사를 합니다.
HTML 탭에 들어가면 가장 맨 첫 부분인 <head> </head> 코드가 보이시지요?
</head> 바로 윗부분에 붙여넣기로 넣어 줍니다.
그리고 저장해줍니다. 적용 버튼을 눌러주면 저장이 됩니다.
5. 디자인 입히기 CSS 코드
이제 디자인을 넣어줄 차례입니다.
디자인 관련된 코드는 CSS탭에서 진행합니다.
그럼 아래 CSS 코드를 적어둔 메모장 파일을 다운로드 하고 복사를 해줍니다.
메모장 다운을 받았으면 전체 Ctrl+A 누르고 Ctrl + C 눌러서 복사해줍니다.
그리고 CSS 탭에 들어가줍니다.
CSS 탭에서 스크롤 해서 가장 맨 밑으로 내려서 가장 하단에 붙여넣기(Ctrl+V)를 해줍니다.
마지막으로 가장 중요한 적용 버튼 꼭 눌러주세요!
6. 서식 만들기
다른 서식 만들기 가이드를 살펴보면 서식으로 만들지 않고 자동으로 목차가 생길 수 있도록 세팅을 하는 경우가 많습니다. 하지만 저는 일부러 서식으로 만들어서 목차를 만들고 싶을 때 선택해서 쓸 수 있도록 일부러 서식으로 만들어서 목차를 사용하려고 합니다.
그러면 목차가 필요 없는 경우에는 편하게 일반 포스팅을 적을 수 있답니다.
준비물은 서식에 넣을 HTML 코드인데 마찬가지로 메모장 파일을 다운 받아 줍니다.
그럼 서식을 한번 만들어 볼까요?
1) 관리 - 서식 관리
서식 관리에 들어갑니다
2) 서식 쓰기 Clik
3) 제목 적기 (목차 관련 서식이라는 걸 알아볼 수 있도록)
왠만하면 목차 관련 서식이라는걸 쉽게 알아볼 수 있도록 제목을 적습니다.
그리고 오른쪽 상단에 '기본모드'라고 적힌 부분을 클릭해보면 HTML 모드로 바꿀 수 있습니다.
4) HTML 코드 넣기
아까 메모장으로 다운 받은 HTML 서식 입력 코드와
3-4 순서로 초반에 메모장에 "링크 주소 복사"한걸 메모장에 적어두라는 것 기억하시지요?
혹시 잊어버리셨어도 다시 스킨편집 들어가셔서 링크 주소를 복사하시면 됩니다.
5) HTML 서식 입력코드
HTML 서식 입력코드 메모장에 보시면 jquery.toc.js 링크 주소 라는 글자 부분에 링크 주소 복사한 티스토리 url 주소를 그대로 붙여넣기 해주시면 됩니다.
당연히 "메모장에 적어둔 jquery.toc.js 링크 주소" 라는 글자는 지워야 합니다.
큰 따옴표는 그대로 나둡니다.
6) 그리고 나서 완성된 서식 입력 코드를 전체 복사해줍니다.
7) 붙여넣기
8) 완료 버튼
그리고 완료를 누르면 목차 서식 만들기 완료입니다!
수고하셨습니다.
테스트로 글을 쓰시고 제대로 잘 작동하는지 확인해보시면 됩니다.
추가1) 목차에 들어가는 소제목 H2, H3, H4 중 대제목만 쓰고 싶다면?
HTML 서식 코드를 보시면 h2, h3, h4 가 보이시죠?
목차에 보이는 소제목들의 순서입니다.
h2 = 제목1, h3 = 제목2, h4 = 제목3 입니다.
h2(제목1)
만 목차에 자동으로 들어가게 하고 싶다면 코드에서 h3,h4를 지우면 됩니다.저는 큰 제목만 들어가게 하고 싶어서 지운 상태입니다! 이 부분은 취향껏 선택해주시면 됩니다.
추가2) 박스 디자인을 바꾸고 싶다면?
디자인은 CSS 코드를 바꿔서 입력하시면 됩니다.
원하시는 디자인을 따로 있으시면 저처럼 제미나이를 이용하는 방법이 있습니다.
1. 제미나이 사이트에 들어갑니다. (무료)
제미나이 사이트에 들어가서 프롬포트를 입력합니다.
그리고 자신의 취향껏 원하는 박스의 디자인을 말하시면 됩니다.
제가 사용했던 프롬포트는 이거입니다.
내가 초등학생이라고 생각하고 초등학생에게 설명하듯이 차근차근 쉬운 용어로 설명을 해줘.
1. 나는 jQuery 플러그인 (toc.js 등) 사용 방법으로 티스토리 블로그에서 목차 서식을 만들었어.
2. 나는 디자인이 마음에 들지 않는데, 디자인 바꾸는 CSS 코드를 알려줘.
3. 박스 배경 색깔을 약간 회색빛이 도는 연하늘색(#E0E5EA)으로 바꾸고 싶어.
4. 박스 내 "목차"라는 글자를 약간 크게 바꾸고 싶어.
5. 박스 목차들(소제목)의 글자크기를 크게 바꾸고 싶어.
6. 글자를 클릭하면 글자색깔이 파란색으로 바뀌게 해줘.
7. 지금 현재 나의 CSS 코드는 이 상태야. (CSS 메모장에 있는 코드를 복사해서 붙여넣기)
제가 쓴 프롬포트를 복사해서 개인 취향에 맞게 변형해서 써보세요!
저는 제미나이에서 쓰이는 채팅 박스 배경색이 마음에 들어서 캡쳐해서 보내주었더니 알아서 색깔을 분석해서 CSS코드를 만들어 주었습니다.
그러면 클릭을 한 후 아까 CSS 탭의 가장 맨 아래 하단에 넣었던 코드를 지우고 새로 붙여넣기 해줍니다.
그러면 지금 저처럼 목차 디자인이 바뀌게 됩니다!
박스에 그림자를 만들고 싶으시면 프롬포트에 '박스 그림자를 만들어줘'라고 입력하면 되겠죠?
이상 온마정이었습니다.
