워드프레스 헤딩 제목 꾸며서 가독성 올리기. 수익을 올리기 위해서는 글을 읽는 분 입장에서 가독성이 좋게 느껴져야 합니다.
블로그에 머무르는 시간이 곧 수익으로 연결되기 때문에 방문자가 오래 체류할수록 글쓴이에게 더 많은 수익을 가져다줍니다.
이런 이유로 가독성을 높이기 위해서 헤딩 꾸미는 법을 알아보겠습니다.
소제목 꾸미기
소제목을 꾸미게 되면 이용자가 글을 읽을 때 피로감이 떨어지게 되고, 가독성이 올라가게 됩니다. 구글에서도 SEO적으로 좋은 점수를 반영해 주기 때문에 노출에 유리하다는 장점도 있습니다.
소제목을 꾸미기 위해서 원하는 디자인을 찾아야 합니다. 헤딩을 꾸며줄 CSS 코드는 구글에 검색하셔서 원하시는 디자인을 찾는 방법이 있습니다.
원하시는 디자인을 그대로 가져오시거나 제가 사용하고 있는 코드를 사용하셔도 됩니다.
CSS 코드 가져오기
색상이나 폰트 크기 등 입맛대로 꾸며줄 수 있기 때문에 제가 쓰고 있는 코드를 가져오셔서 여러분이 디자인하셔도 됩니다.
색상만 바꿔도 디자인이 새로워지기 때문에 입맛대로 꾸미시면 될 것 같습니다.
.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를 클릭해 주시면 코드를 넣는 공백이 나오게 됩니다. 아래 사진과 같이 빈칸에 넣으시면 되겠습니다.
코드를 넣어주셨다면 미리보기로 적용이 되었는지 확인해 주세요. 잘 적용이 되셨다면, 적용을 눌러주시면 됩니다.
소제목 색상 바꿔서 새로운 느낌 주기
소제목 색상은 h2와 h3에 색상 코드를 수정하시면 됩니다. 아래 사진에 표시한 부분에 색상 코드만 바꿔주시면 자신이 원하는 색상으로 바꾸실 수 있습니다.
다른 건 글자 크기나 글꼴, 여백을 얼마나 둘 것인지 등 세팅을 할 수 있습니다. 제 개인적으로는 색상 이외에 여기서 따로 수정은 안 하셔도 될 것 같습니다.
혹은 완전히 다른 디자인을 원하신다면, 구글에서 검색하여서 가져오시면 되겠습니다.
색상 코드 찾기
색상 코드는 링크 들어가셔서 원하는 색상을 선택하시면 오른쪽 하단에 코드명이 나오게 됩니다.
코드를 그대로 복사하셔서 추가 CSS에 넣어주시기만 하면 끝납니다.
수익률 올리는 데 도움 되는 CSS 코드를 찾는다면?
글씨에 링크를 삽입하고 끝내는 것 보다 링크버튼을 만들어서 방문자 눈에 잘 띄게 해주면, 클릭률이 전자에 비해서 올라가게 됩니다.
이 또한 내부 링크를 걸어서 내 페이지로 다시 한번 방문할 수 있게 만드는 전략을 이용한다면 수익에 많은 도움이 될 것입니다.
워드프레스 헤딩 제목 꾸며서 가독성 올리는 방법에 대해서 알아보았는데요, 도움이 되셨으면 좋겠습니다. 긴 글 읽어주셔서 감사합니다.