버튼 CSS 적용 방법에 이어서 오늘은 소제목 h2 h3 h4 CSS 적용하는 방법에 대해 알아보겠다.
CSS를 적용하는 이유는 콘텐츠 구조를 쉽게 파악하고, 가독성을 높임으로써 스크롤 유지 시간이 길어지도록 하기 위함이다.
글이 보기 좋을수록 방문자 이탈이 줄어들고, 체류시간이 길어지면서 SEO에도 긍정적인 영향을 준다.
h2 h3 h4 CSS 수정 방법
소제목에 CSS를 적용하는 방법은 간단하다. 우리는 차일드 테마를 설치하였기 때문에 바로 아래의 CSS를 복사 붙여넣고 업데이트만 하면 바로 적용이 된다.
- 모양 > 테마 파일 편집기
- Stylesheet 선택
- 아래 코드 복사 붙여넣기
- 파일 업데이트
소제목 CSS 코드
/* 소제목 꾸미기 */
.entry-content h2 {
background: #0272D2 !important;
padding: 8px 15px;
color: #FFFFFF;
border-radius: 15px 5px 15px 5px;
box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.entry-content h3 {
COLOR: #0272D2 !important;
padding: 5px 10px;
margin: 0 0 1em 0 ;
BORDER-LEFT: #0272D2 8px solid !important;
/*BORDER-BOTTOM: 0.1em solid #8288ff;*/
BACKGROUND-COLOR: #FFF;
}
.entry-content h4 {
COLOR: #0272D2 !important;
padding: 5px 5px;
BACKGROUND-COLOR: #FFF;
}개인적으로 소제목은 h2, h3 까지만 사용하지만, 만일의 경우를 대비해 h4까지 적용해보았다.
만약에 케이던스 테마를 사용하는데 차일드 테마에 CSS 적용이 안되는 경우에는 이전 글을 확인하여 해결하길 바란다.
