워드프레스 소제목 스타일 변경하기(아바다, 엔폴드, 뉴스페이퍼 테마 外)

일부 워드프레스 테마에서 소제목의 폰트 크기, 폰트 색상, 행간 등의 스타일 변경할 수 있는 옵션을 제공합니다. 보다 자유롭게 소제목 스타일 변경을 원하는 경우 커스텀 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: linear-gradient(rgba(53, 86, 129, 0.8), rgba(53, 86, 129, 0.8)), #355681;
    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 {

// 스타일
}

마치며

이상으로 워드프레스에서 소제목 스타일을 지정하는 방법에 대하여 살펴보았습니다. 보통 테마에서 제공하는 기본 스타일을 사용하는 것이 무난한 것 같습니다. 저는 헤딩 스타일을 여러 번 바꾸었는데, 지금은 심플한 스타일로 변경했습니다.

다른 블로그의 스타일을 그대로 따라하기 보다는 운영 중인 블로그의 분위기에 맞도록 소제목 스타일을 변경하는 것이 바람직해 보입니다.