티스토리 #1 스킨 폰트 크기, 색상 변경하기 모바일 / PC

---

 

원래는 POSTER 스킨을 사용했지만, 저번 애드센스 관련글에서 밝혔다시피 자동광고 오류? 때문인지 자동광고를 설정했음에도 불구하고 달리는 광고 숫자가 현저히 적어 이번에 #1 스킨으로 변경하였습니다.

 

울며 겨자먹기로 스킨변경을 하긴 했지만 막상 사용해보니 POSTER 스킨보다 깔끔하고, 특히 모바일에서 봤을때 훨신 이쁜것 같아 잘 바꾼것 같다는 생각이 드네요.

 

하지만 #1 스킨도 모든 부분이 마음에 드는건 아니더라구요.

본문 폰트 크기라던가 색상이라던가 .. 좀 흐릿한면이 있고 크기도 제가 선호하는 폰트 크기는 아니었습니다.

 

마음에 안들어도 참고 쓸 순 없겠죠.

CSS문을 조금만 수정해주면 자기가 원하는 폰트 크기와 색상으로 쉽게 바꿀 수 있습니다.

 

폰트 크기, 색상 변경하기 - PC

 

 

폰트 크기, 색상, 줄간격 변경법 - PC

 

관리자 - 스킨편집 - HTML/CSS - CSS 편집으로 들어갑니다.

 

위 체크박스를 참조하여

 

body,th,td,input,select,textarea,button {font-size:14px;line-height:1.6;font-family:'Noto Sans', sans-serif;color:#000000}

 

부분을 수정해주시면 됩니다. CSS문을 따로 수정한적이 없다면 위 사진처럼 12번째 줄에 위치해 있을겁니다.

 

font-size 는 폰트 크기를 말하는것이며 자신이 원하는 크기로 바꿔주시면 됩니다.

저는 14px를 사용하고 있습니다.

 

Color:#000000 는 본문 폰트 색상을 말하는것이며 000000은 검정색을 뜻합니다.

저는 본문 폰트 색상이 회색이었지만 검정색을 원하여 000000으로 바꾸어 사용하고 있습니다.

 

line-height:1.6 은 줄간격을 뜻합니다.

기존에는 1.5였던걸로 기억합니다만 저는 0.1을 더 높여 1.6으로 사용하고 있습니다.

 

지금까지는 PC 본문 폰트 크기, 색상, 줄간격을 변경해준것이고 모바일도 바꿔주고 싶다면 아래와 같이 따라하시면 됩니다.

 

 

폰트 크기, 색상 변경하기 - 모바일

 

 

 

폰트 크기, 색상, 줄간격 변경법 - 모바일

 

Ctrl + F 로 .skin_view .area_view p 를 검색합니다.

CSS를 수정한적이 없다면 368번째에 위치해 있을겁니다.

 

.skin_view .area_view p {font-size:16px;line-height:24px;color:#000000}

 

부분을 수정해주시면 됩니다.

 

.skin_view .area_view p {font-size:16px;line-height:24px;color:#000000} 에서

 

앞서 언급한것과 같이

 

 

font-size:16px 는 모바일에서 폰트크기를 말합니다.

저는 16px를 사용하고 있으며 딱히 변화를 주진 않았습니다. 15px를 사용해보는걸 고려해보고 있긴 합니다.

 

line-height 은 모바일에서 폰트 줄간격을 말합니다.

저는 24px를 사용하고 있습니다.

 

color은 폰트 색상을 말합니다.

저는 000000 검정색을 사용하고 있습니다.

 

이렇게 수정해주면 모바일에서도 원하는 폰트 크기와 색상, 줄간격이 적용됩니다.

현재뿐만아니라 예전글들도 다 설정 변경한게 적용이 되니 매우 편리합니다.

 

개인적으로 위 처럼 CSS문 수정 후 본문이 더 깔끔해지고 가독성이 좋아진 것 같아 만족중입니다.