구글블로그에 자동목차 설정하기

이 글에는 제품소개로 수익금을 얻는 링크가 포함되어 있습니다.

자동목차가 뭔가요?

자동목차는 이름 그대로 자동으로 목차를 보여주는 기능을 말해요. 그렇다면 목차는 무엇인가요? 물어보신다면 목차는 블로그의 제목, 부제목, 소제목등을 파악해 리스트를 만들어주고 해당 제목을 클릭하면 자동으로 그 글이 시작되는 부분으로 이동할 수 있는 기능이라고 이야기 할 수 있습니다.

목차는 왜 넣는건가요?

블로그에 목차를 넣는 이유는 여러 가지가 있습니다. 본래의 목적을 따지자면 방문자가 글을 더욱 쉽게 파악하고 길어지는 글중에 내가 원하는 부분을 쉽게 이동하여 살펴볼 수 있게 만든 기능이지만 그렇게 사용되는가하면 블로거들이 글을 발행하고 검색사이트의 상위에 올라가기 위해 SEO점수에 반영하기 위해서 필수적으로 적용하는 기능중에 하나로 생각할 수 있습니다. 안해도 무방하지만 조금이라도 더 많은 SEO점수를 원한다면 꼭 해야하는 작업인것이죠.

가독성을 향상시켜줍니다

목차는 글의 전체 구조를 한눈에 볼 수 있게 해줍니다.
방문자가 글의 내용을 빠르게 파악하고 관심 있는 부분을 쉽게 찾을 수 있습니다.

빠른 탐색에 용이합니다

긴 글이나 복잡한 주제의 글에서 특히 유용합니다.
독자가 원하는 섹션으로 바로 이동할 수 있어 편리합니다.

SEO(검색 엔진 최적화)에 좋은 점수를 얻을 수 있습니다

목차는 검색 엔진이 콘텐츠의 구조를 더 잘 이해하는 데 도움을 줍니다.
키워드 최적화와 검색 랭킹 향상에 긍정적인 영향을 미칠 수 있습니다.

글을 체계화시켜줍니다

글의 논리적 흐름과 구조를 명확하게 보여줍니다.
독자들이 콘텐츠의 전체 맥락을 더 쉽게 이해할 수 있게 합니다.

모바일에 친화적인 글이 됩니다

스마트폰에서 긴 글을 읽을 때 특히 유용합니다.
작은 화면에서도 쉽게 원하는 섹션으로 이동할 수 있습니다.

내 블로그에 자동목차 넣는 방법

그렇다면 자동목차는 어떻게 넣어서 작동시키는 걸까요? 완전히 html편집에 초보자라면 여기서 잠깐 어려울 수 있습니다. 하지만 아무것도 몰라도 그대로 따라한다면 어렵지않게 성공할 수 있을거라고 생각합니다. 잘 따라해보세요.

1. 블로그의 관리자페이지 메뉴에서 테마를 선택합니다.

2. 우측에 나오는 테마페이지에서 테마의 맞춤설정 ▼으로 되어있는 버튼을 눌러 HTML 편집을 누릅니다.

3. 단축키 Ctrl+F키를 눌러 나오는 html편집창 상단의 검색창에 <head>를 검색하고 그 코드아래에 알려주는 코드를 전체복사하여 붙여넣기 합니다.

아래의 코드를 복사하여 붙여넣기 합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!-- head 뒤에 넣는 자동목차코드 시작 -->
<script type='text/javascript'>
//<![CDATA[
//*************Table of Content (TOC) plugin by anantvijaysoni.in
function avsTOC() {
var avsTOC = i = headlength = gethead = 0;
var currentH2 = null; // 현재 처리 중인 h2 요소를 저장하기 위한 변수
        // h2와 h3 요소 처리
        var headings = document.querySelectorAll(".post-body h2, .post-body h3"); // 본문 내 h2, h3 요소 선택
        var tocHTML = ""; // 목차의 HTML을 저장할 변수
 
        for (i = 0; i < headings.length; i++) {
            gethead = headings[i].textContent;
 
            if (headings[i].tagName === "H2") {
                // 새로운 h2 요소를 만난 경우
                if (currentH2 !== null) {
                    tocHTML += "</ul>"; // 이전 h2의 하위 목차 종료
                }
                currentH2 = headings[i];
                currentH2.setAttribute("id", "point" + i);
                tocHTML += "<li><a href='#point" + i + "'>" + gethead + "</a><ul>"; // h2 아래에 하위 목차 시작
            } else if (headings[i].tagName === "H3" && currentH2 !== null) {
                // h3 요소를 만나고, 현재 처리 중인 h2가 존재하는 경우
                headings[i].setAttribute("id", "subpoint" + i);
                tocHTML += "<li><a href='#subpoint" + i + "'>" + gethead + "</a></li>";
            }
        }
 
        if (currentH2 !== null) {
            tocHTML += "</ul>"; // 마지막 h2의 하위 목차 종료
        }
 
        document.getElementById("avsTOC").innerHTML = tocHTML;
    }
 
    function avsToggle() {
        var avs = document.getElementById('avsTOC');
        if (avs.style.display === 'none') {
            avs.style.display = 'block';
        } else {
            avs.style.display = 'none';
        }
    }
 
    // TOC 초기화
    window.onload = avsTOC;
    //]]>
</script>
<!-- head 뒤에 넣는 자동목차코드 끝 -->
 
Colored by Color Scripter
cs

😎잠깐, 알려드릴게요.

단축키누르고 검색하는 방법을 잘 모르겠다구요? 여기에 움짤을 통해서 단축키를 누르면 html편집창에서 어떻게 동작하고 검색하는지 알 수 있습니다.

예시로 보여주는 단축키로 검색창 사용하는 방법

4. 이제 html편집창에서 다시 검색창 단축키를 눌러 ]]></b:skin> 을 검색해주세요. 이 코드가 보인다면 그위에 아래의 코드를 그대로 복사하여 붙여넣기 해주세요.

]]></b:skin>의 위치를 파악하고 그위에 코드를 삽입합니다

아래의 코드를 복사하여 붙여넣기 합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
/* 자동목차를 위한 CSS코드 시작 */
.avsTOC {
    border: 1px solid rgba(133, 133, 133, 0.33);
    font-weight: 500;
    border-radius: 0.55rem;
    line-height: 1.4;
    margin: 0px auto 50px;
    padding: 10px 15px 15px;
    display: block;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    background-color: #ffffff;
}
.avsTOC li:first-child {
    padding-top: 5px;
}
.avsTOC ol, .avsTOC ul {
    margin: 0;
    padding: 0;
}
.avsTOC ol li {
    padding: 5px 0;
    margin: 0 0 0 20px;
    font-size: 14px;
}
.avsTOC ul {
    margin-left: 20px;
    padding: 5px 0;
    font-size: 13px;
    line-height: 1.2; /* 줄간격 조정 */
}
.avsTOC ul li {
    list-style-position: inside;
    margin: 5px auto;
    padding: 5px 0 5px 20px;
    font-size: 13px;
    line-height: 1.2; /* 줄간격 조정 */
}
.avsTOC a {
    text-decoration: none;
    color: #333333 !important;
    line-height: 1.2; /* 줄간격 조정 */
}
.avsTOC a:hover {
    text-decoration: underline;
    font-weight: 600;
    color: grey !important;
}
.avsTOC button {
    font-size: 1.1rem;
    background-color: #fff;
    position: relative;
    outline: none;
    cursor: pointer;
    border: none;
    font-weight: 600;
    padding: 5px 0;
    line-height: 1.2;
}
/* 자동목차를 위한 CSS코드 끝 */
 
Colored by Color Scripter
cs

5. 위의 과정을 마친후 html편집창에서 또다시 검색창단축키를 실행하고 검색창에 <data:post.body/> 을 입력하여 아래의 스크린샷과 같은 위치를 찾아주세요. 여기서 제 블로그를 기준으로 2개가 검색되는데 2번째 코드의 위치를 확인하면 아래와 같은 코드가 보입니다.

이 코드를 로 주석처리하고 그위에 새로운 코드를 넣어야합니다.

이는 자동목차가 제대로 자리를 잡고 보여지기위해서 하는 절차입니다.

검색하여 나온 코드의 위치입니다

이제 바뀌는 코드를 그대로 넣어주시면 됩니다.

대체코드를 넣은 화면

아래의 코드를 복사하여 붙여넣기 합니다. <data:post.body/>를 삭제하고 아래코드를 그위치에 넣으면 됩니다.

1
2
3
<!-- 자동목차를 위한 원래코드 가림  <data:post.body/> 아래줄에 대체코드삽입 -->
<div id='post-toc'><data:post.body/></div>
<!-- <data:post.body/> -->
cs

여기까지 잘 따라하셨다면 성공입니다. 수고하셨습니다. 이제 블로그의 글쓰기 에디터에서 마지막 작업을 해볼 차례입니다.

6. 글쓰기를 누르고 html편집으로 변경해주세요.

7. 아래의 코드를 그대로 복사하여 붙여넣기 합니다.

1
2
3
4
5
<div class="avsTOC"><ol id="avsTOC"></ol></div> 
 
글내용
 
<script>avsTOC();</script>
cs

이제 다시 "새 글 작성 보기"로 전환하여 글내용이라고 작성한 텍스트를 지우고 그공간에 글이나 사진등을 넣으면서 블로그 글작성을 하시면 됩니다. 이렇게 매번 글을 쓸때마다 이 코드를 넣기가 불편함으로 아래처럼 작업하시면 쉽게 글을 작성할 수 있습니다.

8. 위의 코드를 그대로 복사한 후에 블로그관리자화면의 설정 → 글템플릿(선택사항)을 선택하여 새로운 창이 뜨면 거기에 붙여넣기 합니다. 이대로 저장하게 되면 이제부터 글을 작성할때 글쓰기를 누르면 그안에 위의 코드형태로 그대로 작성을 시작할 수 있습니다.

이 코드는 제가 만는것이 아닌 저도 웹서핑과 ai의 도움을 받아서 제작된 코드입니다. 목차의 기본화면이 목록을 접을 수 있게 변경하고 디자인을 조금 변경한 버전으로 작업되었습니다. 색상이나 모양을 조금씩 변경해서 사용하시면 나만의 자동목차를 만들 수 있을겁니다. 아래에 실제로 제 블로그의 자동목차가 작동되는 모습을 확인해보세요.

계속해서 다른 꾸미기팁정보도 글을 읽어보세요. 더욱 유용한 글이 많이 준비되어 있습니다.

이 글의 카테고리 : 꾸미기팁

구글블로그에 자동목차 설정하기

자동목차가 뭔가요?

목차는 왜 넣는건가요?

가독성을 향상시켜줍니다

빠른 탐색에 용이합니다

SEO(검색 엔진 최적화)에 좋은 점수를 얻을 수 있습니다

글을 체계화시켜줍니다

모바일에 친화적인 글이 됩니다

내 블로그에 자동목차 넣는 방법

😎잠깐, 알려드릴게요.

댓글 쓰기

문의하기 양식