애드승인을 받기위해 글을 쓰고 기다리면서 다른 블로그의 글을 보다가 눈에 띈건 목차였다. 엇 저건 어떻게 넣는거지 블로그 자체 기능은 아닌거 같고 검색을 해보았다. 구글에 검색해서 나온 글들을 다 따라했지만 여러번 실패 끝에 드디어 성공하고 또 까먹을 까봐 정리하는 차원에서 tip을 공유하고자 한다. 그냥 따라하면 목차 생성 됩니다. 무조건 혹여나, 실패하신 분들을 위해 자동 목차는 아니지만 소제목 정도는 꾸며줄수 있는 html코드도 공유해 드리겠다. 제목만 꾸미시고 싶으신 분은 코드를 받아서 글쓰기에 html모드에서 복사 붙여넣기 하면 끝
목차
티스토리 자동목차 만드는 방법
1. js 파일 업로드
아래 알집 파일이 혹시 손상 되었다면 위 노란 이미지 카드에서 최신버전을 다운 받을 수 있다.
티스토리 관리자 화면 > 꾸미기>스킨편집>html편집 >파일 업로드
다운로드 받은 파일을 압축을 풀어서 위의 경로로 업로드 해준다. 압축을 풀면 아래의 이미지 처럼 두개의 파일이 나온다.
스킨편집> html편집을 누르고 아래 이미지 대로 따라하면된다.
그냥 파일을 업로드 하기만 하면 된다. 마지막엔 적용버튼 꼭 눌러주자.
2. html 코드 붙여넣기 head 코드와 body 코드
html 편집 화면에서 아래코드를 각각 붙여 넣으면 된다.
헤드코드는 <head>...</head> 바디코드는 <body>....</body>사이에 붙여넣기 (command+v) 하면 되는데 찾지 못하면 찾기 단축키 command+f 를 써서 찾으면 된다 경험상 head 는 위쪽에 있고 body 제일 아래 쪽에 있었다.
head코드
<script src="./images/jquery.toc.min.js"></script>body코드
<script>
$(document).ready(function() {
var $toc = $("#toc");
$toc.toc({content: ".tt_article_useless_p_margin", headings: "h2,h3,h4"});
});
</script>
</body>설명은 이미지를 참고 하면 좋겠다.
tip 못찾겠으면 이미지 보면 옆에 숫자 보이는가? 똑같진 않겠지만 근처 숫자로 가서 찾아서 붙여넣기 하면된다.
3. 목차 서식저장하기
자동목차를 넣는 과정은 끝이 났다 이제 글을 쓸때 원하는 위치에 자동으로 만들어주는 코드를 넣는데 매번 코드를 복사 붙여 넣기 할 수 없으니 서식으로 만들어서 필요할때 필요한 부분에 목차를 넣으려면 서식으로 저장해놓고 불러오는 것이 좋다. 그래서 서식으로 저장하는 것이다. 겁먹지말고 따라해보자 일단 아래의 코드를 복사 커트롤+c 하고
<div class="index_toc">
<p>목차</p>
<ul id="toc" style="list-style-type: disc;" data-ke-list-type="disc"></ul>
</div>서식관리 > 서식쓰기에서 html 편집화면을 누르고 ( 엇? 왜 낯익은 글쓰기 화면이 나왔지? 하면서 잘못됬다고 생각하지말자 제대로 하고있으니까 )
html 편집화면에서 아까 복사 (커트롤+c)해둔 코드를 붙여넣기 (커트롤 +v) 하고 제목에 원하는 제목을 쓰고 발행을 바로 누르자.
4. 목차 꾸미기
그냥 넣게 되면 목차의 구분이 안되서 색상과 네모 박스 정도는 넣어주면 좋다. 나중에 실력이 향샹되면 색상과 모양을 바꿔보자
아래 첨부파일의 코드를 스킨편집 > css 에 젤 아래 부분에 복사 붙여 넣기 하면 인덱스 박스가 생긴다
5. 자동 목차 생성 확인
글쓰기에 들어가서 h2, h3, h4 태그로 글을 쓰고 미리보기로 확인해보자. 그냥 글쓰기 페이지에서는 목차랑 꾸며놓은 제목들이 안 나오니
안 나온다고해서 잘못된거 아니니 안심하고 미리보기로 확인해보도록!! 아래 사진의 설명을 꼭 참고 하도록 하자 내가 정말 실수해서 여러번 실패했다고 생각했던 부분이다. 목차랑 제목 꾸민게 안나오니 여러번 포기했었다. 미리보기해야지 나온다.
6. 제목 색상 바꾸는 색상 코드
위의 코드로 사용하다가 색상을 바꾸고싶거나 바꿀 용기가 생긴다면 도전해보길 각 색상의 코드가 있다. 그 코드를 내가 공유한 코드중에 바꾸고 싶은 색상코드로 변경하면된다 스킨편집 >css 에서 제목 색상 부분을 만지면된다 미리 메모장에 저장해두었다가 수정하는 것을 권장한다.
구글 seo 최적화의 신경써서 구글에 더 노출되는 글쓰기를 위해 화이팅 !
이밖에 글쓰기에 도움 되는 자료들은 아래 포스팅 참고
수익화 블로그 글 작성에 무조건 도움되는 사이트 tip
블로그를 작성하려고 보면 막히는 경우가 많다. 사진이 없거나 어떻게 글을 써야 할지 막막하거나 옛날 같으면 일일이 도서관에서 사전을 찾는 등 고생을 해야지 블로그에 제대로 된 글 한편 쓰
doyu.doyui89.com
블로그로 돈버는 방법 머니 파이프라인 만들기 (feat.수익공개)
우연히 알고리즘에 의해 구글 애드센스 아로스tv 라는 채널을 보게 되었다. 한 이틀을 알고리즘에 의해 블로그 부업 뿐만아니라 자는 동안에 돈이 들어오는 구조에 대해 알게 되었고 머리를 한
doyu.doyui89.com
댓글