티스토리 소제목 꾸미기

티스토리는 HTML/CSS/JS 사용이 가능하기 때문에 소제목(H2, H3, H4, H5 태그)을 꾸밀 수 있습니다. 스킨 편집의 CSS 탭에서 기존 CSS 스타일을 수정하거나 새롭게 추가가 가능합니다. 저는 CSS 탭 하단에 CSS 스타일을 추가하여 스타일을 변경하는 편입니다. 기존 CSS를 수정하는 것은 유지보수 측면에서 바람직하지 않고, 가급적이면 기존 CSS는 유지하고 하단에 새로운 CSS를 추가하는 것이 관리적인 측면에서 조금 편리할 수 있습니다.

참고로 워드프레스 블로그의 경우 테마의 스타일시트 파일은 건드리지 않고 관리자 페이지나 차일드 테마의 스타일시트에 코드를 추가하여 변경하기 때문에 추후 테마가 업데이트되어도 추가한 스타일이 유지되고, 테마 파일을 수정하더라도 차일드 테마에서 진행하면 수정한 파일이 유지됩니다. 이에 반해 티스토리는 스킨이 업데이트되면 추가하거나 수정한 CSS 코드, HTML 코드 등은 초기화되므로 다시 추가하거나 수정해야 합니다.

티스토리 소제목 꾸미기 (오디세이 & 북클럽 스킨)

소제목 스타일을 변경해야 할까?

저는 기본 스킨을 편집하여 스타일을 변경하는 편이지만, 일반적으로 기본 스킨을 그대로 사용해도 아무런 문제가 없습니다. 

오히려 초보자들이 스타일을 바꾸는 것에 너무 치중하다 보니 정작 중요한 콘텐츠 작성에 집중하지 못하는 경향이 있습니다.

HTML/CSS/JS에 대하여 조금 아는 경우에는 약간의 시간을 들여서 스타일을 조금 개선하는 것은 괜찮은 것 같습니다. 하지만 저처럼 너무 시간을 들여서 스타일을 전면적으로 바꾸는 것은 노력에 비해 실질적인 효과는 그리 없을 수 있습니다.😥

HTML/CSS/자바스크립트가 무엇인지 모르는 사용자라면 스타일에 너무 연연하지 마시고 글 작성에 집중할 것을 권장합니다.

티스토리 소제목 꾸미기 예시

저는 여러 번 스킨을 변경하다 직전에는 북클럽(Book Club) 스킨을 거쳐 지금은 오디세이(Odyssey) 스킨에 정착한 상태입니다. 오디세이 스킨의 기본 소제목 스타일은 너무 밋밋하게 느껴질 수 있습니다. 저는 CSS로 변경해 사용하고 있습니다.

다음은 오디세이 스킨의 기본 소제목 스타일 예시를 보여주는데요.

H2, H3, H4 헤딩 태그의 스타일이 잘 구분이 안 되는 편입니다.

CSS를 사용하여 소제목 스타일을 꾸밀 수 있습니다. 예시:

기본적으로 다음과 같은 CSS 코드를 사용하여 스타일을 꾸밀 수 있습니다.

.article-view h2 {
// 오디세이 스킨의 H2 소제목 스타일
}

.article-view h3{
// 오디세이 스킨의 H3 소제목 스타일
}

.article-view h4 {
// 오디세이 스킨의 H4 소제목 스타일
}

.article-view h5 {
// 오디세이 스킨의 H5 소제목 스타일
}

만약 북클럽 스킨을 사용한다면 article-view를 entry-content로 교체합니다. 

.entry-content h2 {
// 북클럽 스킨의 H2 소제목 스타일
}

.entry-content h3 {
// 북클럽 스킨의 H3 소제목 스타일
}

.entry-content h4 {
// 북클럽 스킨의 H4 소제목 스타일
}

.entry-content h5 {
// 북클럽 스킨의 H5 소제목 스타일
}

오디세이 스킨

이 블로그(오디세이 스킨)에 사용된 것과 비슷한 스타일을 구현하려는 경우 다음과 같은 CSS 코드를 사용할 수 있습니다.

/* 소제목 스타일 (Modern & Chic Upgrade) */
.article-view h2 {
	font-size: 1.4em;
	margin: 1.6em 0 0.9em 0;
	font-weight: 600;
	position: relative;
	line-height: 1.5;
	color: #ffffff !important;
	background: linear-gradient(135deg, #2c3e50, #4a6fa5);
	padding: 12px 20px;
	/* 비대칭 라운드 적용 */
	border-radius: 0 12px 0 12px;
	font-family: 'Muli', sans-serif;
	letter-spacing: 0.6px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.article-view h2:hover {
	transform: translateY(-3px);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

/* 세련된 서브소제목 */
.article-view h3 {
	margin: 1.3em 0 0.8em 0;
	font-weight: 600;
	font-family: 'Titillium Web', sans-serif;
	font-size: 21px;
	line-height: 1.5;
	color: #2c3e50 !important;
	text-transform: uppercase;
	border-bottom: 2px solid rgba(74, 111, 165, 0.35);
	padding-bottom: 8px;
	letter-spacing: 1.2px;
	transition: color 0.25s ease, border-color 0.25s ease;
}
.article-view h3:hover {
	color: #4a6fa5 !important;
	border-color: #4a6fa5;
}
/* article-view 안의 h4 중 another_category 안에 있는 것은 제외 */
.article-view h4:not(.another_category h4) {
	padding: 6px 14px;
	margin: 1.1em 0 0.9em 0;
	font-weight: 500;
	font-size: 16px;
	color: #34495e !important;
	border-left: 4px solid #4a6fa5;
	background: rgba(74, 111, 165, 0.06);
	border-radius: 6px;
	letter-spacing: 0.3px;
	transition: background 0.25s ease, border-color 0.25s ease;
}

.article-view h4:hover {
	background: rgba(74, 111, 165, 0.12);
	border-color: #2c3e50;
}

H5 헤딩 태그는 거의 사용하지 않아서 H5 스타일은 추가하지 않았습니다.😄 H4에서 :not(.another_category h4) 코드가 추가된 것은 하단의 관련 글 제목 스타일에는 적용되지 않도록 하기 위한 것입니다.

위와 같은 코드를 적용하면 다음과 같이 소제목 스타일이 바뀝니다.

처음보다는 가독성이 조금 개선된 것을 확인할 수 있습니다.

위의 스타일이 마음에 들지 않거나 다른 스타일로 바꾸고 싶다면 상기 CSS 코드를 챗GPT에 넣어서 원하는 스타일을 요청하면 챗GPT가 알아서 코드를 생성해줄 것입니다. 북클럽 등 다른 스킨을 사용하더라도 비슷한 방법으로 가능합니다.

북클럽 스킨

상기에 사용된 코드에서  article-view를 entry-content로 바꾸면 북클럽 스킨의 소제목 스타일을 바꿀 수 있습니다.

.entry-content h2 {
	font-size: 1.4em;
	margin: 1.6em 0 0.9em 0;
	font-weight: 600;
	position: relative;
	line-height: 1.5;
	color: #ffffff !important;
	background: linear-gradient(135deg, #2c3e50, #4a6fa5);
	padding: 12px 20px;
	border-radius: 0 12px 0 12px;
	font-family: 'Muli', sans-serif;
	letter-spacing: 0.6px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.entry-content h2:hover {
	transform: translateY(-3px);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.entry-content h3 {
	margin: 1.3em 0 0.8em 0;
	font-weight: 600;
	font-family: 'Titillium Web', sans-serif;
	font-size: 21px;
	line-height: 1.5;
	color: #2c3e50 !important;
	text-transform: uppercase;
	border-bottom: 2px solid rgba(74, 111, 165, 0.35);
	padding-bottom: 8px;
	letter-spacing: 1.2px;
	transition: color 0.25s ease, border-color 0.25s ease;
}
.entry-content h3:hover {
	color: #4a6fa5 !important;
	border-color: #4a6fa5;
}

.entry-content h4 {
	padding: 6px 14px;
	margin: 1.1em 0 0.9em 0;
	font-weight: 500;
	font-size: 16px;
	color: #34495e !important;
	border-left: 4px solid #4a6fa5;
	background: rgba(74, 111, 165, 0.06);
	border-radius: 6px;
	letter-spacing: 0.3px;
	transition: background 0.25s ease, border-color 0.25s ease;
}

.entry-content h4:hover {
	background: rgba(74, 111, 165, 0.12);
	border-color: #2c3e50;
}

위의 코드를 적용하면 다음과 비슷하게 소제목 스타일이 바뀝니다.

CSS 코드 추가 방법

티스토리의 스킨 파일에 CSS 코드를 추가할 수 있습니다. 

① 꾸미기 » 스킨 편집을 클릭합니다.

② html 편집 버튼을 클릭합니다.

③ CSS 탭을 클릭합니다.

④ 맨 하단으로 스크롤하여 상기에 제시된 CSS 코드를 추가하거나 직접 만든 코드를 추가합니다.

적용 버튼을 누르면 스타일이 적용됩니다. 

스타일을 체크하고 마음에 들지 않으면 코드를 변경하여 다시 코드를 추가하도록 합니다.

마치며

이상으로 오디세이 스킨을 기준으로 블로그 글의 소제목 스타일을 변경하는 방법에 대하여 살펴보았습니다. 요즘은 ChatGPT 등 AI(인공지능)를 활용하면 원하는 스타일의 소제목을 쉽게 만들 수 있습니다.

티스토리가 애드센스 광고의 앵커 광고를 금지하고 최근에는 모바일 전면 광고까지 제한함에 따라 애드센스 수익이 더욱 줄어들어서 블로그스팟이나 워드프레스 등으로 옮기는 사용자들이 증가하고 있습니다. 게시글들을 함께 옮기고 싶은 경우 워드프레스로 이사하는 것을 고려할 수 있습니다.

https://avada.tistory.com/3277

플러그인을 사용하여 티스토리 블로그를 쉽게 워드프레스로 옮기는 방법

이 블로그에서는 카카오에서 자체 광고를 도입한 직후에 애드센스 광고를 제거했습니다.😥 애드센스 수익에 연연하지 않고 정보를 공유하거나 개인적인 기록을 하는 용도로 사용한다면 티스토리가 무료이기 때문에 괜찮은 선택인 것 같습니다.

참고

https://avada.tistory.com/3752

티스토리 9월부터 애드센스 모바일 전면 광고 금지

https://avada.tistory.com/3690

티스토리 통계 오류... 고객센터에 문의해 보았습니다