어포스트 스킨 자동 목차 크기 간격 수정하기 (티스토리 스킨 목차 변경)

어포스트 스킨 자동 목차 크기 간격 수정하기 (티스토리 스킨 목차 변경)

목차를 수동으로 직접 포스팅마다 삽입하여 만드는 방법이 있고, 자동으로 만들 수도 있습니다. 무료 티스토리 스킨 어포스트 스킨은 h2, h3 태그를 추출하여 자동으로 목차를 지원하는 기능이 있어 편리하게 이용 중입니다.

이번 포스팅에서는 현재 사용 중인 어포스트 스킨에 적용한 목차 간격, 크기 조절 css 수정하는 방법을 공유하려고 합니다.

어포스트 스킨 TOC

자동목차는 TOC(Table of contents)로 SEO 최적화에 긍정적인 영향을 주는 요소로 티스토리 toc.js로 검색해보시면, 다양한 TOC 적용 방법을 확인하실 수 있습니다.

어포스트 스킨 목차 css 수정하기

어포스트 스킨에서 제공하는 자동목차 간격과 글자 크기를 변경하였습니다.

스킨 목차 html 구조는 간단하게 아래의 순서처럼 구성되어있습니다.

<ul class="toc">
<li class="title"></li>
<li><a href="#toc1"></a></li>
<li class="">
<ul class="toc-h3">
<li><a href="#toc21"></a></li>
<li><a href="#toc22"></a></li>
<li><a href="#toc23"></a></li>
</ul>
</li>
</ul>

위의 html의 css 설정을 수정하여 티스토리 스킨의 자동목차의 글자 색상, 줄 간격 등을 수정할 수 있습니다. [css]에서 다음과 같이 수정하시면 목차 글자 크기 밑 간격을 조절 가능합니다.

목차 글자 크기 수정

'목차'라고 되어있는 글의 설정을 수정하려면 아래와 같은 곳을 수정하면 됩니다.

.toc > .title {
font-size: 1.375rem;
text-decoration: underline;
}

위와 같은 곳을 찾아서 font-size: 1.375rem; 에서 1.375rem 수치를 변경하여 글자 크기를 수정할 수 있습니다.

만약 밑줄을 제외하고 싶다면 text-decoration: underline;에서 underline부분을 none으로 변경하시면 됩니다.

글자 색상을 변경하고 싶다면 color: #코드색상 !important;을 추가하여 변경할 수 있습니다.

해당 블로그에서는 글 사이즈를 1.2rem;으로 수정하고 색상 코드를 추가하였습니다.

수정 후

.toc > .title {
font-size: 1.2rem;
text-decoration: underline;
color: #808080 !important;
}

목차 h2 수정하는 방법

.toc > li > a {
 font-size: 1.1875rem;
}

어포스트 스킨 목차의 h2에 해당하는 글의 글 사이즈, 색상을 설정을 수정할 수 있는 곳입니다.

font-size: 1.1875rem;에서 1.1875rem부분을 수정하여 글자 크기를 변경할 수 있습니다.

글자 크기를 줄이고, 색상을 추가하였습니다.

수정 후

.toc > li > a {
font-size: 1rem;
color: #52575c !important;
}

글 크기와 색상 추가한 css 수정 코드입니다.

목차 h3 css 수정

.toc > li > ul > li > a {
font-size: 1.125rem;
}

위의 내용을 찾아서 수정할 수 있습니다. font-size: 1.125rem;에서 글자 크가 수치를 변경할 수 있습니다.

수정 후

.toc > li > ul > li > a {
font-size: 1rem;
color: #808080 !important;
}

글자 크기와 색상을 추가하였습니다.

목차 박스 테두리 간격과 줄 간격 수정하기

.toc li {
padding: 7px 0;
max-height: 100%;
overflow: hidden;
opacity: 1;
transition: opacity 0.5s ease;
}

위와 같은 부분에서 padding 수치를 조절하시면 박스 테두리 간격을 수정이 됩니다.

여기에 margin-bottom: -7px;값을 적용하여 줄 간격도 좁혀주었습니다. 마이너스 수치를 조절하여 줄 간격을 줄이는 것이 가능합니다.

수정 후

.toc li {
padding: 0 0 7px 0;
max-height: 100%;
margin-bottom: -7px;
overflow: hidden;
opacity: 1;
transition: opacity 0.5s ease;
}

padding 수치를 위, 좌, 우 수치를 0으로 만들고, 아래만 7px 값을 지정하였습니다.

위와 같이 css를 수정하여 어포스트 스킨 자동 목차 부분의 디자인을 수정할 수 있습니다.

---

TOC 수정 전

TOC 수정 후

자동 목차 크기를 수정을 하는 과정을 정리해보았는데요. 도움이 되셨길 바랍니다.