티스토리 소제목 (h태그) 글자 크기 변경 및 추가하는 방법

티스토리는 소제목의 글자 크기를 세 가지 크기로 조절할 수 있도록 제공하고 있습니다. 

(제목 1 ~ 3 : 1에서 3으로 갈수록 글자 크기는 작아집니다. )

 

검색엔진 최적화 (SEO)를 위해 소제목 (h태그)을 나열하여 글을 작성하는 것이 구글 상단 노출에 유리하지만 글자 크기가 다르다 보니 자칫 글 디자인을 해쳐 가독성 면에서는 다소 불리할 수도 있는데요.

 

상단 노출도 되고 가독성까지 동시에 해결할 수 있는 방법이 있습니다. 

 

 

 

h태그 크기 변경 방법 (북클럽 스킨 기준) 

 

소제목, 즉 h태그 크기를 변경하면 됩니다. 우선 블로그 관리 홈에서 스킨 편집을 클릭합니다. 

 

그다음 오른쪽 위 'html 편집' 버튼을 클릭하면 화면 오른쪽에 블로그 관련 코드들이 쭉 나옵니다. 여기서 HTML 옆 CSS를 클릭합니다. 

 

 

h태그 수정 방법 참고 화면 사진

 

CSS창으로 넘어와서 06. 의 Entry Content를 선택 후  Ctrl + F키를 누른 뒤 엔터를 치면 코드에 삽입되어있는 Entry Content로 데려다줍니다. 

 

 

h태그 수정 방법 참고 화면 사진

 

Entry Content 밑에 entry-content h1부터 h4까지 반복되는 코드를 볼 수 있는데요. h1은 주제목, 즉 글의 제목이고 h2 ~ h4가 소제목입니다.

 

소제목 크기는 파란색 네모로 표시된 font-size의 숫자를 바꿔주면 되는데 같은 크기로 변경하기로 했으니 h2부터 h4까지 1.3em으로 통일시켜줬습니다. 

 

변경 후에는 오른쪽 위 ① 적용 버튼을 누르고 ② 새로고침을 누르면 됩니다. 

 

 

 

소제목 (h태그) 개수 추가 방법

 

티스토리에서 제공하는 소제목의 글자 크기는 3가지뿐인데요. 소제목을 더 쓰고 싶을 때에는 어떻게 해야 할까요? 방법이 있습니다.

 

북클럽 스킨 기준 글쓰기 모드의 html상에서 2개 더 추가할 수 있습니다. 

 

 

h태그 개수 추가 방법 화면 참고 사진

 

h태그 개수 추가 방법 화면 참고 사진

 

제목 4와 제목 5를 추가해보겠습니다. 본문에 제목 4와 5를 적은 다음 글쓰기의 기본 모드에서 html로 변경합니다.

 

html의 제목 4를 찾아 본문을 나타내는 <p와 <p/>를 <h5, </h5>로 바꿔줍니다. h6도 같은 방법으로 바꿔주면 되는데 비교할 수 있도록 h5 만 변경해보았습니다.

 

소제목을 쓰고 싶은 자리에 소제목을 쓰고 (여기서는 제목 4) html 상에서 제목 4와 같은 줄에 있는 <p와 <p/> 대신 <h5와 <h5/>로 고쳐주면 돼요.

 

제목 4 (h5)와 제목 5 (h6)의 글자 크기도 바꿔보겠습니다. 변경 방법은 위의 내용과 동일한데 티스토리에 없는 소제목을 추가한 것이므로 h5와 h6의 코드를 따로 생성해줘야 합니다.

 

 

추가한 h태그 크기 변경 방법 참고 화면 사진

 

스킨 편집에서 CSS로 넘어와서 h태그 코드를 복사하여 붙여줍니다. .entry 부터 } 괄호까지 드래그하여 바로 아래 빈칸에 두 번 붙여 넣으면 됩니다. 

 

붙여 넣은 h4 대신 h5와 h6으로, 글자 크기는 font-size에서 바꿔줍니다. 

 

 

CSS 상에서 편집한 내용들은 모든 글에 소급 적용되니 응용해보세요!

 

 

 

 

---

 

블로그의 체류시간을 늘리는 방법 - 본문 글자 크기 변경하기

 

블로그의 체류시간을 늘리는 방법 - 본문 글자 크기 변경하기