티스토리 소제목 서식 추가 방법 (HTML 서식 사용)

티스토리 소제목 서식 추가 방법 (HTML 서식 사용)

이번에는 블로그의 가독성과 SEO를 위해 소제목 구분을 포함한 스킨을 변경하려한다.

생각보다 간단하게 변경이 가능하니 천천히 따라해보자.

---

소제목 꾸미기 적용방법

1. 해당 서식을 추가하여 진행해야 한다. 블로그 관리 > 서식 관리 > 서식 쓰기로 이동한다.

2. 기본 모드 > HTML 모드로 변경한다.

3. HTML 문구를 추가한다. 

<h4 style="padding: 0.4em 1em 0.4em 0.5em; margin: 0.5em 0em; color: #000; border-left: 10px solid #009a87; border-bottom: 2px #009a87 solid; font-weight: bold;"data-ke-size="size20">소제목 꾸미기</h4>

 

4. 미리보기나 HTML > 기본모드로 변경하여 적용된 내용을 미리 확인한다.

5. 이제 글쓰기할 때 꾸미기 하려는 소제목이 있다면 해당 HTML 서식을 부른다.

6. 소제목을 넣을 부분에 기본모드에서 드래그 복사하거나, 해당 서식을 HTML로 복사해서 넣는 두가지 방식이 모두 가능하다

7. 소제목 문구를 내가 원하는 문장으로 수정하고 모든 글쓰기가 끝나면 완료 버튼으로 발행하면 된다.

---

소제목 꾸미기 태그 설명

일부 내용은 커스터마이징이 가능하다. 아래는 적용한 코드이다 

<h3 style="padding: 0.4em 1em 0.4em 0.5em; margin: 0.5em 0em; color: #000; border-left: 10px solid #009a87; border-bottom: 2px #009a87 solid; font-weight: bold;" data-ke-size="size23">소제목 꾸미기</h3>

 

커스터마이징 되는 영역은 스스로 조정해가면서 정리하면 된다.

출처 TCP School, 각 태그가 표현하는 속성은 이걸 참고하면 좋다.

코드	설명
padding: 0.4em 1em 0.4em 0.5em; margin: 0.5em 0em	크기 부분이니 숫자 조정해보며 조정
color: #000	padding 영역의 글색깔이다. #000은 검은색
border-left: 10px  solid #009a87	왼쪽 선(solid) 굵기 (10px), 색 (#009a87)
border-bottom: 2px #009a87 solid	바닥 선(solid) 굵기 (2px), 색 (#009a87)
font-weight: bold	폰트 볼드체
data-ke-size="size23"	폰트 사이즈 23

색상을 변경하고 싶다면 아래의 컬러코드표 사용법과 사이트를 통해 확인해보길 바란다.

색상표, 컬러코드 사용법 및 추천 사이트

---

마무리

사실 이전 글들은 대부분 인용문구를 사용하는 바람에 폰트 크기도 그렇고 가독성이 더 떨어지게 되었다.

이번 소제목 꾸미기를 통해 가독성을 더 높일 수 있었으며, 본문에도 소제목에서 사용되는 h2 h3 h4을 마음껏 활용할 수 있기에 검색 엔진 최적화(SEO)에도 유리한 구성이 된다.

참고로 이번 코드는 Galam님의 블로그(https://galam.tistory.com/)에서 참고해서 가져왔다. 커스터마이징도 하고싶지만 우선은 기존 것으로 빠르게 사용해보고 검색율이나 효율을 따져볼 예정이다.

이 외 아래 버튼을 통해 블로그를 꾸밀 수 있는 다양한 노하우를 참고하기 바란다.

블로그 꾸미기 게시물 목록보기