소제목 가장 중요한 H2에 눈에 띄는 주황 톤을 적용하여 강조하고, 나머지 H3와 H4는 모노톤으로 통일하여 디자인의 안정감을 높이는 방법을 소개합니다.
CSS 적용은 이렇게! ‘추가 CSS’ 활용 가이드
Onepress 테마의 H2, H3, H4 스타일을 바꾸는 가장 쉽고 안전한 방법은 워드프레스의 ‘추가 CSS’ 기능을 활용하는 것입니다. 이 방법을 통해 테마 파일을 직접 건드리지 않아도 됩니다.
- 워드프레스 관리자에서 외모(Appearance) > 사용자 정의(Customize)로 이동합니다.
- 메뉴 중 가장 아래에 있는 추가 CSS(Additional CSS)를 클릭합니다.
- 아래의 CSS 코드를 복사하여 붙여넣고 상단의 게시 버튼을 눌러 저장합니다.
변경 전후 비교
아래 CSS를 적용했을 때, H2는 산뜻한 주황으로 강조되고 H3, H4는 모노톤으로 깔끔하게 정돈된 모습을 볼 수 있습니다.
1. 변경 전 (Onepress 테마 기본 스타일)
기본 Onepress 테마에서 H2, H3, H4 소제목이 아래와 같이 보입니다.
2. 변경 후 (주황 강조 & 통일 디자인 적용)
아래 이미지는 적용 후 소제목들이 확실하게 구분되고 구조화된 모습입니다.
H2, H3, H4 CSS 코드
주황 톤 H2가 돋보이고, H3/H4가 구조적으로 글을 받쳐주는 디자인입니다.
본문 H2 스타일 예시 (주황 강조)
가장 중요한 대분류 소제목입니다. 짙은 주황색 글자와 밝은 주황색 라인으로 강조됩니다.
/* H2 스타일 */
.single .entry-content h2 {
color: #FF5722;
border-left: 6px solid #FFAB91;
font-size: 28px;
font-weight: 700;
}
본문 H3 스타일 예시 (모노톤)
H2 아래의 중분류 소제목입니다. H2의 강조를 해치지 않도록 깔끔한 짙은 회색으로 유지됩니다.
/* H3 스타일 */
.single .entry-content h3 {
color: #555555;
border-left: 4px solid #cccccc;
font-size: 22px;
font-weight: 600;
}
본문 H4 스타일 예시 (가장 작은 분류)
가장 작은 단위의 소제목입니다. 라인을 얇게 처리하고 글자색을 더 연하게 하여 가장 낮은 계층임을 표현했습니다.
/* H4 스타일 */
.single .entry-content h4 {
color: #777777;
border-left: 2px solid #dddddd;
font-size: 18px;
font-weight: 500;
}
마무리
매력적인 주황 톤 CSS를 활용하여 Onepress 테마의 소제목 디자인을 완성했습니다.
이제 적용한 후 적용된 워드프레스를 확인해보세요 !