티스토리 목차(제목) 꾸미는 방법

글 작성 시 목차와 같은 주요 부분을 강조하고 싶을 때
밑줄 표시, 볼드체 사용, 색상 변경 등을 사용하는 방법을 사용합니다.
이번 글에서는 (h2, h3, h4) 코드를 수정하여 간단하게 목차 강조하는 방법에 대한 설명입니다.

---

1. 목차 포맷(format) 지정하기

티스토리 글쓰기 화면에서 왼쪽 위에 기본 "본문2"라고 되어있는 부분을 '제목1' ~ '제목3' 중 한개를 선택하면 지금 선택한 글은 제목(소제목) 이라고 지정을 할 수 있습니다

 

제목 꾸미는 CSS를 적용하기 전 기본 제목1,2,3은 아래와 같이 별다른 특징 없이 크기 차이정도만 있습니다.

2. 목차 꾸미기 적용

아래와 같이 간단하게 목차를 꾸며 가독성을 높여보겠습니다.

1) CSS 편집

• 티스토리 -> 관리 -> 꾸미기 -> 스킨 편집 -> html 편집 -> CSS 화면으로 갑니다.

 

 

• CSS 화면에서 Ctrl + f 버튼으로 검색창을 표시합니다.

entry-content를 검색해서 아래와 같이 h1, h2 ... h4 가 나오는 곳으로 가세요

여기서 h1은 글의 제목에 해당하는 부분이므로 h2 ~ h4 소제목에 해당하는 부분만 수정해 줍니다.

 

color: #000;라고 적힌 부분 아래에 ↓ ↓ ↓아래 적힌 코드를 복사 붙여넣기 해주세요

border-style: solid;
border-width : 0px 0px 1px 15px;
border-color: #06155f89;
background-color: #fff;
padding: 10px 10px;

 

제가 설정한 소스코드 예시입니다.

.entry-content h2 {
	clear: both;
	margin: 29px 0 22px;
	font-size: 1.5em;
	line-height: 1.5;
	color: #000;
	border-style: solid;
	border-width : 0px 0px 1px 15px;
	border-color: #06155f89;
	background-color: #fff;
	padding: 10px 10px;
}
.entry-content h3 {
	clear: both;
	margin: 29px 0 22px;
	font-size: 1.3125em;
	line-height: 1.5;
	color: #000;
	border-style: solid;
	border-width : 0px 0px 1px 8px;
	border-color: #06155f89;
	background-color: #fff;
	background-image:linear-gradient(to right,#06155f11,rgba(255, 255, 0, 0));
	padding: 10px 10px;
}
.entry-content h4 {
	clear: both;
	margin: 29px 0 22px;
	font-weight: 400;
	font-size: 1.125em;
	line-height: 1.5;
	color: #000;
	border-style: solid;
	border-width : 0px 0px 1px 10px;
	border-color: #06155f89;
	background-color: #fff;
	padding: 10px 10px;
}

 

2) 색상변경

색상을 변경하려면 마우스 커서를 색상 부분에 가져가면 이렇게 선택하는 화면이 활성화되어 선택하시면 됩니다.

 

3) 미리보기

글 작성화면에서는 목차 꾸미기 적용이 안되어 보이지만 왼쪽하단에 미리보기를 누르면

 

이렇게 잘 적용된 모습을 확인하실 수 있습니다