목차
티스토리 블로그 글을 쓰면서 한 번쯤은 목차(TOC)가 있으면 좋다는 소리를 들으셨을 겁니다. 저도 그래서 목차를 만들어 보려고 하다가 많은 HTML 편집이 눈에 아른거려 못 하고 있다가 드디어 성공했습니다. HTML 이해 없이 따라 할 수 있도록 정리해 봤습니다. 스킨은 "북클럽" 기준입니다.
1. 파일 다운로드 하기
따라 하기 좋게 소스 파일을 만들어 봤습니다. 일단 다운로드를 하시고 압축을 풀어주세요 파일이 두개 있습니다.
1) 소스코드.txt 파일
목차를 만들는데 필요한 코드를 모아 두었습니다. 그대로 스킨에 복사해서 놓여 놓으면 됩니다..
2) jquery.toc.min.js
티스토리 스킨 편집에 CSS를 위해 티스토리에 업로드할 파일입니다.
2. 목차 만들기
1) HTML 갖다 붙이기
i) "소스코드.txt" 파일을 클릭하여 여시고 1번에 있는 HTML 소스를 복사하신 후, 티스토리의 "블로그 관리 > 스킨편집 > HTML 편집" 으로 이동합니다.
ii) HTML 화면에서 "control+f" 또는 맥북에서는 "command+f" 를 눌러 주시고, "</body>"를 검색합니다.
iii) "</body>"가 나오면 바로 위해 복사한 소스 코드를 붙여주시면 됩니다.
iv) 우측 상단 "저장"을 누릅니다.
2) 서식 작성하기
i) 위에 코드를 사용하기 위해서는 서식을 사용합니다.
ii) "블로그 관리 > 콘텐츠 > 서식 관리" 로 가셔서 우측 상단에 "서식쓰기" 를 누릅니다.
iii) 문서 작성 화면에서 우측 상단에 "기본모드"를 "HTML" 모드로 변경하고 코드를 집어넣습니다. 서식 코드 앞에 "소스코드.txt" 파일의 두 번째에 있습니다. 복사한 후 붙여 넣으시면 됩니다.
iv) 우측 하단 "완료"를 누릅니다.
4. 목차 확인하기
1) 여기까지가 기본적인 목차 만들기입니다. 코드 두 번만 복사 & 붙이기 하면 만들어집니다. 다음은 차례는 스타일을 넣는 단계인데, 코드에 자신이 없다고 생각하시거나, 지저분해지는 게 싫다고 생각하시면 더 이상 진행을 하시지 않아도 됩니다.
2) 목차를 만들고 싶은 곳에 우측 더보기(···)를 눌러 "서식"을 눌러서 목차 입력을 눌러 줍니다. 보통은 글 쓰기전 가장 위 줄에 서식을 넣으면 포스팅 후 목차를 제일 먼저 볼 수 있습니다.
3) 화면에는 "목차" 단어만 생성되지만, "미리보기" 를 확인하시면 "목차" 자리에 목차가 생성된 것을 확인할 수 있습니다.
5. 목차과 광고 같이 보기
목차를 사용하는 글을 모바일이 아닌 넓은 화면에서 보게 될 경우, 목차 옆으로 많은 빈공간이 남는 것을 볼 수 있습니다. 모바일에서는 보기는 문제가 없는데, 넓은 화면에서는 좀 심심합니다. 때문에, 목차 옆 오른쪽 여백에 광고를 추가해 봤습니다. 모바일에서는 자동으로 목차 아래로 내려가서 따로 상단 광고를 넣을 필요는 없습니다.
티스토리 목차와 우측 상단 애드센스 광고 동시 보기
목차 티스토리 목차 글 두 번째 글입니다. 티스토리 목차를 사용하다 보면, 모바일에서는 보기에 문제가 없는데, 데스크톱에서 보기에는 보기가가 좀 민망할 때가 있습니다. 왼쪽에 목차가 뜨면
nodigitalmad.tistory.com
6. 목차, 제목 스타일 넣기 (옵션)
1) 코드 복사해서 붙이기
스타일 역시 한 번만 붙여 넣으면 간단히 될 수 있습니다.
i) "소스코드.txt" 에서 3번. CSS에서 "3. CSS" 밑에서부터 끝까지 복사를 합니다.
ii) "블로그 관리 > 스킨 편집 > HTML 편집"으로 가서 "CSS"를 클릭합니다.
iii) "CSS" 코드의 맨 밑의 빈 줄에 복사한 것을 붙입니다.
iv) 우측 상단 "저장"을 누릅니다.
2) CSS 디자인 수정하기
- CSS 에서 디자인 색상과 글꼴, 글자 크기 등 을 수정할 수 있습니다. 그러나, 익숙하지 않다면, 권해드리지 않습니다.
- CSS 에 대한 공부가 조금 필요합니다.
- 만약에 수정을 하시더라고, 기본값을 꼭 저장하시거나, 기억하시는 것이 좋습니다.
7. 제목 스타일 색상 고르기 (옵션)
위에 목차와 제목에 스타일 위해 CSS를 삽입하셨다면, 제목에 생기는 스타일을 수정하시고 싶을 겁니다. 많은 분들이 같은 코드를 사용하고 있어서 다른 웹사이트에서 똑같은 색상의 스타일을 본다면 좀 식상할 수 있습니다. 초보라 디자인 전체를 바꿀 수 는 없어도 색상을 바꾸는 것은 쉽게 할 수 있습니다.
1) 색상 고르기 - 컬러 툴 사용하기 (바로가기)
아래 컬러 툴 사이트에 가시면 다양한 색상을 고르실 수 있습니다. 마음에 드는 한 색상을 고르면, 그 색상과 같이 디자인적으로 사용하기 좋은 색깔을 두 개 더 골라 주고, 그 색깔들의 코드를 확인할 수 있습니다.(A.)
2) 제목 스타일 색상 변경하기
박스 A와 같이 색상을 선택을 했으면, CSS를 변경해 줍니다. 보통 진한 순서에서 밝은 순서로 나가는 것이 디자인 적으로 좋습니다.
"블로그 관리 > 스킨 편집 > HTML 편집"에서 CSS에서 아래의 "글 제목 1,23, 스타일"을 찾으셔서, 밑줄 친 색상 코드들을 위에서 선택한 색상 코드들로 바꾸면, 원하시는 스타일 색상으로 제목 스타일을 보실 수 있습니다.
애드센스 수익률 향상을 위한 티스토리 스킨 최적화 설정 8가지
애드센스 수익률 향상을 위한 티스토리 스킨 최적화 설정 8가지
목차 티스토리 블로그는 애드센스를 지원하지만, 애드센스를 위한 최적화된 스킨을 지원을 하지는 않습니다. 블로그를 하다 보면 조금씩 불만족스러운 부분이 나타나는 그때마다 공부를 해서
nodigitalmad.tistory.com
티스토리 태그와 카테고리, 메뉴, 구글 서치콘솔에서 보기
티스토리 태그와 카테고리, 메뉴, 구글 서치콘솔에서 보기
목차 티스토리를 블로그를 하다보면 태그도 있고, 카테고리, 메뉴가 있는데, 검색 노출을 목적으로 하다 보니 그다지 신경을 쓰지 않고 있습니다. 그러다가 블로그가 커지고 자리가 잡혀가면서
nodigitalmad.tistory.com
[디지털노마드] 애드고시, 애드센스 승인 보다 어려운 것은?
[디지털노마드] 애드고시, 애드센스 승인 보다 어려운 것은?
3번째 애드센스 승인을 받기까지, 애드센스 승인만이 목표였기 때문에 모든 것을 애드센스 승인에 맞춰놨었다. 그리고, 첫 번째 받고, 두 번째 받고, 세 번째 받을 때 깨달은 것은 애드센스 승인
nodigitalmad.tistory.com
네이버 페이 포인트 혜택 모아서 스타벅스 커피 마시기.
네이버 페이 포인트 혜택 모아서 스타벅스 커피 마시기.
애드포스트나 애드센스를 하면서 크게 배우게 된 것 중 하나는 티끌모아 태산이라는 점입니다. 블로그 방문자 한분 한분 소중하고, 애드센스 광고 노출에서 오는 0.01 달러도 몹시 소중하다는 점
nodigitalmad.tistory.com
도움말)
댓글