티스토리 블로그의 경우 간단하게 서식에서 html을 추가하여 소제목 스타일을 만들 수 있었습니다. 그럼 워드프레스에서는 어떻게 소제목 스타일을 만들 수 있을까요. 워드프레스 소제목 스타일 만들기 하나씩 함께 만들어 보겠습니다.

목차
1. 워드프레스 소제목 스타일 4가지
워드프레스 소제목 스타일 5가지를 알려드리겠습니다. 내용을 확인해 보시고 본인이 원하는 색상이나 크기로 변경해서 본인에게 적합하게 변경 후 사용하시면 됩니다.
워드프레스 소제목 스타일을 변경하는 방법은 티스토리와 다릅니다. 티스토리의 경우 서식 설정을 통하거나 메모장에 html 코드를 저장하여 글을 쓸 때 html 코드를 불러와 사용하는 방법이 있었습니다.
그러나 워드프레스는 html 코드를 사용하기가 조금 불편하게 되어 있습니다. 테마 파일 편집기에서 html 코드를 변경하려면 아래와 같은 경고 메세지가 나타납니다.

테마 파일 편집기에서 html 코드를 수정할 경우 테마가 일부 손상되거나, 테마 업데이트 후 내가 삽입한 html 코드가 제거될 수도 있기 때문에, 테마 파일 편집기에서 html 코드 수정을 통한 워드프레스 소제목 스타일 변경을 추천 드리지 않습니다.
그럼 워드프레스 소제목 스타일은 어떻게 수정할 수 있을까요? 워드프레스 시작 화면에서 외모 – 사용자 정의하기를 클릭합니다. 사용자 정의하기를 클릭하면 아래와 같은 화면을 볼 수 있습니다. 여기서 추가 CSS를 클릭하여 소제목 스타일을 설정해 줍니다.

추가 CSS를 클릭하시고 아래 각 소제목 스타일에 맞는 코드를 숫자 1 옆에 삽입한 후 공개 버튼을 클릭하시면 설정이 완료됩니다.

1-1. 말풍선 박스
제목을 말풍선 박스로 감싸는 형태입니다. 아래 그림과 같이 좌/우 라운드로 처리하고, 파란색 배경으로 설정했습니다.

.entry-content h2 {background-color: #4374D9; color: #fff; padding: 10px 20px; border-top-right-radius: 15px; border-top-left-radius: 15px; }
.entry-content h2 :
h2는 소제목 H태그를 나타냅니다. H태그 종류에 따라 다르게 소제목 스타일을 다르게 설정할 수 있습니다. 예를들어 h2태그는 h2, h3태그는 h3로 바꿔서 적으시면 됩니다.
background-color: #4374D9 :
말풍선 박스 배경 색상을 나타냅니다. #4374D9는 색상 코드 입니다. 본인이 다른 색상을 원하시면 #4374D9 를 다른 색상 코드로 변경하시면 됩니다.
color: #fff :
글자 색상을 나타냅니다. color: #fff 를 삭제하시면 검정색으로 색상이 표현되며 본인이 다른 색상을 원하시면 #fff 를 다른 색상 코드로 변경하시면 됩니다.
삭제하셔도 무방하며, 일반적인 글쓰기 창에서 글 색상을 변경하셔도 됩니다.
padding: 10px 20px :
소제목과 박스의 간격을 나타냅니다. 10px는 소제목 위, 아래 여백, 20px는 소제목 앞쪽 여백을 나타냅니다. 본인이 원하는 간격으로 변경하시면 됩니다.
border-top-right-radius:
15px : 말풍선 박스 우측 상단 곡률이 15px 입니다. 곡률 변경은 숫자를 변경하시면 됩니다.
border-top-left-radius:
15px : 말풍선 박스 좌측 상단 곡률이 15px 입니다. 곡률 변경은 숫자를 변경하시면 됩니다.
말풍선 박스 하단에 곡률을 주고 싶으면 top 대신 bottom으로 변경하시면 됩니다.
1-2. 말풍선 박스 그라데이션
제목을 말풍선 박스로 감싸는 형태입니다. 아래 그림과 같이 좌/우 라운드로 처리하고, 배경 색상을 그라데이션으로 처리했습니다.

.entry-content h2 { background: linear-gradient(to bottom right, darkblue, skyblue); color: #fff; padding: 10px 20px; border-top-left-radius: 15px; border-bottom-right-radius: 15px; }
위쪽 설명에서 중복되는 부분은 위쪽 설명을 참고해 주시고 새롭게 반영되는 부분만 설명 드리도록 하겠습니다.
background: linear-gradient(to bottom right, darkblue, skyblue) :
그라데이션 기능이 들어가기 때문에 background 속성을 사용하며, background-color를 사용하지 않습니다.
to bottom right는 우측 하단으로 그라데이션이 적용된다는 뜻이며, darkblue 색상으로 시작해서 skyblue 색상으로 마무리 된다는 것입니다. 색상 변경을 원하시면 색상명을 darkblue와 같이 영어로 적어주시거나 background-color에서 사용한 #4374D9와 같은 색상 코드를 적어주시면 됩니다.
1-3. 색상없는 사각 라운드 박스
제목을 사각 라운드 박스로 감싸는 형태입니다. 아래 그림과 같이 모든 모서리를 라운드로 처리하고, 배경 색상이 없습니다.

.entry-content h2 {border:2px solid #4374D9; padding: 10px 20px; border-radius: 15px }
border:2px solid #4374D9 :
2px는 사각 라운드 박스 테두리 두께입니다. 숫자가 커질수록 테두리가 더 두꺼워 집니다. #4374D9는 테두리 색상을 나타냅니다. 테두리 색상을 변경하시려면 색상 코드를 변경해 주시면 됩니다.
border-radius:
15px 모든 테두리를 한번에 변경할 땐 border-radius 코드를 사용하시면 됩니다. 숫자는 모서리의 곡률을 나타냅니다. 곡률 변경은 숫자를 변경하시면 됩니다.
1-4. 라인
제목 아래 부분을 라인으로 그은 형태입니다. 소제목 앞 부분을 작은 박스로 처리하고, 배경 색상이 없습니다.

.entry-content h2 { color: #000000; border-left: 15px solid #688FF4; border-bottom: 2px solid #688FF4; padding: 5px 10px; }
color: #000000 :
글자 색상을 나타냅니다. #000000 은 검정색이며 글자 색상을 변경하시려면 색상 코드를 변경해 주시면 됩니다.
border-left: 15px solid #688FF4 :
border-left: 15px는 소제목 앞부분 작은 사각 박스이며, 숫자는 박스의 두께입니다. 숫자를 바꾸면 박스 두께를 변경할 수 있습니다. #688FF4는 박스 색상을 나타냅니다. 박스 색상을 변경하시려면 색상 코드를 변경해 주시면 됩니다.
border-bottom:
2px solid #688FF4 : border-bottom: 2px는 소제목 아래 라인 굵기를 나타내며, 숫자를 변경하시면 라인 두께를 조절할 수 있습니다. #688FF4는 라인 색상을 나타냅니다.
1-5. 작은 박스
소제목 앞부분만 작은 박스로 처리하고, 배경 색상이 없습니다.

.entry-content h2 { color: #000000; border-left: 10px solid #0060b6; padding: 5px 10px; }
기본적인 코드 설명은 1-4. 라인의 내용과 같습니다. 단지 라인만 삭제하면 작은 박스와 내용이 같습니다.
2. 소제목에 스타일 변경 시 장점
소제목에 스타일을 꼭 사용할 필요는 없습니다. 그러나 소제목에 스타일을 사용하게 되면 방문자들로 하여금 글에 대한 가독성을 높여줄 수 있습니다. 이는 곧 방문자들의 체류 시간을 조금 더 오랫동안 가져갈 수 있다는 장점이 있습니다.
체류 시간이 길어지면 블로그의 신뢰성이 올라가기 때문에 구글 노출 시 큰 장점으로 작용합니다. 굳이 소제목을 꾸며줄 필요성은 없으나, 이왕이면 가독성이 뛰어난 블로그가 사람들에게 조금 더 신뢰를 줄 수 있다고 생각됩니다.
그러나 소제목을 꾸며줄때 H태그에 따라서 변경을 주시는게 좋습니다. 모든 H태그에 동일한 소제목 스타일을 사용하게 되면 소제목 내용의 우선순위를 알아보기 힘들어지게 됩니다. 적절히 분배하는게 좋습니다.
저는 개인적으로 H2태그는 “말풍선 그라데이션”, H3태그는 “라인”, H4태그는 “작은 박스”를 사용하여 글 제목의 우선순위를 두고 있습니다.
본인에게 꼭 필요한 워드프레스 소제목 스타일을 만들어 보시기 바랍니다. 아래 워드프레스 소제목 스타일이 추가 되었습니다. 꼭 함께 확인해 보시기 바랍니다.
▶ 함께 읽으면 도움이 되는 글
- 워드프레스 특정 글자 강조 방법-형광줄 긋기 3가지 방법
- 워드프레스 특정 글자색 가장 쉬운 변경 방법
- 이슈글 블로그 포스팅의 문제점
- 워드프레스에 가장 쉽게 엑셀 표 삽입하는 방법
- 트래픽 발생을 높이는 4가지 콘텐츠 유형
이제 막 워프 시작해서 궁금한 부분이었는데, 설명이 잘 되어있네요. 감사합니다! 🙂