고래스킨 자동 목차 만드는 방법

다른 블로그를 보다 보면 목차가 있는 블로그들이 많이 보이더라고요. 그래서 저도 목차를 넣고 싶어서 방법을 찾아봤습니다. 조금 복잡하긴 하지만 지금 사용하는 고래 스킨에 목차 넣는 방법을 알아보겠습니다. 따라 하면 금방 할 수 있습니다. 

 

목차를 넣으면 보기도 좋지만 구글 SEO에 도움도 된다고 하는 분들도 있고 상관없다는 분들도 있는데 그래도 저는 일단 넣어 봤습니다. 일단 좋다고 하는 건 모두 넣어보려고 합니다. 

 

 

1. 파일 업로드

우선 아래 있는 파일을 받고 압축파일을 풀어주세요. 

추가파일.zip
0.00MB

 

파일업로드
파일업로드

파일 압축을 풀면 폴더안에 2개 파일이 있는데요. 블로그 관리 홈에서 왼쪽 메뉴 중에 [스킨 편집]에 들어가서 [html 편집]에 들어가서 오른쪽 위에 파일 업로드에 들어가서 아래 추가를 눌러주세요. 거기에 아까 압축을 풀어준 파일 2개를 업로드해주세요.

 

 

2. html 수정

블로그관리홈에서 [스킨편집] - [html 편집]에 들어가서 2개에 소스를 추가해야 하는데요. 

 

head 수정
head 수정

첫 번째는 위에 그림처럼 소스를 <head> ~ </head> 사이에 넣어주면 됩니다.

head 텍스트.txt
0.00MB

위에 메모장안에 소스가 있습니다.

 

body 추가
body 추가

두 번째는 위에 그림처럼 소스를 <body> ~ </body> 사이에 넣어주세요.

body 소스.txt
0.00MB

소스는 위에 메모장 파일을 받아서 붙어 넣기 해주면 됩니다.

 

 

3. CSS 수정

마지막으로 CSS에 소스만 추가해주면 됩니다.

 

CSS추가
CSS 추가

위에 그림처럼 이 소스를 CSS에 넣어주면 되는데요. 위치는 상관없지만 저는 맨 아래 배치했습니다.

 

CSS 추가.txt
0.00MB

소스는 위에 메모장 파일을 받아서 붙어 넣기 해주세요.

 

목차 안에 스타일을 변경할 수 있는데요. 위에 book-tok ul 밑에 보면 list-style-type: 에 뒷부분을 수정해주면 됩니다.

숫자는 decimal, 네모 모양 square, 동그라미점 disc으로 변경 가능한데 직접 하나씩 변경해보면서 마음에 드는 설정을 사용하세요. (고래스킨 사이트: https://privatenote.tistory.com/250 )

 

 

 

 

  • 네이버 블로그 공유
  • 네이버 밴드 공유
  • 페이스북 공유
  • 카카오스토리 공유