워드프레스 소제목 꾸미기 H2, H3 태그 CSS 스타일 간편 변경 방법 (원 클릭)
블로그를 운영하다 보면 어느 순간 디자인에 손을 대고 싶어지는 때가 옵니다. 특히 글을 쓰다 보면 소제목이 너무 밋밋해 보이거나, 전체적인 분위기와 어울리지 않는다고 느낄 때가 있죠. 저도 그랬습니다. 처음엔 그냥 넘어갔지만, 점점 신경 쓰이기 시작했어요. 그래서 오늘은 제가 찾아낸 간단하면서도 효과적인 워드프레스 소제목 꾸미기 방법을 여러분과 공유하려고 합니다.
목차
왜 H2, H3 태그 스타일링이 중요할까요?
소제목은 단순히 글을 나누는 역할만 하는 게 아닙니다. 다음과 같은 중요한 기능을 합니다:
- 가독성 향상: 읽기 편한 글은 방문자의 체류 시간을 늘립니다.
- 정보 구조화: 검색엔진이 콘텐츠를 이해하는 데 도움을 줍니다.
- 시각적 흥미: 잘 디자인된 소제목은 글의 매력을 높입니다.
간단한 CSS로 워드프레스 소제목 꾸미기
워드프레스에서 H2와 H3 태그의 스타일을 변경하는 것은 생각보다 쉽습니다. 아래 CSS 코드를 복사해 워드프레스의 ‘추가 CSS’ 섹션에 붙여넣기만 하면 됩니다.
/* 소제목 꾸미기 */
.single .entry-content h2 {
margin: 2em 0 0.6em 0;
font-weight: bold;
position: relative;
font-size: 25px;
line-height: 40px;
background: #4a90e2; /* 밝은 파란색 */
border: 0px solid #4a90e2;
padding: 7px 15px;
color: #ffffff; /* 흰색 */
border-radius: 5px;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
font-family: inherit; /* 기본 폰트 사용 */
}
.single .entry-content h3 {
color: #2c3e50; /* 진한 남색 */
padding: 2px 10px 10px;
text-align: left;
border-left: #4a90e2 5px solid; /* 밝은 파란색 */
margin: 2em 0 0.5em 0;
background-color: #f0f7ff; /* 매우 연한 파란색 */
border-bottom: 0.1em solid #4a90e2;
font-size: 21px;
font-weight: bold;
font-family: inherit; /* 기본 폰트 사용 */
}
코드 설명: 무엇이 바뀔까요?
이 CSS 코드는 다음과 같은 변화를 만듭니다.
H2 태그:
- 밝은 파란색 배경으로 눈에 잘 띕니다.
- 흰색 글씨로 가독성을 높였습니다.
- 부드러운 그림자로 입체감을 줍니다.
- 기본 폰트를 사용하여 사이트의 전체적인 디자인과 조화를 이룹니다.
H3 태그:
- 연한 파란색 배경으로 H2와 구분됩니다.
- 왼쪽에 파란색 선을 넣어 강조했습니다.
- 진한 남색 글씨로 읽기 쉽게 만들었습니다.
- 역시 기본 폰트를 사용하여 일관성을 유지합니다.
워드프레스 소제목 꾸미기 CSS 코드 적용 방법
- 워드프레스 관리자 페이지에 로그인합니다.
- ‘외모’ > ‘사용자 정의하기’로 이동합니다.
- 왼쪽 메뉴에서 ‘추가 CSS’를 클릭합니다.
- 위의 CSS 코드를 붙여 넣습니다.
- ‘게시’를 클릭하여 변경사항을 저장합니다.
주의할 사항과 꿀팁
font-family: inherit;를 사용하여 사이트의 기본 폰트를 그대로 사용합니다. 이렇게 하면 전체적인 디자인 일관성을 유지할 수 있습니다.- 색상 코드를 변경하여 자신의 블로그 테마에 맞게 조정할 수 있습니다.
- 모바일에서도 잘 보이는지 반드시 확인하세요.
- 필요에 따라
font-size나line-height를 조정하여 가독성을 더욱 높일 수 있습니다.
기본 폰트를 사용했을 경우의 장점
- 일관성: 사이트 전체의 디자인 일관성을 유지할 수 있습니다.
- 로딩 속도: 추가 폰트를 로드하지 않아 페이지 로딩 속도가 빨라집니다.
- 호환성: 다양한 기기와 브라우저에서 일관된 모습을 보여줍니다.
이렇게 간단한 CSS 수정만으로도 블로그의 가독성과 디자인이 크게 개선될 수 있습니다. 여러분의 블로그에 어울리는 스타일을 찾아 적용해 보세요. 필자도 이러한 방식으로 워드프레스 소제목 꾸미기를 적용하고 긍정적인 반응을 얻을 수 있었습니다. 여러분들도 시도해 보세요.
정리하며
지금까지 CSS를 변경하여 워드프레스 소제목 꾸미기 방법을 살펴보았습니다. 기본 폰트를 사용하면서도 멋진 디자인을 만들 수 있다는 것을 배우셨죠? 이제 여러분의 블로그가 한층 더 전문적으로 보일 거라 믿어요. 한번 시도해 보시고, 어떤 변화가 있는지 꼭 공유해 주세요!
끝까지 읽어주셔서 감사합니다.
함께 읽으면 좋은 글들
구글 검색 상위 노출을 위한 키워드 밀도, SEO 전문가들이 밝히는 숨겨진 비법!
