오늘은 티스토리 본문에 목차를 자동으로 설정하는 방법에 대해서 알아보도록 하겠습니다.
목차를 하나하나 html로 설정하는 방법이 있지만 자바스크립트 코드를 사용하면 자동으로 설정이 되기때문에 꿀기능이 아닐 수 없지요~
우선 목차는 본문의 길이가 아주아주 길 때 글의 구조를 한번에 파악할 수 있기 때문에 읽는 사람으로 하여금 정보를 빨리 찾아갈 수 있게 도움을 줍니다.
목차가 애드센스 수익에 영향을 줄까?(뇌피셜...)
대신 목차가 없을 때는 스크롤해서 찾아야 했던 정보가 스크롤이 필요없지만 글쓴이가 의도적으로 중간에 애드센스 광고를 넣었다면 아쉽게 될 수 있습니다.
물론 스크롤할 때 걸리는 애드센스 클릭은 좋은 클릭이 아니기 때문에 장기적인 수익화 블로그의 목적으로는 스킵하는 것이 좋습니다.
이렇게만 생각하고 끝나면 좀 아쉬운데 사실 목차를 활용해서 애드센스 클릭율을 올리는 방법이 존재하긴 합니다.
이 부분도 저의 뇌피셜이기 때문에 필요한 부분만 걸러 들으시는 것을 추천합니다.
우선 목차는 heading 태그들을 구조화하여 작성되기 때문에 해당 heading 태그가 도착하는 위치에 잘 보이도록 애드센스 광고를 삽입해 높으면 클릭율을 올리는 효과를 얻을 수 있을 것입니다.
다만 저는 본문의 광고 위치를 자동으로 설정해 놓을 예정이기 때문에 궁금하신 분이라면 테스트해 보시길 권합니다.
그럼 제가 적용한 플로팅 자동 목차에 대해서 설명드리겠습니다.
목차를 적용했을 때 모습? 목차 디자인?
최근에 포스팅한 "니콜 키드먼" 관련 글을 가지고 결과물을 우선 볼게요~
PC 모드 일 때는 플로팅되서 스크롤을 따라다니게 되어 있습니다.
<상단>
<중간>
그리고 모바일 모드에서는 상단에만 본문 위치에 고정으로 노출됩니다.
어떠신가요? 괜찮지 않나요?
원래 직사각형 이미지 였는데 저의 웹사이트 이미지 형식과 마추기 위해서 경계선모서리를 10px 둥글게 마감해 주었습니다.
나머지 코드와 설정 방법은 아래와 같으니 필요하신 분은 따라 해보세요~
플로팅 목차 설정은 다양한 사이트를 많이 찾아 봤는데 그 중에서도 디자인적으로 가장 깔끔한 것을 적용해 보았습니다.
참고한 사이트는 Atelier bicute 라는 블로그를 운영하고 계신 분입니다.
정말 도움이 되는 사이트입니다. 정보도 많았구요~ 한번씩 방문해 보시길 바랍니다.
코드 적용 방법과 내용은 "오디세이" 스킨을 기준으로 설명되어 있습니다.
[Tistory] 자동 목차(TOC) 적용하기
#1 TOC란? Table of contents(TOC)는 블로그나 사이트에서 종종 볼 수 있는데, 글을 작성하면서 사용된 태그(h1, h2 ...)를 이용하여 자동으로 목차를 만들어 주는 기능입니다. 검색을 해보면 수많은 TOC 관
bicute.net
티스토리 엠원스킨에 플로팅 자동 목차 설정하기?
저는 엠원스킨에 적용할 때 약간 차이가 있기 때문에 따로 설명하겠습니다.
</head> 바로 위에 넣어 주세요.. 사실 스크립트 태그는 </body> 바로 위에 적용해 주는 것이 좋다고 합니다.
그래서 저는 그냥 한번에 </body> 바로 위에 적용하겠습니다.
이 코드도 약간 수정하였는데요.
저는 포스팅에서 h2, h3 태그까지만 쓰기 때문에 나머지 h1, h4, h5, h6, h7 태그는 제거 했습니다.
<!-- TOC 목차 관련 1 -->
<script src="./images/tocbot.js"></script>
<!-- toc 목차 관련 3 -->
<script>
let content = document.querySelector('.article-view')
let headings = content.querySelectorAll('h2, h3')
let headingMap = {}
Array.prototype.forEach.call(headings, function (heading) {
let id = heading.id ? heading.id : heading.textContent.trim().toLowerCase()
.split(' ').join('-').replace(/[\!\@\#\$\%\^\&\*\(\):]/ig, '')
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: '.article-view',
headingSelector:'h2, h3',
hasInnerContainers: false
});
</script>
html 내 치환자
오늘은 티스토리 본문에 목차를 자동으로 설정하는 방법에 대해서 알아보도록 하겠습니다. 목차를 하나하나 html로 설정하는 방법이 있지만 자바스크립트 코드를 사용하면 자동으로 설정이 되기때문에 꿀기능이 아닐 수 없지요~ 우선 목차는 본문의 길이가 아주아주 길 때 글의 구조를 한번에 파악할 수 있기 때문에 읽는 사람으로 하여금 정보를 빨리 찾아갈 수 있게 도움을 줍니다. 대신 목차가 없을 때는 스크롤해서 찾아야 했던 정보가 스크롤이 필요없지만 글쓴이가 의도적으로 중간에 애드센스 광고를 넣었다면 아쉽게 될 수 있습니다. 물론 스크롤할 때 걸리는 애드센스 클릭은 좋은 클릭이 아니기 때문에 장기적인 수익화 블로그의 목적으로는 스킵하는 것이 좋습니다. 이렇게만 생각하고 끝나면 좀 아쉬운데 사실 목차를 활용해서 애드센스 클릭율을 올리는 방법이 존재하긴 합니다. 이 부분도 저의 뇌피셜이기 때문에 필요한 부분만 걸러 들으시는 것을 추천합니다. 우선 목차는 heading 태그들을 구조화하여 작성되기 때문에 해당 heading 태그가 도착하는 위치에 잘 보이도록 애드센스 광고를 삽입해 높으면 클릭율을 올리는 효과를 얻을 수 있을 것입니다. 다만 저는 본문의 광고 위치를 자동으로 설정해 놓을 예정이기 때문에 궁금하신 분이라면 테스트해 보시길 권합니다. 그럼 제가 적용한 플로팅 자동 목차에 대해서 설명드리겠습니다. 최근에 포스팅한 "니콜 키드먼" 관련 글을 가지고 결과물을 우선 볼게요~ PC 모드 일 때는 플로팅되서 스크롤을 따라다니게 되어 있습니다. <상단> <중간> 그리고 모바일 모드에서는 상단에만 본문 위치에 고정으로 노출됩니다. 어떠신가요? 괜찮지 않나요? 원래 직사각형 이미지 였는데 저의 웹사이트 이미지 형식과 마추기 위해서 경계선모서리를 10px 둥글게 마감해 주었습니다. 나머지 코드와 설정 방법은 아래와 같으니 필요하신 분은 따라 해보세요~ 플로팅 목차 설정은 다양한 사이트를 많이 찾아 봤는데 그 중에서도 디자인적으로 가장 깔끔한 것을 적용해 보았습니다. 참고한 사이트는 Atelier bicute 라는 블로그를 운영하고 계신 분입니다. 정말 도움이 되는 사이트입니다. 정보도 많았구요~ 한번씩 방문해 보시길 바랍니다. 코드 적용 방법과 내용은 "오디세이" 스킨을 기준으로 설명되어 있습니다. [Tistory] 자동 목차(TOC) 적용하기 #1 TOC란? Table of contents(TOC)는 블로그나 사이트에서 종종 볼 수 있는데, 글을 작성하면서 사용된 태그(h1, h2 ...)를 이용하여 자동으로 목차를 만들어 주는 기능입니다. 검색을 해보면 수많은 TOC 관 bicute.net 저는 엠원스킨에 적용할 때 약간 차이가 있기 때문에 따로 설명하겠습니다. </head> 바로 위에 넣어 주세요.. 사실 스크립트 태그는 </body> 바로 위에 적용해 주는 것이 좋다고 합니다. 그래서 저는 그냥 한번에 </body> 바로 위에 적용하겠습니다. 이 코드도 약간 수정하였는데요. 저는 포스팅에서 h2, h3 태그까지만 쓰기 때문에 나머지 h1, h4, h5, h6, h7 태그는 제거 했습니다. html 내 치환자 를 검색 후 바로 위에 넣어 주세요.. 이 부분이 엠원스킨과 조금 차이가 있는데요~ 엠원스킨에서 <div class="article">을 찾아서 <div class="article article-view"> 로 변경만 해주시면 됩니다. 앞으로 위의 div 태그는 class로 article 과 article-view 둘다 갖게 됩니다. 이러면 문제가 없겠죠? 아니면 css나 여차 js 파일에서 article-view를 article로 수정하는데 이건 코드를 볼 수 있어야 하기 때문에 비추천드립니다. 마지막으로 css 제일 아래 부분에 스타일을 추가해 주세요 이렇게 간단히? 보기 좋은 깔끔한 자동 플로팅 목차가 설정되었습니다. 여러분도 한번 적용해 보세요~ 목차가 애드센스 수익에 영향을 줄까?(뇌피셜...)
목차를 적용했을 때 모습? 목차 디자인?
티스토리 엠원스킨에 플로팅 자동 목차 설정하기?
<!-- TOC 목차 관련 1 -->
<script src="./images/tocbot.js"></script>
<!-- toc 목차 관련 3 -->
<script>
let content = document.querySelector('.article-view')
let headings = content.querySelectorAll('h2, h3')
let headingMap = {}
Array.prototype.forEach.call(headings, function (heading) {
let id = heading.id ? heading.id : heading.textContent.trim().toLowerCase()
.split(' ').join('-').replace(/[\!\@\#\$\%\^\&\*\(\):]/ig, '')
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: '.article-view',
headingSelector:'h2, h3',
hasInnerContainers: false
});
</script> <!-- toc 목차 관련 2 -->
<div class="toc toc-fixed" ></div> <!-- class="article"을 찾아서 class="article article-view"로 수정 -->
<div class="article article-view">/* TOC 목차 관련 */
.toc {
overflow-y: auto;
}
.toc > .toc-list {
overflow: hidden;
position: relative;
}
.toc > .toc-list li {
list-style: none;
}
.toc-list {
margin: 0;
padding-left: 10px;
}
a.toc-link {
color: currentColor;
height: 100%;
}
.is-collapsible {
max-height: 1000px;
overflow: hidden;
transition: all 300ms ease-in-out;
}
.is-collapsed {
max-height: 0;
}
.is-position-fixed {
position: fixed !important;
top: 0;
}
.is-active-link {
font-weight: 700;
}
.toc-link::before {
background-color: #EEE;
content: ' ';
display: inline-block;
height: inherit;
left: 0;
margin-top: -1px;
position: absolute;
width: 2px;
}
.is-active-link::before {
background-color: #180204;
}
/* 미디어 공통 */
.toc {
padding: 10px;
box-sizing: border-box;
width: 100%;
margin-bottom:20px;
border: 2px solid #180204;
z-index: 999;
background: white;
}
.toc-list {
margin-top: 10px !important;
font-size: 0.875em;
}
.toc > .toc-list li {
margin-bottom: 10px;
}
.toc > .toc-list li a {
text-decoration: none;
}
@media screen and (max-width: 1060px) {
.is-collapsed { max-height: 1000px; }
}
@media screen and (min-width: 1061px) and (max-width: 1609px) {
.toc {
width: 300px;
position: fixed !important;
top: 82px !important;
right: calc((100% - 1020px) / 2);
}
}
@media screen and (min-width: 1610px) {
.toc-absolute {
position: absolute;
margin-top:165px;
}
.toc-fixed {
position: fixed;
top: 165px;
}
.toc {
right: calc((100% - 1020px) / 2 + 1060px);
width: 240px;
}
}
<!-- toc 목차 관련 2 -->
<div class="toc toc-fixed" ></div>
이 부분이 엠원스킨과 조금 차이가 있는데요~
엠원스킨에서 <div class="article">을 찾아서 <div class="article article-view"> 로 변경만 해주시면 됩니다.
앞으로 위의 div 태그는 class로 article 과 article-view 둘다 갖게 됩니다.
이러면 문제가 없겠죠?
아니면 css나 여차 js 파일에서 article-view를 article로 수정하는데 이건 코드를 볼 수 있어야 하기 때문에 비추천드립니다.
<!-- class="article"을 찾아서 class="article article-view"로 수정 -->
<div class="article article-view">
마지막으로 css 제일 아래 부분에 스타일을 추가해 주세요
/* TOC 목차 관련 */
.toc {
overflow-y: auto;
}
.toc > .toc-list {
overflow: hidden;
position: relative;
}
.toc > .toc-list li {
list-style: none;
}
.toc-list {
margin: 0;
padding-left: 10px;
}
a.toc-link {
color: currentColor;
height: 100%;
}
.is-collapsible {
max-height: 1000px;
overflow: hidden;
transition: all 300ms ease-in-out;
}
.is-collapsed {
max-height: 0;
}
.is-position-fixed {
position: fixed !important;
top: 0;
}
.is-active-link {
font-weight: 700;
}
.toc-link::before {
background-color: #EEE;
content: ' ';
display: inline-block;
height: inherit;
left: 0;
margin-top: -1px;
position: absolute;
width: 2px;
}
.is-active-link::before {
background-color: #180204;
}
/* 미디어 공통 */
.toc {
padding: 10px;
box-sizing: border-box;
width: 100%;
margin-bottom:20px;
border: 2px solid #180204;
z-index: 999;
background: white;
}
.toc-list {
margin-top: 10px !important;
font-size: 0.875em;
}
.toc > .toc-list li {
margin-bottom: 10px;
}
.toc > .toc-list li a {
text-decoration: none;
}
@media screen and (max-width: 1060px) {
.is-collapsed { max-height: 1000px; }
}
@media screen and (min-width: 1061px) and (max-width: 1609px) {
.toc {
width: 300px;
position: fixed !important;
top: 82px !important;
right: calc((100% - 1020px) / 2);
}
}
@media screen and (min-width: 1610px) {
.toc-absolute {
position: absolute;
margin-top:165px;
}
.toc-fixed {
position: fixed;
top: 165px;
}
.toc {
right: calc((100% - 1020px) / 2 + 1060px);
width: 240px;
}
}이렇게 간단히? 보기 좋은 깔끔한 자동 플로팅 목차가 설정되었습니다.
여러분도 한번 적용해 보세요~
