워드프레스 소제목 꾸미기 개요
소제목 정의
먼저, 워드프레스 소제목이라 함은, Heading 이라하여 H1, H2, H3를 설정하는 부분을 말한다. 우리 일상적으로 글을 읽을 때 긴 문장이던 짧은 글을 읽던 간에 중간 중간 부제목 또는 소제목이 있는 것을 알 수 있다. 워드프레스에서도 독자의 편의성을 위해 이러한 기능을 마련했다고 보면 된다. 우리가 지난 번 목차에 만들기(워프 목차 쉽게 만들기-클릭)에서 설명 하였듯 이 역시 가독성에 꽤나 중요한 부분이라 할 수 있다.
소제목 사용의 장점
장점의 요지를 말하면, 평소에 워드프레스로 글을 쓸 때, 소제목(Heading)을 안넣고 글을 쓰고 있으셨던 분이라면 일단 무조건 넣는 걸 추천 드린다. 위에도 언급하였지만 글의 길이가 늘어날수록 읽는 사람에 따라 피로감이 전해질 수 있다.
그렇기에 ①문장의 구성이 바뀌는 또는 ②맥락이 달라지는 부분마다 소제목을 넣어주어 글을 읽는 데 도움이 될 수 있기 마련이다. 이러한 독자의 심리적 반응이 결과적으로 구글SEO 점수에도 영향을 줄 수 있다고 하니, 꼭 설정하여 넣어 줄 수 있도록 하자.
그리고 이번 포스팅에서는 단순히 소제목을 넣는 것을 넘어 소제목을 색깔이나 폰트 등에서 어느정도 꾸며주어 조금 더 가독성을 올릴 수 있게 해주는 역할을 배워볼 것이다. 생각보다 어렵지 않기에 천천히 잘 보면서 따라오시면 된다는 말씀을 드리겠다.
워드프레스 소제목 꾸미기 본론
소제목 스타일 코드 삽입(추가CSS)
먼저, 이번에 익힐 소제목 스타일은 워드프레스 GeneratePress 테마를 기반으로 설명 드리는 점 참고하시기 바란다. 소제목 스타일을 변경할 때, 기본적으로 CSS 코드를 변경 또는 응용하여 바꿀 수 있다.
워드프레스 Tip 관련하여 많은 분들이 올려주셨지만 코드를 적은 분들은 드물었다. 우리는 아래의 코드를 입력하여 변경해보도록 하자. 위치는 아래와 같다.
▶ 워드프레스 외모 → 사용자 정의하기 → 추가CSS
/* 소제목 꾸미기 시작 */
.single .entry-content h1 {
margin: 1.15em 0 0.6em 0;
font-weight: normal;
position: relative;
font-size: 25px;
line-height: 40px;
background: #000000;
border: 1px solid #fff;
padding: 5px 15px;
color: white;
border-radius: 0 10px 0 10px;
box-shadow: inset 0 0 5px rgba(53,86,129, 0.5);
font-family: 'Muli', sans-serif;
}
.single .entry-content h2 {
margin: 1.15em 0 0.6em 0;
font-weight: normal;
position: relative;
font-size: 25px;
line-height: 40px;
background: #003458;
border: 1px solid #fff;
padding: 5px 15px;
color: white;
border-radius: 0 10px 0 10px;
box-shadow: inset 0 0 5px rgba(53,86,129, 0.5);
font-family: 'Muli', sans-serif;
}
.single .entry-content h3 {
COLOR: #003458;
PADDING-BOTTOM: 10px;
TEXT-ALIGN: left;
BORDER-LEFT: #003458 10px solid;
padding: 3px 9px;
margin: 30px 0 20px 0;
BACKGROUND-COLOR: #FFF;
BORDER-BOTTOM: 2px solid #003458;
font-size: 1.2em;
font-weight: 700;
}
/* 소제목 꾸미기 끝 */위의 코드를 복사 한후, 추가CSS로 들어가 아래의 빨간 색 부분에 복사하여 붙여 넣어주시면 된다. 참고로 H1도 넣었으나 거의 쓰지 않기에 제외시켜줘도 된다.
보통 제너레이트프레스 같은 경우, 추가CSS에 코드를 알맞게 넣게 되면 사진과 같이 미리보기에서 바로 변경이 되기 때문에 수정이 간편하다고 볼 수있다. 잘 넣으셨다면 아래의 사진과 같이 소제목(Heading)이 변경 되셨을 것이다.
다들 변경 되셨는가?
만약 변경되지 않는 다면, 테마 내의 스타일시트, style.css 파일을 변경하면 될 것이다. 그리고 주의할 점은 변경전에 꼭 백업을 해둬야 한다. 원하는 스타일로 변경을 했다면 왼쪽 상단의 공개 버튼(저장)을 클릭해줘야 저장이 되어 실제 내 홈페이지에 반영 될 수 있다.
이어 티스토리 소제목 스타일 변경을 원하시는 분들은 아래의 코드를 복사하여 붙여 넣기 바란다.
/* 티스토리 소제목 꾸미기 시작 */
.entry-content h2 {
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
COLOR: #666;
PADDING-BOTTOM: 10px;
TEXT-ALIGN: left;
BORDER-LEFT: #003458 8px solid;
padding: 3px 9px;
margin: 30px 0 20px 0;
BACKGROUND-COLOR: #003458;
BORDER-BOTTOM: 1px solid #003458;
}
.entry-content h3 {
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
COLOR: #2E86B9;
PADDING-BOTTOM: 10px;
TEXT-ALIGN: left;
border-left: rgba(85, 85, 91, 0.5882352941176471) 8px solid;
padding: 3px 9px;
BACKGROUND-COLOR: #003458;
border-bottom: 1px solid rgba(85, 85, 91, 0.5882352941176471);
margin-bottom: 15px;
}
.entry-content h4 {
padding: 3px 9px;
border-left: 5px solid #eeeeee;
border-bottom: 1px solid #eeeeee;
margin-bottom: 15px;
}
/* 티스토리 소제목 꾸미기 끝 끝*/참고로 색깔 부분은 제대로 테스트하지 않았기에 미리보기나 저장 후 확인하면서 변경 해주셔야 할 것이다.
구체적 스타일 변경(색깔, 폰트 등)
만약 색깔이나 글씨체(폰트)를 변경 하시고 싶을 경우, 코드에서 조금 씩 손을 대주면 된다. 다른 건 크게 손댈 것 없고,
font-size 폰트 크기
Background 소제목 글자 배경색
color 글자색
Border-left 왼쪽 벽색
Border-bottom 밑줄 색
font-family 글꼴
정도만 본인 취향에 맞게 변경해주시면 될 것이다. 그 외에도 패딩이나 마진은 내측 외측 여백 부분을 말하는 것인데 이것 또한 취향대로 바꾸어 주셔도 된다.
이어 코드명으로 된 색상이 아닌, 색깔로 보는 워드프레스 색상표를 보시려면, Encyoclorpedia님의 사이트(클릭)를 참고하시면 도움 될 것이다.
결론
소제목 스타일을 입히지 않을 때와 입혔을 때 변화를 보자. 어떤 글이 더 읽기에 편한가? 소제목 꾸미기와 관련하여 이제 막 시작하신 분들이라면 먼저 Heading에 대한 기초적은 부분을 익히시고 접근하시는 것도 바람직하다고 보는 바다.
사실 그렇게 어려운 부분이 아님에도 포탈사이트 상위에 등록된 검색글에 보면 어려운 코딩 내용과 본인만의 워드프레스 용어로 글을 나열하고 있어 접근하기에 마냥 쉽지 않게 느껴질 수도 있다고 보는 바다. 참고로 헤딩 색깔이나 형태만 조금 바꿔주어도 재방문률이 30% 증가한다는 플러그인 관계자들의 말들이 었었던 만큼 꼭 공부해서 적용시켜보자.
다시 말씀 드리지만, 안되는 부분은 다시 올라가서 보시며 코드가 빠진 것이 없는지 잘 살펴보면서 체크하도록 하다.
[ 참고 ]
분명 소제목 수정을 하다 손목도 아프고 손가락도 아플 수 있다. 이에 좋은 관리가 필요한데 그러면 좋은 컴퓨터 장비가 필요하다. 내 작업을 오래할 수 있게끔 좋은 마우스 같은 건 필수로 작업을 하자.
*해당 링크는 쿠팡파트너스의 일환으로, 이에 따른 일정액의 수수료를 받을 수 있습니다.
