티스토리 블로그_소제목(h2, h3, h4) 꾸미기_CSS

티스토리 소제목 꾸미기

---

티스토리 소제목 꾸미기

①"CSS" 편집 창에서 키보드로 "커맨드(컨트롤)" + "F"를 누릅니다. "Entry Content"를 입력하고 "엔터"를 칩니다. "/* Entry Content */"를 찾습니다.

②"/* Entry Content */" 하단 부분이 바로 티스토리 소제목 CSS입니다. "h2"가 "제목 1", "h3"가 "제목 2", "h4"가 "제목 3"입니다.

티스토리 CSS 편집 창 (티스토리 화면 캡처)

아래 코드를 복사하여 해당 부분에 덮어씌운 후, "적용"해줍니다.

.entry-content h2 { /* 제목1 */
	clear: both;
	margin: 29px 0 22px;
	font-size: 1.5em;
	line-height: 1.5;
	color: #000;
	border-top:1px solid #1b9a1a; /* 윗줄 */
	border-left:1px solid #1b9a1a; /* 왼쪽 줄 */
	border-right:1px solid #1b9a1a; /* 오른쪽 줄 */
	border-bottom:1px solid #1b9a1a; /* 아랫줄 */
	background-color: #ffb33f; /* 배경색 */
}
.entry-content h3 { /* 제목2 */
	clear: both;
	margin: 29px 0 22px;
	font-size: 1.5em;
	line-height: 1.5;
	color: #000;
	border-top:1px solid #1b9a1a; /* 윗줄 */
	border-left:1px solid #1b9a1a; /* 왼쪽 줄 */
	border-right:1px solid #1b9a1a; /* 오른쪽 줄 */
	border-bottom:1px solid #1b9a1a; /* 아랫줄 */
	background-color: #ffb33f; /* 배경색 */
}
.entry-content h4 { /* 제목3 */
	clear: both;
	margin: 29px 0 22px;
	font-size: 1.5em;
	line-height: 1.5;
	color: #000;
	border-top:1px solid #1b9a1a; /* 윗줄 */
	border-left:1px solid #1b9a1a; /* 왼쪽 줄 */
	border-right:1px solid #1b9a1a; /* 오른쪽 줄 */
	border-bottom:1px solid #1b9a1a; /* 아랫줄 */
	background-color: #ffb33f; /* 배경색 */
}

아래와 같이 소제목이 수정된 것을 볼 수 있습니다.

수정 후 티스토리 소제목 (티스토리 화면 캡처)

아래 내용을 참고하여 원하는 대로 커스터마이징 가능합니다.

font-size → 소제목 글자 크기
border-top → 윗줄
border-left → 왼쪽 줄
border-right → 오른쪽 줄
border-bottom → 아랫줄
px → 줄 굵기
# → 줄 색상

background-color → 배경 색깔

---

※ 검색 엔진 최적화(SEO) 수익형 블로그 만들기

이외에도 검색 엔진 최적화에 도움이 되는 다른 방법들은 아래 글에 정리해 두었습니다.

티스토리 블로그_수익형 블로그 검색 엔진 최적화(SEO) 설정

티스토리 블로그_배경색, 헤더 색깔, 블로그 이름 글자색 커스터마이징_CSS

티스토리 블로그_글 제목 배경 어둡게 수정하기_CSS

---