티스토리 블로그를 운영할 때 질 좋은 글을 발행하는 것이 가장 중요하지만, 본문의 글자 크기나 본문의 너비를 변경하여 가독성 좋게 만드는 것도 매우 중요합니다.
본문 글자 크기가 너무 작으면 특히 모바일 화면에서 글자가 잘 보이지 않아 가독성이 떨어지지만, 너무 커도 집중이 잘 되지 않기 때문에 본문 글자를 적당한 크기로 조절해 주는 것이 좋습니다. 제가 최근에 새롭게 생성한 Poster 스킨을 사용하는 티스트리 블로그의 본문 글자 크기가 작아 너무 더 크게 변경해 보려고 합니다.
이번 포스팅에서는 티스토리 블로그의 본문 글자 크기를 변경하는 방법에 대해서 알려드리겠습니다. 참고로 저는 Poster 스킨을 사용 중인데, 어떤 스킨이든 본문 변경하는 방법은 크게 다르지 않습니다.
1. 본문 글자 크기 변경
본문 1·본문 2·본문 3 크기 비교
본문의 글자 크기를 서로 비교하면 다음과 같습니다.
본문 1 : 일반적으로 조합원 분양가에서 권리가액
본문 2 : 관리처분인가 전에 조합원 분담금을 예측
본문 3 : 관리처분인가 전에 비례율을 예측 계산
일반적으로 사용하는 스킨의 종류에 따란 본문 1 > 본문 2 > 본문 3 각각의 글자 크기가 다르므로 취향에 맞게 수정해 주시면 됩니다.
하지만 PC에서는 본문의 글자 크기가 작아도 괜찮지만, 화면 크기가 작아지는 모바일에서는 화면 크기에 비례하여 본문 글자 크기가 더 축소되므로 일정 크기 이상의 본문 글자 크기를 유지하는 것이 좋습니다.
대부분의 스킨에서 본문 2가 디폴트로 설정되어 있기 때문에 본문 2 글자 크기 변경에 대해서 알려드리겠습니다.
본문 2 글자 크기 변경
먼저 티스토리 블로그 관리에서 꾸미기→스킨편집으로 들어가서 HTML 편집 탭을 클릭합니다.
글자 크기, 색깔 등을 수정할 수 있는 CSS 탭을 클릭합니다.
ctrl+f를 눌러서 "entry-content p {"를 입력하여 검색합니다. 북클럽에서는 검색이 잘 되었지만, Poster 스킨에는 검색이 안될 수 있습니다.
이유는 이미 본문 2에 대한 정보들이 Poster 스킨 내에 이미 저장되어 있기 때문입니다. 하지만 아래 코드를 CSS 중간쯤에 추가하면 본문 글자 크기를 변경할 수 있습니다.
.entry-content p {
font-size: 1.08em;
}
CSS 적당한 위치에 위와 같이 본문 크기를 수정하는 CSS코드를 추가해 주고 오른쪽 상단에 적용을 클릭하시면 변경이 됩니다. 현재 이 블로그에서 사용하는 본문 크기가 1.08em이니 참고 바랍니다.
본문의 글자 크기 변경 전후로 비교해 보면 글자 크기가 커진 것을 육안으로 확인이 됩니다.
본문크기 수정 시 스킨별 CSS 검색어
Tistory Poster 스킨은 entry-content로 CSS에서 검색하면 되지만, 다른 Tistory 스킨 검색어는 다르므로 아래 스킨별 검색어를 참고 바랍니다.
| Tistory Skin |
검색어 |
| 북클럽, Poster, Whatever |
entry-content |
| 포트폴리오, 오디세이, 레터 |
article_view |
| 매거진 |
article_cont |
| #1, #2 스킨 |
area_view |
2. 포스팅을 마치며
본문의 글자 크기를 수정하는 것 이외에도 스킨 편집에서 HTML이나 CSS 수정 시 실수할 수 있으므로 반드시 미리 스킨 저장을 해두는 것을 추천드립니다.
자주 HTML이나 CSS를 수정해 보고, 원리를 이해하면 그다음부터 코드 수정하는 게 그렇게 어렵지 않게 느껴지실 겁니다.