티스토리 블로그의 모든 글에 자동으로 목차를 표시하는 방법을 이 블로그에서 설명한 적이 있었습니다. 해당 방법대로 해보면 Square 스킨에서는 클래스를 제대로 변경해도 목차가 제대로 표시되지 않습니다. Square 목차를 사용하는 경우 아래 내용대로 하면 목차가 자동으로 표시될 것입니다.
티스토리 Square 스킨에 자동 목차 표시하는 방법
티스토리 스킨에 목차를 자동으로 표시하는 기본적인 방법은 다음 글을 참고할 수 있습니다.
티스토리 블로그의 모든 글에 자동으로 목차 표시하는 방법
티스토리 블로그에 목차를 표시하려는 경우 목차 스크립트 파일을 이용하여 목차를 추가할 수 있습니다. 보통의 경우 목차를 표시할 자리에 수동으로 HTML 코드를 추가해야 하는데, 그러면 번거
avada.tistory.com
Square 스킨에서는 위의 방법대로 해도 목차가 제대로 표시되지 않는 것을 확인했습니다. 대신 다음과 같은 방법대로 하면 제대로 표시될 것입니다. 기본적인 사항은 동일하고 js 파일을 <head>...</head> 섹션이 아닌 </body> 바로 위로 이동하면 문제가 해결됩니다.
js 파일 다운로드
먼저 여기에서 js 파일을 다운로드하여 압축을 풀고 꾸미기 > 스킨 편집 > html 편집 > 파일업로드에서 js 파일을 업로드합니다.
CSS 코드 추가하기
꾸미기 > 스킨 편집 > htmL 편집 > CSS 탭을 클릭하고 하단에 티스토리에 목차 표시하는 방법 (북클럽 스킨)에 나와 있는 CSS 코드를 복사하여 붙여넣기 합니다.
CSS 코드는 원하는 대로 수정하도록 합니다.
js 파일 로드 및 jQuery 스크립트 추가하기
꾸미기 > 스킨 편집 > htmL 편집 > HTML 탭을 클릭하고 </body> 바로 위에 다음 코드를 추가합니다.
<!-- 티스토리 Square 스킨 자동 목차 -->
<script src="./images/jquery.toc.min.js"></script>
<script>
const table = '<div class="book-toc ol-toc first-toc"><p>목차</p><ol id="toc"></ol></div>';
if ( $( ".article h2" ).length > 1 && !$("#toc").length ) {
$('.article h2:first-of-type').before(table);
}
</script>
<script>
$(function(){
$("#toc").toc( {content: ".article", headings: "h2,h3,h4" , top: -90, isBlink : true, blinkColor : '#21B9DE' } )
});
</script>Square 스킨의 경우 클래스는 article입니다. 다음 그림을 참고하여 코드를 적절히 추가하도록 하세요.
결과
저장한 후에 살펴보면 h2 헤딩이 2개 이상인 글에는 자동으로 목차가 생성되어 표시될 것입니다.
마치며
이상으로 티스토리 무료 스킨 중 하나인 Square 스킨에서 자동으로 목차를 표시하는 방법에 대해 살펴보았습니다. 예상대로 작동하지 않는 경우 티스토리 블로그의 모든 글에 자동으로 목차 표시하는 방법 글을 먼저 읽어보신 후에 위의 방법대로 진행해보시기 바랍니다.
목차를 표시하면 SEO에 긍정적으로 작용하며, 워드프레스 SEO 플러그인을 설치하여 글을 작성하면 TOC를 표시할 것을 권장합니다.
워드프레스를 사용하는 경우 다양한 무료 및 유료 플러그인을 사용하여 목차를 자동으로 표시할 수 있으며, 세부적인 세팅이 가능합니다.
워드프레스 목차 만들기 플러그인 Fixed TOC - 워드프레스 정보꾸러미
긴 글을 작성하는 경우 목차를 추가하면 독자들이 쉽게 원하는 부분으로 이동할 수 있어 글의 가독성과 사용성을 향상시키며 구글 검색 순위에도 긍정적으로 작용합니다. 워드프레스에는 자동
www.thewordcracker.com
참고
돈을 버는 마인드: '나는 자는 동안에도 돈을 번다'
최근 지인이 블로그를 운영하고 수익을 내고 싶다며 어떻게 해야 하는지 제게 물어왔습니다. 블로그에 대해 전혀 모르는 분이라 어떤 식으로 설명을 해야 할지 난감하지 않을 수 없었습니다. 먼
avada.tistory.com
워드프레스와 티스토리 블로그로 돈 버는 방법
어떤 글을 보니 티스토리 블로그로 하루에 50만 원씩 벌겠다는 야심찬 계획을 가지고 블로그를 시작하는 분이 계시네요. 목표는 하루 10만 명 방문자를 유치하여 구글 애드센스로 일 50만 원을 벌
avada.tistory.com