CSS로 티스토리 블로그 글씨크기 바꾸기.

티스토리 블로그 글씨 크기는 정해져 있다?

티스토리 블로그에서 글을 쓸 때 기본으로 제공하고 있는 글씨 크기를 보면 제목 1,2,3본문 1,2,3 인용이 전부다. 때로는 여기에 설정되어있는 글씨 크기 말고 다른 사이즈를 사용하고 싶지만 방법을 모르겠다. 여기까지가 내 얘기 였다. 다행히도 CSS에서 내가 원하는 글씨 크기 설정이 가능하다. CSS란? HTML이 블로그의 기능적인 부분을 담당하고 있다면 CSS는 디자인(스타일) 부분을 담당하고 있다고 생각하면 된다.

 

 

CSS로 글씨 크기 바꾸기.

블로그 관리에서 스킨 편집 - html 편집으로 들어가면 오른쪽 상단에 html 모드와 CSS모드가 보일 것이다. 여기서 CSS탭을 누르면 코드를 볼 수 있는데 이 구조는 티스토리에서 제공하는 스킨에 따라 다르다. 이 글에서는 오디세이(odessey) 스킨과 북클럽(Book club)스킨을 이용해서 바꾸는 방법을 알아보겠다.

 

 

오디세이(Odessey) 스킨

CSS탭에서 컨트롤+F를 누른 뒤 "article-view" 검색하면 여러 개가 검색이 될 것이다. 여기서 우리가 봐야 할 부분은 article-view 끝에 달려있는 p와 h1, h2, h3와 만약 인용글의 사이즈도 키우고 싶다면 blockquote까지 봐주면 된다. h1은 제목이기 때문에 제외하고 h2부터 글씨 크기를 변경해보자.

<수정 전>
. article-view h2 {
font-size: 20px; 글자 크기
line-height: 1.33; 줄 간격
}

<수정 후>
. article-view h2 {
font-size: 1.35em; 
line-height: 1.5;
}

처음 CSS를 보면 px단위로 적혀 있는 것이 보일 텐데 내경 우엔 em단위로 변경하였다. em단위로 사용하는 이유는 줌 기능이 없는 브라우저를 위한 것인데 요즘은 줌 기능 없는 브라우저가 있나 싶다. 아무튼 px로 해도 상관없으니 본인의 취향대로 해주면 된다. 참고로 1em = 16px이고 4px 당 0.25em 씩 올라간다. 내 경우엔 글자 크기는 1.35em으로 수정하였고 가독성을 높이기 위해 줄간 간격(line-height)을 1.5로 변경하였다.

 

 

북클럽(Book club)

북클럽 스킨의 경우는 CSS탭에서 "Entry Content"를 검색하면 된다. 여기서도 마찬가지로 Entry Content h2, h3, h4, P 부분의 font-size를 수정해주면 된다.

<수정 전>
. entry-content p {
margin-bottom: 24px;
font-size: 0.9375em;
line-height: 1.6;
color: #666;
}

<수정 후>
. entry-content p {
margin-bottom: 24px;
font-size: 1.5em;
line-height: 1.5;
color: #666;
}

북클럽 스킨은 폰트 사이즈의 기본단위가 em이므로 그냥 원하는 숫자로 변경만 해주면 된다. 이것저것 테스트해본 결과로는 내 눈에 가장 알맞은 폰트 사이즈는 1.3em에서 1.35em, line-height는 1.5였다. 참고로 포스터(poster) 스킨에서는 font-size밑에 line-height가 없는데 그냥 직접 입력해주면 정상 작동된다.

 

적용 후 확인

이렇게 폰트 사이즈를 변경해준 뒤 글쓰기 창에서 확인해보면 변경이 안 된 것처럼 보일 텐데 글을 쓴 뒤 미리보기를 해보면 변경한 폰트 사이즈가 잘 적용되어있는 것을 볼 수 있다.

 

-관련글 보러가기-

H태그로 검색엔진이 좋아하는 글 쓰기.

H태그로 검색엔진이 좋아하는 글 쓰기.

 

---