목차
어떤 분이 말하길 구글 SEO 최적화는 로봇이 좋아하게 끔 작성하는 거라 합니다. 덧붙여 가장 이상적인 작성법(뇌피셜)은 구글에서 작성한 설명 글처럼 작성하는 것이라고 하는데요. Google support에서 작성한 걸 보시면 목차, 소제목, 인용, 리스트 등 구성을 잘 짜놓은 걸 확인하실 수 있어요. 그래서 목차는 포스팅을 구성하는 한 요소기 때문에 꼭 넣어주시면 좋은데. 일일이 제목에 링크 걸어서 목차에 연결하는 것도 생각보다 노동이죠? 오늘은 소제목만 설정해도 자동으로 목차에 생성되게 하는 방법을 알려드리려고 합니다.
포스팅 내 목차를 넣으셔도 되고 저처럼 HTML편집을 통해서 넣으실 수도 있습니다. 포스팅 내 넣으려면 서식을 활용해서 생성하는 방법을 이용하세요. 저는 상단에 위치하는 게 가장 효과적일 거라 판단해서 HTML 안에 코드를 넣어서 상단 광고 후에 나오게 했습니다. 글 작성 중 서식으로 목차를 넣을 때 최상단에 위치시키면 사진처럼 포스팅 description의 처음에 해당하는 부분에 목차 내용이 나오니 참고해 주세요.
함께 보면 좋은 포스팅:whatever스킨 커버 슬라이드 자동 넘김 설정하기
HTML코드로 오디오/음성 파일 만들기
HTML 편집
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.4.2/tocbot.min.js"></script>
</head>
<div class="book-toc"><p>목차</p><div class='toc'></div></div>
[!##_article_rep_desc_##] <--- 검색 3번째 위치한 것
<script>
// tocbot
var content = document.querySelector(".entry-content");
var headings = content.querySelectorAll("h1, h2, h3, h4, h5, h6, h7");
var headingMap = {};
Array.prototype.forEach.call(headings, function (heading) {
var id = heading.id
? heading.id
: heading.textContent
.trim()
.toLowerCase()
.split(" ")
.join("-")
.replace(/[\!\@\#\$\%\^\&\*\(\):]/gi, "");
headingMap[id] = !isNaN(headingMap[id]) ? ++headingMap[id] : 0;
if (headingMap[id]) {
heading.id = id + "-" + headingMap[id];
} else {
heading.id = id;
}
});
tocbot.init({
tocSelector: ".toc",
contentSelector: ".entry-content",
headingSelector: "h3, h4",
hasInnerContainers: false,
ignoreSelector: '.another_category h4',
});
$(document).ready(function () {
$(".toc");
}
);
</script>
</body> 위에 위치시켜야함
더보기를 누르시면 코드가 나오며 이모티콘을 누르면 자동 복사 됩니다. [스킨편집-HTML편집-HTML]에서 해당 코드를 넣어주실 건데요. 총 3가지 위치에 각각 넣어주셔야 제대로 적용이 됩니다. 첫 번째로 head와 /head사이에 상단에 있는 스크립트를 넣어주세요. 두 번째로 검색 기능(ctrl+F)을 이용해서 3번째 위치한 article_rep_desc로 이동하신 후 그 위에 다음 부분을 넣어주시면 됩니다. 마지막으로 스크롤 최하단으로 내려서 마지막 스크립트 내용을 넣어주면 HTML편집은 끝입니다.
우선 여기서는 어떤 제목태그를 목차로 변환할 건지 선택해주셔야 하는데요. 소제목으로 활용하실 제목 태그(h1, h2, h3, h4 등)를 headingSelector 부분에서 수정하시면 됩니다.
원하는 위치에 목차 삽입(서식 활용)
[블로그관리(단축키Q 또는 URL주소/manage)-서식관리-서식쓰기-HTML모드] 순으로 들어가셔서 사진에 보이는 태그를 저장하시면 서식 완성입니다. 그리고 글 작성 중 목차를 넣기 원하는 위치에 커서를 넣고 기본모드 옆 ···(점 3개)에서 서식을 클릭해서 새로 작성한 서식(자동목차생성)을 불러주시면 됩니다.
CSS 편집
/* 목차 스타일 */
.book-toc{
position:relative;
max-width:750px;
border:1px solid #7a583a; /*테두리 색상 수정 시 변경*/
padding:10px 20px 10px 15px;
z-index:1;
margin:20px 0;
}
.book-toc p{
font-weight:700;
font-size:1.2em!important;
color:#7a583a;
margin-bottom:10px!important;
}
/* tocbot */
.toc{
width:auto;
padding:0 10px;
box-sizing:border-box;
}
.toc-link::before{
background-color:#eee;
content:' ';
display:none!important;
height:inherit;
left:0;
margin-top:-1px;
position:absolute;
width:2px;
}
.toc-list>li{
margin-top:10px!important;
font-size:.9em;
width:auto;
}
.toc>.toc-list li{
margin-bottom:10px;
list-style:upper-roman inside; /*소제목 앞 숫자 수정 시 변경*/
}
.toc>.toc-list li>ol{
width:auto;
margin-bottom:0;
}
.toc>.toc-list li:last-child{
margin-bottom:0;
}
.toc>.toc-list li a{
text-decoration:none;
color:#000;
}
/* tocbot끝*/
[스킨편집-HTML편집-CSS] 순서로 이동하신 다음 위 값을 복사해서 최하단에 넣고 저장해 주시면 됩니다. 폰트 크기, 테두리, 목차 앞에 숫자정도는 변경이 가능하니 취향에 맞게 수정하시면 됩니다.
'일상다반사 > 블로그' 카테고리의 다른 글
| Whatever스킨 - 댓글창 대화방처럼 꾸미기 (2) | 2023.01.16 |
|---|---|
| Whatever스킨 - 포스팅 썸네일 비율 알맞게 변경하는 법 (0) | 2022.12.19 |
| 본문 텍스트 밑줄에 Highlighter 효과 적용하기 (2) | 2022.10.06 |
| Whatever스킨 상단 헤더에 포스팅 타이틀 구현하기 (5) | 2022.09.20 |
| 무료 고퀄리티 블로그 로고 만들기 (Feat. WIX LOGO MAKER) (0) | 2022.09.15 |