티스토리용 jb 스킨 - 본문 폰트 크기 조절하는 법

나는 공공연히 말해오듯 이제 할매라고 불리울 나이가 됐다. 왜 이 말부터 하냐면 내 블로그의 글자 크기가 내 눈에 너무 작아 잘 읽히지 않는다는 것. 글을 작성 할 때는 폰트 크기를 내 맘대로 조절해서 불편함 없이 쓸 수 있지만 발행한 것을 보면 늘 같은 크기, 티스토리 자체 설정에 들어가 글자 크기를 암만 바꿔봐도 작성할 때만 달라지는 것이다.

티스토리 자체 설정에 들어가 글자 크기 조절

아무래도 이 문제는 그 동안 티스토리 블로그를 해오면서 아주 눈꼽 만큼 이해하게 된 html, css 이런 것과 관계가 있는 것 같은데 스킨 제작자에게 자꾸만 메일질 해서 귀찮게 하기도 싫다, 할매의 진상질 이만하면 넘친다고 얼마 전에 깨달았으니까 (관련 글 - 자신의 늙은이 주책, 진상질이 객관적으로 보일 때가 있다)


그래서 이 글은 누가 보라고 쓰는 것이 아닌 나를 위해, 언젠가 다시 이것을 수정할 필요가 있을 때 다시 들여다 보기위한 기록이 된다. (혹시 나와 비슷한 스킨을 쓰면서 같은 불편을 느끼는 분도 있을 수 있고)

티스토리 본문 글자 크기 조절 하기

아무튼 보고 들은 건 있어서 이 문제는 틀림없이 css를 건드려야 할 것으로 보이는데 스킨마다 구조가 모두 다르니 아무리 검색질을 해도 못 찾겠다. 할 수 없지 머, 직접 찾아서 실험과 시행착오를 겪으며 해결하는 수 밖에.


일단 비공개로 글감을 모아 둔 세컨드 블로그로 가서 css를 뒤져 폰트크기와 관련 돼 있을 만한 것은 이것저것 집중력이 허락하는 한 모두 건드려 본다. 그 곳은 뭔가 잘못 되면 스킨을 새로 올리면 되니까. - 결론만 말하면 찾아서 고쳤고 공개 블로그에도 적용했다.

티스토리 본문 글자 크기 조절 하러 가는 길

1. 블로그 관리 페이지에서 '꾸미기 - 스킨 편집'으로 간다

스킨편집 페이지가 열리면 html편집으로 들어가 새로운 페이지를 연다

2. 스킨편집 페이지가 열리면 html편집으로 들어가 새로운 페이지를 연다.

페이지 오른쪽 상단에 HTML, CSS, 파일업로드 등의 세 가지 탭이 있는데 여기서는 CSS를 선택한다.

3. 페이지 오른쪽 상단에 HTML, CSS, 파일업로드 등의 세 가지 탭이 있는데 여기서는 CSS를 선택한다.

어디를 손 봐야 할지 모르니까 내 블로그의 주 폰트인 'LexiSaebomR'을 ctrl+f키로 찾는다

4. 어디를 손 봐야 할지 모르니까 내 블로그의 주 폰트인 'LexiSaebomR'을 ctrl+f키로 찾는다. 모두 4개가 찾아지는데 앞에 두 개는 잘못 건드리면 큰 일 날까 무서운 느낌이 들어 세 번째, px가 유난히 많이 모여 있는 곳을 선택, 실험을 한다. - 위 그림의 빨간 네모 친 부분의 default는 14px인데 18로 올려보니 위 그림처럼 글자가 커졌다가 (그런데 내 스타일 시트는 언제부터, 왜 저렇게 행간도 없고 뭣도 없이 다닥다닥 붙어 있게 됐을까? --;; )

★ css 내용을 흐림 처리한 것은 혹시나 모를 저작권 문제 때문이다★

12px로 내려 보니 위 그림처럼 작아진다. 그래서 이 부분을 15로 두고 - 전체적으로 폰트 크기를 1px씩 올려 잡았다.

12px로 내려 보니 위 그림처럼 작아진다. 그래서 이 부분을 15로 두고 - 전체적으로 폰트 크기를 1px씩 올려 잡았다. 그러니까 내가 기억 할 곳은 이 부분이다. /* Typography */에서 (이 정도 공개는 저작권과 별 관계가 없겠지럴...?)

내가 고친 것, 

"LexiSaebomR",sans-serif;font-size:15px;font-weight:400;color:#666;word-spacing:.5px}h1,h2,h3,h4,h5,h6{margin:20px 0;line-height:1.5;font-weight:400;letter-spacing:0;color:#444}

h1{font-size:23px}

h2{font-size:21px}

h3{font-size:19px}

h4{font-size:17px}

h5{font-size:15px}

h6{font-size:13px}


아래가 default

"LexiSaebomR",sans-serif;font-size:14px;font-weight:400;color:#666;word-spacing:.5px}h1,h2,h3,h4,h5,h6{margin:20px 0;line-height:1.5;font-weight:400;letter-spacing:0;color:#444}

h1 { font-size: 22px; }

h2 { font-size: 20px; }

h3 { font-size: 18px; }

h4 { font-size: 16px; }

h5 { font-size: 14px; }

h6 { font-size: 12px; }

결과적으로 모두 한 사이즈씩만 더 올렸는데 눈에 띄게 커졌다는 느낌은 없지만 본문 읽기가 덜 불편해진 것은 체감 된다. 그람 잘한 것이지 뭐~

본문의 글자 크기 테스트 중 18px

본문의 글자 크기가 어디를 건드려야 바뀌나 확인 하는  중으로 위 그림이 16px 아래가 12px 쯤 됐나 그랬을 것 같다. - 역시 맨 처음에 14px였던 것을 15px로 바꾼 그 부분이었던 걸로 기억된다.

본문의 글자 크기 테스트 중 12px

지금은 15px로 정해져 있는데 내 눈에는 괜찮지만 다른 사람들 눈에는 어떨지 그것은 아직 모르고 있다.

ⓒ고양이와 비누바구니 All rights reserved.

댓글

Designed by JB FACTORY