이슈

2023 티스토리 자동 목차 만들기, 맥시멈 5분컷

두잇나 2023. 3. 29. 21:36
반응형

티스토리자동목차


티스토리를 운영하다가 목차를 만드는 게 구글 SEO에도 좋고 유입된 사람들의 가독성을 위해 좋다는 사실이 증명되었다. 그래서 목차를 만들기 위해 이것저것 시도해 보며 실패를 겪다가 가장 빠르고 쉽게 적용할 수 있는 방법을 찾아 공유한다. 다른 설명 필요 없이 바로 들어간다.

목차


    1. 파일업로드 하기

    티스토리자동목차
    1번

    티스토리에 로그인을 한 다음, 운영하는 블로그의 톱니바퀴를 눌러준다.

    티스토리자동목차
    2번

    왼쪽 사이드 바에서 스킨편집을 눌러준다.

    3번

    HTML 편집을 눌러준다. 그리고 아래에 파일을 받고 다음 설명으로 넘어가면 된다.

    자동목차 만들기 파일.zip
    0.00MB

    다운을 받은 후, 압출을 풀면 두 개의 파일이 나온다. 그럼 준비완료.

    티스토리자동목차
    4번

    "1) 파일업로드"를 누른다.

    "2) +추가"를 눌러 위에서 다운로드한 파일을 업로드시킨다.

         그다음은 이번 작업에서 가장 중요한 부분이다.

    티스토리자동목차
    5번

    저 파일 위로 마우스 커서를 옮여 우클릭을 누르면 여러 항목이 나온다.

    그중에 "링크 주소 복사"를 클릭해 나오는 주소를 메모장에 옮겨놓는다.

    이러면 1단계 준비를 모두 완료했다.

    바로 다음으로 가보자.

     

    2. 복붙만 하면 끝인 코드 입력하기

    일단 먼저 필수코드 2개가 들어있는 메모장을 받자.

    자동목차만들기_코드준비물.txt
    0.00MB

    "1) 첫 번째" 코드와 "2) 두 번째" 코드가 있다. 확인한 후 다음으로 넘어가자.

    티스토리목차만들기
    1번

    1) HTML을 누른다.

    2)  <head> 바로 밑에 "1) 첫 번째"코드를 붙여 놓는다.

    3) 적용을 누르면 끝.

     

    이제 다시 관리페이지로 넘어간다.

     

    티스토리자동목차
    2번

    서식관리에 들어간다.

    티스토리자동목차
    3번

    나는 이미 목차 서식을 만들어 뒀기 때문에 위와 같이 나오지만 아예 없거나 다른 서식을 사용하는 사람들은 처음 쓰기 또는 서식 쓰기를 누르면 글쓰기 페이지로 넘어간다.

    티스토리자동목차
    4번

    1) 글쓰기 맨 위 제목을 자동목차로 알기 쉽게 표기해 둔다.

    2) HTML모드로 변경한다.

    3) 자동목차 만들기 코드준비물 파일에 있는 2번째 코드를 복사해 붙여 넣는다.

    4) "메모장에 적어놓은 링크 주소"란에 (따옴표 안에 있는 글자만 수정해야 한다. 따옴표 건들지 말기) 아래이미지 우클릭해서 링크 복사했던 주소를 넣는다. 그리고 기본모드로 바꾼다.

    티스토리자동목차
    5번
    티스토리자동목차
    5번

    기본모드로 변경하면 위와 같이 나온다. 그러면 성공! 참 쉽죠?

    이렇게 모든 게 끝났으면 오른쪽하단 완료버튼을 눌러 서식을 저장한다.

     

    3. 글쓰기에 적용하는 방법

    티스토리자동목차
    1번

    1) 글쓰기 할 때에 인트로 부분을 적거나 아니면 바로 목차를 쓰고 싶을 때에 상단 오른쪽 점 3개를 눌러 서식을 누른다.

    2) 우리가 저장했던 자동목차 서식이 보인다. 그걸 눌러주면 우리가 서식에 저장했던 내용이 불러져 온다.

     

    3) SCRIPT가 목차 위에 하나 아래 하나가 있다. 아래 SCRIPT 어쩌고 저쩌고 적혀있는 박스 밑으로 목차로 설정하고 싶은 제목을 기입한다.

    티스토리자동목차
    2번

    그리고 그 제목들에 위와 같이 "제목 2 또는 제목 3"으로 설정해 주면 알아서 목차로 인식을 해 아래와 같이 자동 생성된다.

    결과는 아래와 같이 나온다.

    티스토리자동목차
    3번

    이제 마음껏 활용해 보자.

    반응형