본문 바로가기
기타

티스토리 글자 크기 변경, 글 간격 조절하는 방법 (모든 스킨 가능)

by 테루일 2024. 12. 1.

글 메인 이미지

 

요즘 재테크나 부업 등이 유행하면서 예전보다 블로그를 부수입 수단으로 삼는 사람이 늘었습니다. 국내 대표적으로 많이 사용하는 플랫폼은 네이버 블로그나 카카오의 티스토리 블로그가 있는데요. 특히 단가가 높은 구글 광고를 달 수 있는 티스토리 블로그에 많이들 뛰어드는 것 같습니다.

 

다만 티스토리에 대한 불만들이 있는데, 기본 폰트나 설정이 네이버보다 가독성이 좋지 않습니다. 이런 것들은 조회수에 영향을 미치기 때문에 티스토리 블로그를 오래 해온 분들이면 다들 커스텀으로 사용 중이죠. 티스토리는 기본 설정이 후진 대신(?) HTML과 CSS 편집을 지원해 높은 자유도를 보장하는 장점이 있습니다. 그럼 아래에서 본문의 글자 크기와 글 간격을 조절하여 가독성을 높이는 작업을 진행 해 봅시다.

 

 

티스토리 본문 글자 크기, 글자 간격 변경하기   

 

티스토리 블로그 글쓰기를 누르면 기본 세팅은 본문2 인데요. 본문2로 글을 써 보신분들은 아시겠지만 이게 너무 작아서 가독성이 떨어집니다. 그래서 더 큰 본문1로 바꿔 사용하게 되면 둘 사이의 크기 차이가 커서 오히려 글자가 너무 커 보이죠. 왜 이렇게 세팅되어 있는 지는 모르겠습니다만.. 안되면 우리가 바꿔야겠죠?

 

# 티스토리 글자 크기 변경

티스토리 스킨 편집

 

우선 티스토리 설정에 들어가 스킨편집을 눌러줍니다. 이어서 HTML 편집으로 들어가 주시면 되고, 이 중 CSS에서 수정을 할 겁니다. 간단히 말하면 HTML에서 물체를 불러온다고 보면 되고, CSS는 그 물체의 모양과 배치 등을 잡아주는 코드라고 보면 됩니다. 우리는 글자의 모양을 변경할 것이므로 CSS에 진입합니다.

 

CSS 상단에 보면 주석으로 목차가 적혀있는데 우리는 06번 Entry Content를 찾아가면 되는데요. 저 항목의 코드들은 글쓰기 할 때 본문의 모양을 담당합니다. 북클럽 스킨의 경우 키보드의 Ctrl+F 찾기 기능을 통해 entry-content p 를 검색 하면 바로 이동할 수 있습니다.

 

코드를 찾았으면 p { ... } 내부에 있는 코드를 수정해주면 되는데 우리는 글자 크기를 수정해 줄 것이므로 font-size를 건들면 되는거죠. 기본 사이즈 세팅이 0.9375em 인데 작기 때문에 크게 수정하면 본문 글자에 적용됩니다. 제가 추천드리는 크기는 1.055em 입니다. 모바일과 PC 모두 괜찮은 가독성을 보여주기 때문이에요.

 

티스토리 CSS 글자크기 수정

 

변경하면 아래 이미지와 같이 적용됩니다.

 

0.9375em에서 1.055em으로 변경된 본문2 글자 크기

 

 

# 스킨 별 글자 모양 CSS 코드 찾는 법

참고로 entry-content는 북클럽, 왓에버, 포스터 스킨에서 찾을 수 있는 CSS 코드이고, 다른 스킨은 코드 네임도 다릅니다. 포트폴리오, 오디세이, 레터는 article_view. 매거진은 article_cont. #1, #2 스킨은 area_view로 찾으면 해당 설정을 바꾸면 되겠습니다. 아래 정리해 드릴게요.

스킨 CSS
북클럽, 왓에버, 포스터 entry-content p{
포트폴리오, 오디세이, 레터 article_view p{
매거진 article_cont p{
#1, #2 area_view p{

 

 

# 티스토리 글자 간격 변경 조절

자 그럼 글자 간격도 변경해봅시다. 여기까지 해보셨다면 그 다음은 감이 오실 것 같은데요. 아까와 같이 CSS의 entry-content p{...} 를 찾아가봅시다. 그럼 좀 전에 변경한 font-size 아래에 line-height 코드가 적혀 있는 것이 보입니다. 이 부분을 변경하면 간단하게 우리가 원하는 글자 간격만큼 조절할 수 있습니다.

 

기본 설정은 스킨 마다 다를 수 있지만 2로 되어 있을텐데요. 그대로도 괜찮지만 저의 추천은 1.8~1.95 정도를 권해드립니다. 이 정도 간격이 눈의 피로도가 덜 해 보였습니다. 변경 전과 후를 좀 극단적으로 보여드리면 아래 이미지와 같겠네요.

 

티스토리 글간격 조절 CSS line-height

댓글