티스토리 반응형 스킨 폰트 크기와 색깔 일괄 수정

예전에 일반 스킨을 썼을 때 css를 편집해서 모든 글의 폰트 크기를 약간 키워썼다. 반응형 스킨으로 바꾸고 나서 같은 방법으로 폰트 크기를 바꾸려 해보니 반응형 스킨은 일반 스킨과 조금 달랐다. 우여곡절 끝에 반응형 스킨에서도 폰트 크기나 색깔을 일괄적으로 바꾸는 법을 알게 되었다. 내가 쓰는 스킨은 티스토리 반응형 스킨 #2다. 다른 반응형 스킨도 똑같이 적용되는 지는 잘 모르겠다. 그럼에도 혹시 누군가에게 도움이 될까 싶어 내가 쓴 방법을 공유한다.

1번 방법. 일반적인 폰트 크기 조절 방법

1) 티스토리 관리 -> 꾸미기 -> HTML/CSS 편집으로 들어간다.

2) CSS를 클릭한다.

3) CSS가 적혀있는 부분에 커서를 위치시킨 후 ctrl+f를 눌러 .area_view p 부분을 찾는다. 아마 이렇게 적혀 있을 것이다.

.area_view p {font-size:16px;line-height:28px; margin:0 auto 28px}

위에서 font-size:16px 부분을 수정하면 된다. 폰트를 키우고 싶으면 숫자를 늘리고 반대면 숫자를 줄이고. 대부분 이 1번 방법으로 블로그 전체 본문의 폰트 크기가 바뀔 것이다.

2번 방법. 예외가 발생 시

그런데 예전 일반 스킨을 쓸 때 썼던 글 중에 일부가 위 방법으로 폰트의 크기가 바뀌지 않았다. 나는 개별 글을 작성할 때 티스토리 에디터에서 폰트나 폰트크기 서식을 사용한 적이 없는 데도 그랬다. 확인해보니 이 경우는 과거 작성된 글이 <p> 태그가 아니라 (알 수 없는 이유로) <div> 태그로 문단이 나눠져 있는 경우 발생했다. 어쨌든 이 경우에도 해결책이 있었다.

1) 티스토리 관리 -> 꾸미기 -> HTML/CSS 편집으로 들어간다.

2) CSS를 클릭한다.

3) CSS가 적혀있는 부분에 커서를 위치시킨 후 ctrl+f를 눌러 body,th,td,input, 부분을 찾는다. CSS의 거의 맨 앞 부분이다. 아마 이렇게 적혀 있을 것이다. 

body,th,td,input,select,textarea,button {font-size:14px;line-height:1.5;font-family:'Spoqa Han Sans', sans-serif;color:#666}

여기서 font-size:14px를 수정해주면 된다.

그런데 <div> 태그로 문단이 나뉘어져 있는 경우 모바일 환경으로 바뀌거나 창의 크기가 작아지면 글자 크기도 달라진다. 즉, 창의 크기가 일정 기준 이하로 내려가면 폰트의 크기는 다른 구문에 영향을 받는다. 별 신경 안 써도 되지만 만약 그 부분도 수정하고 싶다면 CSS에서 아래 부분을 찾아보자.

.area_view { margin:0 15px;font-size:17px;line-height:24px;color:#333;font-family:applesdgothicneo-ultralight }

이 부분이 창의 크기가 작아졌을 때 적용되는 폰트 부분이다. 역시 font-size:17px 부분을 수정하면 되겠다. 개인적으로 나는 모든 경우에 폰트 크기가 동일하도록 설정해 놓았다.

3. 과거 개별 글에 티스토리 에디터에 있는 글꼴이나 글자크기 변경을 사용한 적이 있는 경우

티스토리에서 글을 작성할 때 에디터를 살펴보면 글꼴도 설정할 수 있고 글자 크기도 설정할 수 있다. 이것은 해당 글에만 적용되는 서식으로 만약 이것을 사용했다면 위 1, 2번 방법이 먹히지 않는다. 위에 적어놓은 구문들로 전체 등록된 글의 폰트 크기를 바꿔놓아도 최종적으로는 개별 글에 사용된 서식이 적용되기 때문이다. 이 경우에도 방법은 있다.

CSS 편집 창에 가서 첫 화면 /* global */ 윗 부분 빈 줄에다가 아래 구문을 넣는다. 잘 안 보이면 ctrl+f로 /* global */ 부분을 찾아 보자. 

.area_view * { font-size: 20px !important; }

20은 예시다. font-size:20px 부분에 자신이 원하는 크기의 숫자를 넣는다. 그러면 그 어떤 글이든 해당 블로그에 포스트 된 모든 글의 본문 크기가 일괄적으로 동일해진다. 

이것을 조금 응용해서 아래와 같이 적는다면 글꼴도 변경할 수 있다.

.area_view * { font-family: 맑은고딕; font-size: 20px !important; } 

맑은고딕은 예시다. 나는 티스토리 반응형 스킨 #2가 기본으로 제공하는 글꼴이 마음에 들기 때문에 굳이 바꾸지 않았다.

그런데 이 3번 방법에 단점이 있다. '카테고리의 다른 글 보기' 부분도 같이 글자 크기가 바뀐다는 것이다. '카테고리의 다른 글 보기' 플러그인을 사용하지 않는 사람이면 모르되 사용하는 사람이라면 이 부분이 같이 글자 크기가 바뀌어버리면 보기에 안 좋다.

그래서 3번 방법을 적용하되 카테고리의 다른 글 부분은 그대로 두고 싶을 때는 아래 구문을 추가한다. 위치는 .area_view * { font-size: 20px !important; } 아래에다가 적어넣으면 될 것이다.

.another_category_color_grey * { font-size: 12px !important; }

'카테고리의 다른 글' 플러그인의 색깔을 기본 제공인 '회색'(grey)에서 다른 색으로 바꾸신 분은 위 구문에서 grey 부분을 해당 색의 영문명으로 바꿔 적어 넣어야 한다.

웬만하면 티스토리에 글을 작성할 때 에디터에 있는 글꼴 선택이나 글자크기 부분을 사용하지 않는 것이 좋다. 이것을 사용하면 나중에 스킨을 바꿀 일이 생기거나 블로그를 이사할 일이 생기거나 기타 등등의 이유가 생겼을 때, 다시 블로그 전체의 글꼴을 통일적으로 운영하고 싶을 때 골치 아픈 일이 많이 발생한다. 즉, 이 3번의 방법을 적용할 일 자체가 없게 하는 것이 편하다. 물론 부분적으로 색깔을 넣는다거나 강조하는 하는 등의 서식 적용은 상관 없다. 일부분만 글자 크기를 바꾸거나 글꼴을 바꾸는 것도 상관없을 것 같긴 하다. 단, 이 경우는 먼저 서식없이 글을 다 작성하고 나중에 원하는 부분만 에디터를 이용하여 서식을 적용하는 방법을 쓰자.

4. 본문 폰트의 기본 색깔을 일괄적으로 바꾸려면

반응형 스킨 폰트색은 기본적으로 약간 회색으로 설정되어 있다. 이것이 마음에 안 드는 사람은 검은색으로 바꿀 수도 있다.

CSS에서 .area_view {color:#5c5c5c;word-wrap: break-word} 부분을 찾는다.

여기서 #5c5c5c 부분을 #000 으로 바꾸면 기본 색깔이 검정색으로 바뀐다. 물론 취향에 따라 다른 색으로 바꿀 수도 있다. http://www.color-hex.com/ 에 들어가서 자신이 원하는 색의 헥사코드가 무엇인지 알아내 위 #5c5c5c 부분을 바꿔주면 된다. 그 부분이 바로 헥사코드이다. 

16/06/16

2016/06/30 - 원노트를 블로그 백업 용도로 활용하여 안심하고 블로깅하기