워드프레스 소제목 꾸미는 방법을 알아보겠습니다. 소제목은 H2, H3 태그를 말합니다. 제목 H1은 위의 글 제목이기때문에 본문의 소제목은 H2 부터 시작됩니다. 본문의 제목은 글자 크기로만 설정이 되어 있는데 글의 가독성을 위해 소제목을 꾸며주는것이 좋습니다.
워드프레스 소제목 CSS 입력
워드프레스 설정에서 외모 – 사용자 정의하기 – 추가 CSS 로 들어갑니다. 본문에 추가하고싶은 CSS 코드는 모두 여기 넣어주면 됩니다.
코드는 제너레이트 프레스 테마에 적용 되는 코드입니다. 다른 테마는 코드의 이름이 다르기 때문에 찾아서 적용해야합니다.
워드프레스 소제목 꾸미기 코드
아래의 코드 에서 시작부분인 .single .entry-content h2 부분이 테마가 다르면 달라지는 코드입니다. 괄호 안에 있는 코드들은 동일합니다.
아래의 코드는 h2 코드입니다. 이 블로그 글중 첫번째 소제목입니다. 아래의 코드를 복사해 추가CSS 에 넣으면 됩니다. 순서대로 글자의 굵기, 소제목 배경색상, 글자와 배경박스의 간격, 글자색상, 테두리 둥글게 표시한것입니다.
.single .entry-content h2 {
font-weight: normal;
background: #434343;
padding: 6px 10px;
color: white;
border-radius: 0 10px 0 10px;
}아래의 코드는 h3 코드입니다. 바로위의 소제목인 위아래에 까만줄이 있는 모양입니다. 순서대로 글자색상, 글과 제목박스의 간격, 배경색상, 윗줄의 굵기와 색상, 아랫줄의 굵기와 색상입니다.
.single .entry-content h3 {
color: #434343;
padding: 6px 10px;
background-color: #fafafa;
border-top: 2px solid #434343;
border-bottom: 1px solid #434343;
}코드를 입력후 숫자를 변경해보시면 어느부분이 바뀌는지 알 수 있습니다. 숫자 부분은 소제목의 크기, 글자와의 위아래 좌우 여백을 뜻하는 것입니다. 숫자를 바꾸면서 본인의 테마에 맞추시기 바랍니다.
색상 코드 보기
색상은 #434343; 과 같이 표시되어있는데 색상표를 보시려면 네이버에서 색상 팔레트를 검색하시고 원하는 색상을 찍으면 위에 숫자가 나옵니다. 그것을 입력해주면 됩니다.
소제목 꾸미는 방법을 알아보았습니다. 소제목을 깔끔하게 꾸며두어야 글이 확실히 나뉘어져 보여 가독성이 조금이라도 좋아지는것 같습니다.
저는 변덕이 심해서 소제목의 모양이 언제까지 갈지 모르겠지만 아직까지는 만족스럽네요. 사실 벌써 한번 바뀐겁니다.
티스토리에서 쓰던 소제목 모양이 있는데 이상하게 워드프레스에서는 가독성이 떨어져보여 바꾸었습니다.