본문 바로가기
유용한정보 GoodInfo

티스토리 목차 만들기, 이유, 목차 Sample, 목차 서식 넣기, 기존 글 목차 넣기

by 조이에코 2023. 12. 27.
728x90
반응형

안녕하세요. 요새 티스토리 글을 쓰면서 블로그에 대한 궁금증과 관련 정보를 알아보고 있습니다. 그중에 티스토리  목차를 넣는 게 중요하다고 느껴서 앞으로 블로그 글을 쓸 때 목차는 글 앞쪽에 적을 계획입니다. 그래서 티스토리에 목차를 넣는 이유를 살펴보고 티스토리 목차를 만들 수 있게 간단하고 괜찮은 샘플 1개를 제공하고, 티스토리 목차 서식에 넣는 법, 그리고 기존 티스토리 글에 쉽게 목차를 넣는 법을 소개해 드리겠습니다.

 

'티스토리 목차 넣는 이유'의 글을 넘어가고 싶다면 아래 목차에서 원하는 곳으로 가면 되겠습니다. 다시 목차로 다시 돌아가고 싶으면

 

뒤로가기

 

/ CapCut 편집

 

티스토리 블로그 목차 넣는 이유

티스토리 목차 넣는 이유는 여러 가지 이유로 유용할 수 있습니다.

콘텐츠 구조화:

  • 티스토리 목차는 글의 구조를 시각적으로 표현하여 독자가 내용을 빠르게 이해하고 찾아보기 쉽게 만듭니다. 긴 글이나 복잡한 주제의 경우, 목차는 독자에게 더 나은 구조화된 경험을 제공합니다.

검색엔진 최적화 (Search Engine Optimization, SEO):

  • 티스토리 목차는 검색 엔진에서 페이지의 내용을 더 잘 이해하고 색인화하는 데 도움을 줄 수 있습니다. 특히 특정 키워드나 주제에 대한 목차 항목은 검색 결과에서 높은 위치에 나타날 수 있습니다.

독자 편의성:

  • 티스토리 목차는 독자가 특정 섹션으로 쉽게 이동할 수 있도록 도와줍니다. 독자는 자신이 원하는 정보를 빠르게 찾아볼 수 있어서 글을 더 편안하게 읽을 수 있습니다.

전체 내용 미리 보기:

  • 티스토리 목차를 통해 독자는 글의 주요 내용을 간략히 파악할 수 있습니다. 이는 독자가 글의 전반적인 내용을 파악하고 관심 있는 부분으로 이동할 수 있게 도와줍니다.

글 작성자의 의도 전달:

  • 티스토리 목차는 글의 구조와 흐름을 보여주므로, 글을 작성한 작가가 독자에게 어떤 내용을 전달하고자 하는지 더 명확하게 전달할 수 있습니다.

모바일 사용자 향상:

  • 티스토리 목차는 모바일 장치에서 글을 읽는 독자에게 더 효율적인 경험을 제공합니다. 모바일 화면에서 긴 글을 스크롤하거나 탐색하는 것보다 목차를 통해 빠르게 이동할 수 있습니다.

요약하면, 목차는 티스토리 글을 더 구조화되고 이해하기 쉽게 만들어주며, 독자와 검색 엔진 모두에게 유용한 정보를 제공합니다. 이상으로 티스토리 목차 넣는 이유에 대해서 알아봤습니다.

티스토리 목차 쉽게 만들기-Sample

티스토리 목차샘플.txt
0.00MB

 

이제 티스토리 목차를 쉽게 만드는 방법에 대해서 알아보겠습니다. 먼저 위에 있는 티스토리 목차샘플을 다운로드하세요. 티스토리 상단 글쓰기를 눌러 html 모드로 들어갑니다.

블로그 오른쪽 상단 html 모드로 갑니다.

 

html 모드에서 티스토리 목차샘플을 다운로드하여 복사하여 붙여 넣기를 합니다.

목차샘플을 복사해서 붙여넣기 합니다.

 

여기에서 아래 체크해 놓은 곳만 알면 됩니다.(중요) 이 부분만 알면 목차는 쉽게 편집이 가능합니다. '목차 html부분에서 "#no0" > 대제목1 </a></p>' 여기를 클릭하면 이동할 수 있는 곳은 '본문 목차 html <h2 id="no0" data...으로 이동한다'라는 것만 이해하시면 됩니다. (예: no6-> id="no6).

티스토리 목차 샘플에서 대제목이 하나 더 추가해야 된다고 하면 대제목 하나를 복사해 밑에 붙여 넣고, "#no4"대제목을 만든 후 본문에 이동할 곳에 복사해 붙여 넣고 id="no4"를 추가를 해주면 되는 거죠.

#no1 대제목이 id="no1" 본문 대제목으로 가게하면 됩니다.

 

기본 모드로 돌아가면 아래와 같은 샘플 목차가 열리고 글을 쓰면 되는데, 목차 제목을 바꾸실 때는 html모드에서 바꾸셔야 합니다. (예: 대제목 1->  삶은 계란 칼로리)

티스토리 목차Sample을 html에 복사 후 붙여넣기 사용하면 되고 제목 수정은 html에서 고쳐야 합니다.

 

목차 Sample 서식 넣기

글쓰기를 할 때 괜찮은 목차를 서식에 넣고 목차를 불러올 수 있습니다. 왼쪽 메뉴 서식 관리로 들어갑니다.

목차를 서식에 저장해서 글쓰기 할때 불러 올수도 있습니다.

 

오른쪽 상단 서식 쓰기를 누릅니다.

서식관리에서 서식쓰기 후 저장

서식 쓰기에서 html모드로 들어가서 '티스토리 목차 샘플'을 복사해서 '붙여 넣기'하고 저장하시면 됩니다.

티스토리 목차샘플.txt
0.00MB
서식쓰기에서 html모드에서 목차 샘플을 복사후에 붙여넣기를 합니다.

 

그럼 새로 글쓰기 할 때 상단 더 보기(점 3개)에서 서식으로 들어가서 저장된 서식을 불러와서 글쓰기를 하면 됩니다.

새로 글쓰기 할때 상단 더보기 서식에서 불러올수 있습니다.

기존 글 목차 넣기

위 부분을 이해했으면 기존 글 목차도 쉽게 넣을 수 있습니다. 목차 없는 기존 글 수정을 누릅니다. 먼저 목차 위치를 확인해야겠죠. 사진 밑에 목차를 넣어 보겠습니다.

목차가 들어갈 위치를 표시해 둡니다.

 

기존 글 전체에서 목차에서 이동시킬 대제목, 중제목을 확인해서 메모장에 씁니다.

기존 글 대제목, 중제목을 메모장에 써줍니다.
티스토리 목차샘플.txt
0.00MB

 

티스토리 상단 html 모드로 가서 목차 위치에 '티스토리 목차샘플'에 상단 목차 html 부분만 선택해서 붙여 넣기 합니다.

블로그 목차샘플에 목차부분만 복사해 목차위치에 붙여넣기 합니다.

 

작업을 편의를 위해 '티스토리 목차 샘플' 하나를 메모장에 복사한 후 붙여 넣기 해서 싱어게인 글에 맞게 대제목을 고칩니다. 대제목이 하나 부족하므로 대제목 4를 복사해 대제목 5로 만들어주고 #no3을  #no4로 바꿔줍니다.

블로그에서 고치기전에 메모장에서 미리 샘플목차 html을 정리해줍니다.

 

그리고 기존 본문에 있는 대제목 html을 메모장에 있는 html 양식과 같이 변경해 줍니다.

<h2 data-ke-size="size26">싱어게인3 top 10 결정전 결과 보기 </h2> 이것을 아래와 같이 바꿔주면 됩니다.

<h2 id="no0" data-ke-size="size26"><b> 싱어게인3 Tope 10 결정전 결과 보기 </b></h2>

 

오른쪽 기존 html에서 왼쪽 메모장에 있는 목차 샘플 html에 써있는거 처럼 변경을 하면 됩니다.

 

기본모드로 돌아오면 아래 사진 처럼 됩니다. 글자 크기나 두께 같은 건 기본모드에서 수정하시면 끝입니다.

기존 글에 목차 넣기 완료

 

마치며

티스토리를 보면서 목차가 있는 글을 보면서 신기해였고, 티스토리 목차의 중요성을 느끼게 됐습니다. 다들 바쁜 시간에 블로그 글이 어떤 내용이 있는지, 자기가 원하는 자료가 있는지 없는지 알지 못하는 상태에서 독자가 과연 그 블로그에 글을 보기나 할까요? '티스토리 목차 만들기' 다른 블로그 글을 보면서 step by step으로 따라 했는데 안 됐던 게 있었고 좀 더 쉽게 티스토리 목차 만들기를 설명하는 글을 올리게 됐습니다. 막상 저도 쉽게 글을 올리려고 포스팅을 하고 있지만 막상 글로 설명을 하려다 보니 글이 좀 길어진 거 같습니다. 쉽게 티스토리 목차 만들기에 도움이 되셨으면 좋겠습니다. 감사합니다.

 

728x90
반응형