티스토리 스킨 편집 - 본문 폰트 수정하는 방법
나도 한 번 스킨 만들어보겠다고 손대기 시작하면 마음에 들 때까지 수천번을 수정하고 또 하고 확인하고 또 하고 할 것만 같아서 감사한 마음으로 제공되어진 걸 받아쓰고 있다.
하지만, 남이 만든거다 보니 내 마음에 안 드는 구석이 있을 수 밖에 없는데..
가장 큰 게 비주얼은 그렇다치고 본문이 어떻게 보여지느냐 하는 것.
내가 제일 중요시 하는 것이 바로 보기 편한 글.
예쁜 웹폰트들 많지만 모바일이나 기타 웹 상에서 읽어낼 때 불편한 일들이 일어나게 마련이기에 비록 꾸밈은 없더라도 단정한 폰트, 가독성 높은 글자크기를 추구한다.
그 외적인 것은 그 다음에 고려할 사항이다.
현재 이 스킨이 그렇다는 건 아니고, 그 전에 감사하게 무료로 배포된 스킨을 받았는데 웹폰트를 적용시켜 놓았는지 중간중간 글자에 흐림현상도 보이고, PC에서 확인하기가 영 불편하다는 생각이 들었다. 그래서 당장 폰트 설정을 다시 해야겠다는 생각을 하게 되었다.
방법은 간단하다.
관리페이지로 들어가서 꾸미기 > HTML/CSS 편집 모드로 들어가면 된다.
보통은 css에서 상단에 보이는 body의 font-family 를 수정하면 되는데, 내 경우는 좀 달랐다.
일단 원하는 폰트로 설정하기 위해
body{font-family: '나눔바른고딕',nanumbarungothic,'나눔고딕',NanumGothic,'돋움',Dotum,helvetica,sans-serif,tahoma; font-size:16px;line-height:1.8em ;color:#333;
body 속에 나눔바른고딕 의 이름을 넣었다.
내가 참 애정하는 폰트인데, 안타깝게도 이게 방문자의 PC에 깔려 있지 않으면 기본글꼴의 모양으로 보이게 된다.
그래서~
대체 할 수 있는 다른 폰트 이름도 순서대로 들어가 있다.
이건 뭐 스킨 제작자가 직접 하나하나 넣은거니까 고맙게 쓰기로 하고 ㅋㅋ
이제 폰트가 제대로 먹혀들었는지 확인하기 위해 새 창으로 내 블로그를 열어본다.
글자체가 바로 바뀐 게 보인다면 성공!
글자크기가 너무 작은 것 같아 뒤에 보이는 font-size 를 수정해봤다. 처음에 12px 였는데 16px 로 바꾸고 내 블로그를 새로고침 해 봤는데...
어라? 안 바뀐다;;;
그렇다면 직접 본문에 영향을 미치는 태그가 무엇인지 확인할 필요가 있다.
HTML 페이지에서 ctrl+F 를 눌러 article_rep_desc 를 검색하면
티스토리 스킨 편집 - 본문 폰트 수정하는 방법 나도 한 번 스킨 만들어보겠다고 손대기 시작하면 마음에 들 때까지 수천번을 수정하고 또 하고 확인하고 또 하고 할 것만 같아서 감사한 마음으로 제공되어진 걸 받아쓰고 있다. 하지만, 남이 만든거다 보니 내 마음에 안 드는 구석이 있을 수 밖에 없는데.. 가장 큰 게 비주얼은 그렇다치고 본문이 어떻게 보여지느냐 하는 것. 내가 제일 중요시 하는 것이 바로 보기 편한 글. 예쁜 웹폰트들 많지만 모바일이나 기타 웹 상에서 읽어낼 때 불편한 일들이 일어나게 마련이기에 비록 꾸밈은 없더라도 단정한 폰트, 가독성 높은 글자크기를 추구한다. 그 외적인 것은 그 다음에 고려할 사항이다. 현재 이 스킨이 그렇다는 건 아니고, 그 전에 감사하게 무료로 배포된 스킨을 받았는데 웹폰트를 적용시켜 놓았는지 중간중간 글자에 흐림현상도 보이고, PC에서 확인하기가 영 불편하다는 생각이 들었다. 그래서 당장 폰트 설정을 다시 해야겠다는 생각을 하게 되었다. 방법은 간단하다. 관리페이지로 들어가서 꾸미기 > HTML/CSS 편집 모드로 들어가면 된다. 보통은 css에서 상단에 보이는 body의 font-family 를 수정하면 되는데, 내 경우는 좀 달랐다. 일단 원하는 폰트로 설정하기 위해 body{font-family: '나눔바른고딕',nanumbarungothic,'나눔고딕',NanumGothic,'돋움',Dotum,helvetica,sans-serif,tahoma; font-size:16px;line-height:1.8em ;color:#333; body 속에 나눔바른고딕 의 이름을 넣었다. 내가 참 애정하는 폰트인데, 안타깝게도 이게 방문자의 PC에 깔려 있지 않으면 기본글꼴의 모양으로 보이게 된다. 그래서~ 대체 할 수 있는 다른 폰트 이름도 순서대로 들어가 있다. 이건 뭐 스킨 제작자가 직접 하나하나 넣은거니까 고맙게 쓰기로 하고 ㅋㅋ 이제 폰트가 제대로 먹혀들었는지 확인하기 위해 새 창으로 내 블로그를 열어본다. 글자체가 바로 바뀐 게 보인다면 성공! 글자크기가 너무 작은 것 같아 뒤에 보이는 font-size 를 수정해봤다. 처음에 12px 였는데 16px 로 바꾸고 내 블로그를 새로고침 해 봤는데... 어라? 안 바뀐다;;; 그렇다면 직접 본문에 영향을 미치는 태그가 무엇인지 확인할 필요가 있다. HTML 페이지에서 ctrl+F 를 눌러 article_rep_desc 를 검색하면 부분이 보일거다. 여기가 본문 내용이 들어가는 위치가 되는데 이 녀석 위에 뭐가 적혀 있는지를 확인해야 한다. 내가 받은 스킨에서는 <div class="article">이 적용되어 있다. 즉, 나는 CSS페이지에서 article 설정이 들어간 걸 찾아야 한다. 안타깝게도 이 스킨을 만드신 분은 여기저기 스킨의 내용을 짜깁기 한 듯 하다. 쓸모없는 설정이 너무 많이 들어갔다. 덕분에 찾는데도 눈이 빠질 뻔.. article 관련 설정이 도대체 몇 개 인지.. 찾았는데 여기에 적힌 12px 를 큰 숫자로 수정해도 안 바뀐다. 똑같지? 근데 다르다. 여기에 있던 글자크기를 15로 바꾸고 내 블로그를 새로고침했더니 글자가 원하는대로 시원시원하게 커졌다! 소스를 이것저것 갖다붙이고 몇번이나 손대면서 스킨제작자가 필요없는 부분을 지우지 않고 그대로 배포를 해서 생긴 일이다. 위에 보이는 .article 은 빨간색으로 되어 있는데, 이번 기회에 알게 되었다. 빨간색으로 된 저 글자는 실제로 적용되지 않는 부분이라는 것을. 나는 티스토리 본문 폰트 크기 와 모양을 이렇게 바꾸었다. 참고로, 하나 더 팁을 드리자면 .article p{line-height:3} 이 부분의 숫자를 크게하면 줄간격이 벌어진다. 대부분 2 정도로 되어 있던데 나는 3으로 수정했다. 일부로 enter키를 눌러 줄간격을 띄울 필요도 없이 알아서 한줄한줄 넉넉하게 벌어져 있다. 직접 포스팅을 하는 동안에는 글자크기나 글자간격이 기본설정 상태로 보이겠지만, 저장을 누르고 올라간 글을 확인하면 설정해둔대로 예쁘게 보여질 것이다. 도움이 되셨다면 광go한번 눌러주기?! ㅋㅋ
여기가 본문 내용이 들어가는 위치가 되는데 이 녀석 위에 뭐가 적혀 있는지를 확인해야 한다.
내가 받은 스킨에서는 <div class="article">이 적용되어 있다.
즉, 나는 CSS페이지에서 article 설정이 들어간 걸 찾아야 한다.
안타깝게도 이 스킨을 만드신 분은 여기저기 스킨의 내용을 짜깁기 한 듯 하다.
쓸모없는 설정이 너무 많이 들어갔다.
덕분에 찾는데도 눈이 빠질 뻔.. article 관련 설정이 도대체 몇 개 인지..
찾았는데 여기에 적힌 12px 를 큰 숫자로 수정해도 안 바뀐다.
똑같지?
근데 다르다. 여기에 있던 글자크기를 15로 바꾸고 내 블로그를 새로고침했더니 글자가 원하는대로 시원시원하게 커졌다!
소스를 이것저것 갖다붙이고 몇번이나 손대면서 스킨제작자가 필요없는 부분을 지우지 않고 그대로 배포를 해서 생긴 일이다.
위에 보이는 .article 은 빨간색으로 되어 있는데, 이번 기회에 알게 되었다.
빨간색으로 된 저 글자는 실제로 적용되지 않는 부분이라는 것을.
나는 티스토리 본문 폰트 크기 와 모양을 이렇게 바꾸었다.
참고로, 하나 더 팁을 드리자면
.article p{line-height:3}
이 부분의 숫자를 크게하면 줄간격이 벌어진다.
대부분 2 정도로 되어 있던데 나는 3으로 수정했다.
일부로 enter키를 눌러 줄간격을 띄울 필요도 없이 알아서 한줄한줄 넉넉하게 벌어져 있다.
직접 포스팅을 하는 동안에는 글자크기나 글자간격이 기본설정 상태로 보이겠지만, 저장을 누르고 올라간 글을 확인하면 설정해둔대로 예쁘게 보여질 것이다.
도움이 되셨다면 광go한번 눌러주기?! ㅋㅋ
