일부 워드프레스 테마에서 소제목의 폰트 크기, 폰트 색상, 행간 등의 스타일 변경할 수 있는 옵션을 제공합니다. 보다 자유롭게 소제목 스타일 변경을 원하는 경우 커스텀 CSS로 변경이 가능합니다. 기본적인 CSS를 알면 수월하게 헤딩(h2, h3, h4, h5 등) 스타일을 변경할 수 있습니다.
워드프레스에서 CSS를 적용하는 기본적인 방법은 "워드프레스에 CSS를 적용하는 방법"을 참고해보세요. 기본적인 CSS를 익히는 데 그리 많은 시간은 소요되지 않을 것입니다.
워드프레스 소제목 스타일 변경하기
먼저 테마에서 소제목 스타일을 변경할 수 있는 옵션을 제공하는지 확인해보시기 바랍니다. 테마 옵션에서 헤딩 스타일을 지정할 수 있는 옵션이 제공되지 않거나 보다 정교하게 스타일을 지정하고 싶은 경우 CSS 코드로 스타일을 변경할 수 있습니다.
아래의 방법을 응용하여 모든 테마에서 헤딩 스타일을 바꿀 수 있습니다. 워드프레스뿐만 아니라 티스토리 블로그, 구글 블로거 등에서도 비슷하게 적용이 가능합니다.
GeneratePress 테마
GeneratePress 테마의 유료 버전인 GP Premium이 설치된 경우 외모 > 사용자 정의하기 > Typography > Headings에서 소제목 스타일을 지정할 수 있습니다.
무료 버전에서는 보통 타이포그래피 옵션이 제공되지 않습니다. Typography 메뉴가 표시되지 않는다면 외모 > GeneratePress에서 Typography 모듈을 활성화하시기 바랍니다.
Headings 섹션에서는 H1부터 H6까지의 헤딩 스타일을 지정할 수 있습니다. 지정 가능한 옵션은 제한적입니다. 다음과 같은 스타일을 설정할 수 있습니다.
- Font family
- Font weight
- Text transform
- Font size (글자 크기)
- Line height (행간)
- Bottom margin (아래 여백)
커스텀 CSS를 통해 스타일을 변경하고 싶은 경우 외모 > 사용자 정의하기 > 추가 CSS 섹션에 다음과 같은 형식으로 CSS 코드를 추가할 수 있습니다.
/* GeneratePress 테마 소제목 스타일 지정하기 */
h1.entry-title {
// 원하는 스타일
}
.single .entry-content h2 {
// 원하는 스타일
}
.single .entry-content h3 {
// 원하는 스타일
}
.single .entry-content h4 {
// 원하는 스타일
}
.single .entry-content h5 {
// 원하는 스타일
}
.single .entry-content h6 {
// 원하는 스타일
}Page Hero를 사용하는 경우 H1 태그의 선택자(Selector)가 조금 다릅니다.
.single .page-hero h1 { }예를 들어, 다음은 제 블로그에 한동안 사용되었던 H2, H3, H4 스타일입니다.
/* 워드프레스 GeneratePress 테마 소제목 헤딩 스타일 변경하기 */
.single .entry-content h2 {
font-size: 1.3em;
margin: 1.15em 0 0.6em 0;
font-weight: normal;
position: relative;
text-shadow: 0 -1px rgba(0,0,0,0.6);
line-height: 40px;
background: #355681;
background: rgba(53,86,129, 0.8);
border: 1px solid #fff;
padding: 5px 15px;
color: white;
border-radius: 0 10px 0 10px;
box-shadow: inset 0 0 5px rgba(53,86,129, 0.5);
font-family: 'Muli', sans-serif;
}
.single .entry-content h3 {
margin: 1em 0 0.65em 0;
font-weight: 600;
font-family: 'Titillium Web', sans-serif;
position: relative;
text-shadow: 0 -1px 1px rgba(0,0,0,0.4);
font-size: 22px;
line-height: 40px;
color: #355681;
text-transform: uppercase;
border-bottom: 1px solid rgba(53,86,129, 0.3);
}
.single .entry-content h4 {
padding: 3px 9px;
border-left: 5px solid #eeeeee;
border-bottom: 1px solid #eeeeee;
margin-bottom: 15px;
}위의 CSS 코드를 적용하면 다음과 같이 소제목 스타일이 바뀝니다. (위의 코드에서 색상 등은 블로그 분위기에 맞게 적절히 변경하시기 바랍니다.)
다른 테마에서도 동일하게 응용이 가능합니다. 테마에 따라 선택자가 다를 수 있습니다. 선택자 부분만 확인하여 바꾸어 주면 됩니다.
뉴스페이퍼 테마
뉴스페이퍼 테마의 경우 Newspaper > Theme panel > Theme Fonts > Post title에서 블로그 글에 사용된 소제목의 스타일을 지정할 수 있습니다.
커스텀 CSS 코드로 스타일을 지정하고 싶은 경우에는 다음과 같은 코드를 사용할 수 있습니다.
/* 워드프레스 Newspaper 테마 소제목 스타일 변경하기 */
.single .td-post-content h2 {
// 스타일
}
.single .td-post-content h3 {
// 스타일
}
.single .td-post-content h4 {
// 스타일
}
.single .td-post-content h5 {
// 스타일
}"워드프레스 뉴스페이퍼 테마: 소제목 (h2, h3, h4) 태그 스타일"에서 실제 예시를 확인할 수 있습니다.
아바다 테마
베스트 셀링 테마인 Avada를 사용하는 경우 Avada > Options > 타이포그래피 > Heading Typography에서 H1 ~ H6 헤딩과 포스트 제목 타이포그래피를 설정할 수 있습니다. CSS 코드로 스타일을 지정하고 싶은 경우 다음과 같은 코드를 사용할 수 있습니다.
/* Avada 테마의 소제목 스타일 지정하기 */
.post-content h2 {
// 스타일
}
.post-content h3 {
// 스타일
}
.post-content h4 {
// 스타일
}
.post-content h5 {
// 스타일
}
.post-content h6 {
// 스타일
}Divi 테마
Elegant Themes의 Divi 테마는 아바다 테마와 비슷한 판매량을 기록하고 있는 베스트셀링 테마 중 하나입니다("아바다 테마와 Divi 테마 비교" 참조).
Divi 테마에서는 다음과 같은 CSS를 사용하여 소제목 스타일을 조정할 수 있습니다.
/* Divi 테마의 헤딩 스타일 지정하기 */
.et_pb_post .entry-content h2 {
// 스타일
}
.et_pb_post .entry-content h3 {
// 스타일
}
.et_pb_post .entry-content h4 {
// 스타일
}
.et_pb_post .entry-content h5 {
// 스타일
}위의 코드가 작동하지 않는 경우에는 다음 CSS 코드 형식으로 시도해볼 수 있습니다.
.single .entry-content h2 {
// 스타일
}엔폴드 테마
Enfold 테마의 경우 Enfold > Theme Options > Advanced Styling에서 HTML 태그와 헤딩, 메뉴 등 다양한 요소의 스타일을 사용자 정의할 수 있습니다.
커스텀 CSS로 헤딩 스타일을 지정하고 싶은 경우 GeneratePress 테마에서 사용되는 것과 동일한 CSS 코드를 사용할 수 있습니다(상기의 "GeneratePress 테마" 섹션 참조).
플랫섬 테마
우커머스용 테마인 Flatsome을 사용하는 경우 외모 > 사용자 정의하기 > Style > Typography에서 타이포그래피 관련 설정을 할 수 있습니다. 소제목은 Headlines에서 스타일을 지정할 수 있지만, 상세한 설정은 제공되지 않습니다.
소제목(헤딩) 스타일이 마음에 들지 않으면 위의 "GeneratePress 테마" 섹션에서 소개한 CSS 코드를 응용하여 스타일을 변경할 수 있습니다.
아스트라 테마
아스트라(Astra) 테마를 사용하는 경우 외모 > 사용자 정의하기 > 글로벌 > 글자 섹션에서 본문 폰트와 헤딩 태그(H1 ~ H6)의 폰트 굵기, 폰트 패밀리(Font Family), 줄 간격 등을 조정할 수 있고, 외모 > 사용자 정의하기 > 글로벌 > 색상 섹션에서 색상을 설정할 수 있습니다. 색상은 모든 헤딩 태그에 대하여 동일한 색상을 지정할 수 있습니다.
CSS로 소제목 스타일을 지정하고 싶은 경우 다음과 같은 CSS 코드를 사용할 수 있습니다.
/* Astra 테마 소제목 스타일 지정하기 */
.ast-single-post .entry-title {
// 글 제목 스타일
}
.entry-content h2 {
// 스타일
}
.entry-content h3 {
// 스타일
}
.entry-content h4 {
// 스타일
}
.entry-content h5 {
// 스타일
}
.entry-content h6 {
// 스타일
}마치며
이상으로 워드프레스에서 소제목 스타일을 지정하는 방법에 대하여 살펴보았습니다. 보통 테마에서 제공하는 기본 스타일을 사용하는 것이 무난한 것 같습니다. 저는 헤딩 스타일을 여러 번 바꾸었는데, 지금은 심플한 스타일로 변경했습니다.
다른 블로그의 스타일을 그대로 따라하기 보다는 운영 중인 블로그의 분위기에 맞도록 소제목 스타일을 변경하는 것이 바람직해 보입니다.
댓글 남기기