본문 글자크기 및 줄간격 수정하기 (북클럽 스킨)

티스토리 블로그에 글을 쓸 때 글자크기가 본문 1, 2, 3으로 정해져 있고 따로 사이즈를 지정할 수가 없지요?

 

처음에 티스토리를 시작하면서 글자 크기 조정을 찾아 메뉴를 한참 들여다보았던 기억이 납니다.

 

그리고 줄간격(글간격) 또한 지정할 수 없어 가독성 있게 보이고 싶은데 조정이 안되어 불편한데요.

 

티스토리에서 내가 원하는 사이즈로 글자 크기를 변경하고 줄 간격을 조절하기 위해서 스킨편집의 html 편집으로 가서 html 태그를 수정하여야 합니다.

 

 

저는 네이버블로그만 했었기에 처음엔 참 헤맸던 기억이 나네요. 네이버 에디터에 익숙해서 티스토리 적응에 시간이 많이 걸렸습니다.

 

오늘은 많이들 사용하시는 북클럽 스킨에서 어느 부분을 수정하면 되는지 포스팅해 보겠습니다.

 

추가로, PC(데스크탑)로 볼 때와 모바일로 볼 때 수정하는 부분이 다르니 이 또한 아래에서 꼭 확인하시길 바랍니다.

 

 

글자 크기, 줄 간격 조정 (PC 버전 모습부터)

먼저 관리자 --> 스킨 편집 --> html 편집으로 들어가 줍니다. 티스토리 블로그를 하려면 가장 익숙해져야 할 메뉴입니다.

 

html 편집 메뉴에서 CSS로 들어가 줍니다.

글자가 어떻게 보이는지 같은 미적 요소는 웬만하면 전부 CSS에서 찾을 수 있습니다.

 

여기서 .entry-content p { 를 검색해줍니다. 아마 두 개의 검색결과가 나올 것입니다.

 

이 중 1439번 줄 근처에 있는 코드를 찾습니다. 주석이나 태그 수정을 하신 분은 1439번과 번호가 조금 다를 수 있습니다.

그 근처에 있는 코드 중에서 찾으시면 됩니다.

 

.entry-content p { 태그 아래에 아래와 같이 되어 있는 부분 보이시죠?

  font-size: 0.9375em;

  line-height: 2;

font-size는 글자 크기이고 line-height는 줄 간격입니다. 이 부분의 숫자를 원하는 수치로 변경해주시면 됩니다.

 

가독성이 좋은 폰트 크기는 16~18px 사이라고 하니 원하는 크기로 0.9375em 부분을 수정해줍니다. em도 글자크기 단위인데 px로 수정해도 무방합니다. 17사이즈로 하고 싶으시면 17px 로 바꿔주시면 됩니다.

 

줄간격은 저는 그냥 2로 두었습니다. 크게 불편하지 않은 것 같아서요. 이 부분도 바꾸고 싶으시면 수치를 변경하여 입력하시면 됩니다.

 

 

모바일 화면에서 보이는 줄간격 수정하기

위에서 수정한 것은 데스크탑, PC로 볼 때 본문모습에 대한 수정이었습니다. 모바일은 다른 태그를 수정해야 합니다.

 

다만 글자크기는 위에서 조정한 대로 모바일에서도 잘 적용됩니다. 즉 모바일에서는 줄간격만 수정해주면 됩니다.

 

태그는 똑같이 찾으시면 됩니다. 처음에 .entry-content p { 를 검색시 두 가지 결과가 나왔을 텐데요, 두 번째 결과를 찾으시면 됩니다.

 

2941번 근처에서 두 번째 결과를 찾을 수 있습니다. 여기서 line-height 를 수정해주시면 됩니다.

 

기본설적은 1.625rem 인데 rem은 빼셔도 됩니다. 저는 이것을 1.625rem --> 1.8로 수정해주었습니다. 각자 원하는 수치를 넣어서 적용해 보시고 보기에 좋은 숫자로 바꿔주시면 됩니다.

 

 

위와 같이 적용하시면 PC에서도 모바일에서도 가독성 좋은 포스팅이 되도록 수정할 수 있습니다.