[티스토리] 본문 소제목 꾸미기 : 쉽게 내용 구분하고 가독성도 높이자!

안녕하세요! 토미타미입니다. 오늘은 티스토리 본문에 있는 소제목을 꾸며보도록 하겠습니다. 예전에는 귀찮아서 같은 문단 모양으로 소제목과 본문 글을 나누어서 작성하고 했었는데. 어느 글을 보다가 구글 SEO에서 좋은 평가를 받기 위해서는 책의 구성처럼 제목과 본문 그리고 인용 같은걸 잘 활용해서 글을 작성해줘야 좋다고 말씀해주시더라고요. 보기 좋은 떡이 맛도 좋다고 하던가요 ㅎㅎ 그걸 본 다음부터 소제목을 사용해서 본문 내용을 구분해서 작성하는 편인데. 확실히 기존보다 보는 입장에서 찾고 있는 내용을 찾기 수월해진 것 같아 좋았습니다.

 

기존에는 본문과 소제목을 구분하고자 텍스트 양 옆에 자체적으로 띄어쓰기해 빈 공간을 준 후에 텍스트 배경색을 변경했었네요. 자주 쓰는 소제목은 서식에 저장해서 사용했었죠. 그냥 CSS를 변경했으면 됐는걸 왜 이제야 생각이 나는지 ㅠㅠ. 보시면 알겠지만 수기로 진행했던 거라 모바일에서 보면 사진처럼 다음칸까지 텍스트 배경색이 넘어가 있고 참 허접해 보이네요. 그럼, 소제목 꾸미는 방법 알려드리도록 하겠습니다.

 

함께 보면 좋은 포스팅:

[티스토리] 상단 헤더(header)에 검색창 구현하기

Whatever스킨 - 사이드바 인기글/최신글 썸네일 추가

포스팅 URL 주소 통일해야하는 이유!

[티스토리 블로그] 목차를 이용해서 해당 소제목으로 바로 이동시키기

 

 

 

 

소제목 : CSS 수정

Font-size: 글씨 크기
Padding-left: 글씨 왼쪽 공백
Border-left: 왼쪽 선 [15px(선 굵기) solid(선 종류) #5f9ea0(색상)]
Background-color: 배경색

CSS 수정해서 소제목에 배경색을 넣고 왼쪽 편에 굵은 선을 추가해서 본문과 소제목이 확실히 구분이 가도록 변경해주도록 하겠습니다. 저 같은 경우는 저렇게만 변경하기 허전해 보여서 폰트 크기를 1.5em으로 제목 2와 동일한 크기로 했고 색상은 흰색 그리고 글씨 왼쪽에 공백까지 추가로 설정했습니다.

변경하는 방법은 [스킨 편집-HTML 편집-CSS] 순으로 들어간 다음 검색 기능으로 entry-content h1~4를 찾아주세요. 저는 본문 소제목으로 제목 3을 사용하기 때문에 entry-content h3 부분 값을 변경했어요. '배경 색과 왼쪽 작은 바'만 추가하고 싶으시면 Background-color와 border-left만 추가해주시면 되고 잘 모르시면 아래 값을 복사해서 해당 위치에 덮어쓰기 해도 상관없어요.

 

.entry-content h3 {
 clear: both;
 margin: 29px 0px 22px;
 font-size: 1.5em;
 line-height: 1.5;
 color: #fff;
 padding-left: 10px ;
 background-color: #51bec2;
 border-left: 15px solid #5f9ea0;
}

 

■본문 텍스트 색상변경

entry-content h4 아래 있는 entry-content p에서 color를 #666에서 #000으로 변경해주시면 됩니다.

바꾸는 김에 본문 텍스트 기본 색상을 변경해주겠습니다. 본문 텍스트 기본색이 회색으로 설정돼 있어서 포스팅 작성 중엔 검은색과 잘 분간이 안 됩니다. 매번 미리보기로 모든 텍스트가 검은색으로 변경됐는지 일일이 확인을 하지 않으면 글 중간중간 회색도 있고 검은색도 있고 했었는데. 머리가 나쁘면 몸이 고생한다더니, 그냥 CSS값 바꾸면 됐는데. 그게 뭐가 그렇게 귀찮았는지 이제야 변경했네요!

 

.entry-content p {
 margin-bottom: 22px;
 word-break: break-all;
 font-size: 16px;
 line-height: 1.5714;
 color: #000;
}

 

 

 

 

변경 전 / 후

소제목 변경 전/후

소제목을 변경 전과 후를 비교해보겠습니다. 변경하고 난 후가 확실히 눈에 띄고 보기에 좋네요. 글씨 크기로 사실 어느 정도 소제목이란 걸 구분을 주긴 하지만 왼쪽 사진에서 보이는 것처럼 차이가 없어서 핸드폰으로 보거나 빠르게 내리다 보면 소제목으로 못 보고 그냥 지나칠 때도 있더라고요. 가독성을 높이는 것이 구글 SEO에 어느 정도 도움이 된다는 얘기도 있으니까. 여러분도 소제목 한번 변경해 주시는 건 어떤가요? 포스팅 여기서 마칠게요!