티스토리 블로그 본문 글 폰트,사이즈 전체를 일괄적으로 수정하는 방법과 예외 처리

자료 iN /블로그 운영

단비스 2014. 3. 30. 12:38

반응형 스킨으로 교체를 하고, 블로그 본문의 font, size 등도 일괄적으로 변경을 하고 싶더군요.

그동안 너무 중구난방으로 이런것에 대한 생각이 전혀 없었는데, 인터넷 검색을 통해서 해결을 봤습니다.

위 글을 참고하시면 되는데, css 파일에 한줄만 넣어주면 깔끔하게 해결이 됩니다~

관리자화면의 HTML/CSS 편집에서 style.css에서 아래와 같은 코드를 넣어주시면 됩니다.

.entry-content * { font-family: 나눔고딕; line-height:1.8em; font-size: 16px !important; }

폰트는 원하시는 맑은고딕이나 굴림 등을 적용하시면 되고, 자간이나 폰트 사이즈도 넣어주시면 되고, 기타 넣을것이 있으면 넣어주시면 됩니다.

그리고 마지막에 꼭 !important를 넣어주시면 entry-content 안에 있는 모든 테그들은 위 사항이 적용이 됩니다.

레인민트님의 글에는 .article로 되어 있는데, 스킨에 따라서 수정해 주시면 되고요~

참고로 웹폰트로 나눔고딕이 컴퓨터나 스마트폰에 설치 되어 있지 않아도 사용하는 방법도 있는데, 개인적으로는 비추천입니다.

스마트폰의 경우에는 로딩속도가 좀 걸리고, 웹폰트가 로딩되기 전에는 다른 폰트로 보이다가 로딩되면서 잠시 글씨가 사라졌다가, 보이기도 하더군요.

암튼 그냥 이렇게 폰트에 대한 상관없이 포스팅을 한다고 해도~

블로그 글을 볼때는 이렇게 잘 보여집니다~

다만 문제가 전혀 없는것은 아니더군요.

어떤 글들은 위처럼 계속 작은 폰트로 나오는데, 왜 그럴까 싶어서 html 코드를 봤습니다.

이건 아주 오래전에 작성된 글인데, 이런 글에는 전혀 테그가 사용되지 않았는데, 이런 경우에는 기본값 9pt로 출력이 되네요...-_-;;

또한 카테고리의 다른 글 보기도 폰트가 엄청 커지고, 본문에 삽입한 인터파크 도서, 영화 관련 다음 링크 등도 다 커지더군요.

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

카테고리의 다른 글의 경우에는 sytle.css 하단에 위처럼 넣어주시면 정상적으로 나옵니다.

이외에 다른 테그들을 다르게 지정을 하고 싶으시다면 위와 같은 방식으로 지정을 해주시면 되는데, 크롬 브라우저의 요소검사를 통해서 찾아보시면 대부분 변경이 가능하기는 한데, 꽤 번거롭기는 하네요... 저 같은 초보자는 찾기도 힘들고요...-_-;;

h1, h2, h3 같이 좀 크게 표현하고 싶은 부분은 따로 떼어내서 위처럼 !important;를 넣고, 폰트와 굵기 등을 수정해주시면 나름 깔끔하게 되지 않을까 싶습니다.

물론 저처럼 포스팅 숫자가 많은 경우에는 이 방법이 좋기는 하지만, 가급적 따로따로 수정해 주시는게 좋을수도 있는데, 이부분은 감안해서 한번 테스트로 작업을 해보시면 좋지 않을까 싶습니다!