수익형 블로그 가독성 개선 - 티스토리 글자크기 변경하기 : Whatever, Poster 스킨

 

 

수익형 블로그 운영시 가독성은 매우 중요한 요소이다. 또한 수익형이 아닌 개인의 기록형 블로그라 할지라도, 본인이 과거에 쓴 글을 다시 볼 때 글씨가 작으면 눈에 잘 들어오지 않아 끝까지 다시 보지 않고 넘어가게 되는 때도 있다. 하지만 티스토리 블로그 스킨을 사용하다보면 스킨에서 정해준 크기 이상으로 글씨를 키우는 것이 어렵게 되어 있어 난관에 빠지게 된다.

 

 

 

 

본인은 티스토리 기본 스킨 중 반응형 스킨인 Whatever 와 Poster 를 자주 사용한다. 이 둘은 티스토리에서 제공하는 미니멀하고 기능적인 훌륭한 스킨이지만, 블로그 글을 쓰고 보면 항상 본문의 글자 크기가 작게 느껴져 본문 글의 서식을 모두 '본문1' 서식으로 수동으로 바꾸는 불편함이 있었다. 이에 결국 스킨의 HTML과 CSS를 직접 수정하여 스킨 전체에 적용되는 글자크기를 전반적으로 키우기로 결심했다.

 

 

내겐 너무 작은 기존 본문 글씨크기

 

 

아래에서는 본인이 스킨편집(HTML)을 통해 글씨 크기를 일괄적으로 변경한 과정을 기록하고자 한다. 본인이 거친 코드 변경 방식은 Whatever와 Poster 외 다른 스킨에서는 적용이 안 될 수 있음을 미리 짚고 넘어가고자 한다.

 

 

---

티스토리 스킨 글자크기 변경하기

 

 

1️⃣ 스킨 편집 들어가기

🔸 블로그 관리 메뉴에서 아래쪽에 위치한 꾸미기 > 스킨 편집 클릭

 

 

🔸 스킨편집 오른쪽 화면에서 [ html 편집 버튼 ] 눌러주기 (경고창 나오면 [확인])

 

 

🔸 [ CSS ] 탭으로 이동

 

 

 

2️⃣ 코드 검색

🔸 Ctrl + F 를 누르면 나오는 검색창에 data-ke-size 를 입력하여 엔터. 그러면 아래 스크린 켭쳐와 같이 텍스트 관련 코드줄로 이동하게 된다. 

검색어 : data-ke-size

 

🔸 화면에 /* 텍스트 관련 */ 아래로 보이는 6개 문단이 모두 글자 서식에 관한 코드이다.

🔸 각 중괄호({}) 안에서는 글자 사이즈(font-size)와 글자 한 줄의 높이(line-height)를 정의하고 있다.

 

 

🔸 다시 말하면, 이 구역에서 font-size 옆에 나오는 숫자(ex. 1.25em) 를 변경해주면 발행한 아티클 화면의 글씨 크기가 일괄 변경된다는 뜻이다. (... 마음에 걸리는 과거 게시물이 없으셔야 합니다)

 

🔸 각 코드 셀렉터들 다음의 글자 서식들과 관련되어 있다.

#article-view h2[data-ke-size] => 제목 1
#article-view h3[data-ke-size] => 제목 2
#article-view h4[data-ke-size] => 제목 3
#article-view p[data-ke-size='size18'] => 본문 1
#article-view p[data-ke-size='size16'] => 본문 2
#article-view p[data-ke-size='size14'] => 본문 3

 

3️⃣ 변경할 글씨 크기 결정

🔸내가 가장 바꾸고 싶은 것은 본문의 디폴트 값으로 적용되는 '본문 2'. 참고로 본문2에 해당하는 코드의 셀렉터 값이 'size16'이라고 되어 있는데, 이는 데스크탑용 코드에서 16px 에 해당하는 값과 매치된다.(16px≒1em)

 

📌 폰트사이즈로 픽셀(px)이 익숙하다면 아래의 차트를 참고해서 em 단위로 변경해주면 된다. (글자 크기로 픽셀 단위를 사용할 경우 모바일이든 데스크탑이든 글씨크기가 고정되어 반응형이 안됨)

px	em	percent
5px	0.3125em	31.25%
6px	0.3750em	37.50%
7px	0.4375em	43.75%
8px	0.5000em	50.00%
9px	0.5625em	56.25%
10px	0.6250em	62.50%
11px	0.6875em	68.75%
12px	0.7500em	75.00%
13px	0.8125em	81.25%
14px	0.8750em	87.50%
15px	0.9375em	93.75%
16px	1.0000em	100.00%
17px	1.0625em	106.25%
18px	1.1250em	112.50%
19px	1.1875em	118.75%
20px	1.2500em	125.00%
21px	1.3125em	131.25%
22px	1.3750em	137.50%
23px	1.4375em	143.75%
24px	1.5000em	150.00%
25px	1.5625em	156.25%
※ 출처: https://www.w3schools.com/tags/ref_pxtoemconversion.asp

 

 

🔸본인은 여기서 본문2의 글씨체를 기존의 본문1과 동일하게 키워주는 것이 목표인데, 그에 따라 본문1과, 제목3의 크기 또한 순차적으로 조금씩 더 커지게 조정해주어야 한다. (본문2 < 본문1 < 제목3)

 

🔸고민 끝에 아래와 같이 변경해주기로 결정했다. 이 값은 개인의 기호에 따라 조정하면 된다.

 

크기 변경 계획
- 제목3 : 1.25em → 1.375em
- 본문1 : 1.12em → 1.25em
- 본문2 : 1em → 1.12em

 

 

4️⃣ CSS 코드 수정하기

 

🔸'제목 3' 코드 수정하기

 

 

 

🔸'본문 1' 코드 수정하기

 

 

 

🔸 '본문 2' 코드 수정하기 - 본문 2 코드 블록에는 font-size 구문이 안보여서 위 코드에서 복사·붙여넣기한 뒤 em 숫자값만 변경했다. 기존에 font-size 코드가 있으면 옆에 있는 숫자만 변경하면 된다.

 

 

🔸상단 [ 적용 ] 버튼 누르기(알림창 뜨면 확인). 이후 해당 화면을 끄고 빠져나오면 된다.

 

 

 

5️⃣ 결과 : 변경 전후 비교

🔸다음과 같이 변경된 글자 서식들은 그 크기가 조금씩 커진 것을 확인할 수 있다.

 

 

---

마무리

 

본인은 일종의 기록용으로 블로그를 사용하는 경향이 크지만, 수익형 블로그에서 가독성은 곧 수익이다. 티스토리 기본 스킨의 글씨 크기가 고민이라면, 위와 같이 직접 CSS를 수정해 블로그 게시글의 전반적인 글자 크기를 조정하여, 글작성때마다 문단별로 수기 변경해주는 수고로움을 덜고, 작업 시간을 대폭 절약하는 방법을 고려해보기 바란다.