구글블로그 본문의 폰트크기를 정하는 방법

이 글에는 제품소개로 수익금을 얻는 링크가 포함되어 있습니다.

 

폰트크기 이대로 괜찮은가?

큰 포부를 가지고 구글블로그에 입성했지만 여전히 많은 부분이 의문으로 남고 에디터가 불편하여 글을 작성하는데 온전히 집중하지 못하게 만드는것이 구글블로그인거 같습니다. 특히나 티스토리, 네이버블로그등등 여러 플랫폼을 경험하고 다뤄본 분들은 적응하는데 그다지 오래걸리지않겠지만 초보자가 처음부터 구글블로그를 한다는것은 어찌보면 하나의 모험과도 같은 도전입니다. 

글을 쓰고 내가 쓴 글을 웹상에서 어떻게 보이는지 확인했을때 폰트의 크기가 불만이셨던분들 많으실겁니다. 저도 마찬가지였어요. 특히나 구글블로그는 외국의 테마를 많이 사용하는데 그분들은 작은 텍스트가 그리 좋은지 많은 테마에서 기본적인 텍스트의 크기를 줄여서 만들어놓아 글을 읽는데 눈에 한번에 들어오지않는 문제가 있었습니다. 

저는 사실 그냥 보기좋은게 좋아서 뭐든 제맘에 들때까지 바꾸고 싶은 마음이 많거든요. 본문의 폰트크기와 제목, 부제목들도 마찬가지였어요. 가장 먼저는 폰트를 제가 맘에 드는걸로 바꾸는거랑 그다음이 크기를 바꾸는것이었어요. 폰트는 먼저의 글에서 바꾸는 방법에 관한 자세한 글을 써두었으니 참고하시면 될것 같습니다.

구글블로그 폰트변경하여 적용하는 방법 바로가기 

본문의 폰트 크기를 정하는 방법

아래에 예제블로그에 작성한 글을 보겠습니다. 테마는 무료테마인 litespot이라는 테마를 적용해보았습니다. 이 테마에서 아무 설정을 하지않았을때 폰트의 크기가 어떻게 보이는지 확인해볼께요.

이건 실제 글을 작성하고 웹상에서 보고 있는 블로그의 모습입니다. 너무 시대에 뒤떨어지는거 아닌가 하는 생각이 듭니다. 그렇다고 유연하게 내 맘에 들게끔 바꿀 수 있는 옵션이 많은것도 아니고요. 물론 이 테마도 유료로 금액을 지불하고 사용한다면 휠씬 많은 기능을 담긴합니다. 

제목에 해당하는 H2부분을 볼까요? 여기서 제목이라함은 에디터상에서 문자를 입력하고 텍스트 설정의 "보통" 이라고 쓰여있는 부분을 클릭해 제목으로 바꾸는 작업을 말합니다. 폰트의 크기는 23px이고 폰트의 종류는 Raleway, Arial, sans-serif로 되어있습니다. 

본문폰트의 크기는 14px이고 폰트의 종류는 Nanum Gothic, serif입니다.

H3에 해당하는 부제목도 역시나 14px로 되어있는것을 확인할 수 있고요.

H4에 해당하는 소제목도 역시나 같은 크기의 14px입니다. 

저는 이렇게 나오는것을 용납할 수 없습니다. 폰트의 스타일을 전에 알려드린 폰트변경하여 적용하는 방법을 먼저 적용하고 나서 크기를 설정해보겠습니다.

폰트 바꾸고 크기설정하기

먼저 지난번 글처럼 Noto Sans Kr 폰트로 모든 요소에 적용시고 화면을 보겠습니다. 자세한 적용방법은 위의 버튼을 누르고 확인해볼 수 있습니다. 어떤가요? 기본 폰트보다 휠씬더 가독성이 높아지고 뭔가 깔끔한 느낌이 들지 않으신가요? 

이제 폰트의 크기를 모두 설정해보겠습니다. 아래의 방법대로 따라와주세요. 

1. 폰트의 크기를 정의할 수 있는 CSS코드를 복사합니다.여기서 폰트의 크기를 px로 설정할 수 있는데 제가 설정한 폰트의 크기는 아래와 같습니다. 폰트의 크기를 정하고 뒤에는 !important; 를 선언하여 이 사이즈가 고정되게 만들 수 있습니다.

1 2 3 4 5 6 7 8 9 10 11 12 13

/* 본문 텍스트 요소의 글자 크기 변경 */ .post-body h2 {   font-size: 26px !important; /* h2 크기 */ } .post-body h3 {   font-size: 23px !important; /* h3 크기 */ } .post-body h4 {   font-size: 20px !important; /* h4 크기 */ } .post-body p {   font-size: 18px !important; /* 본문 텍스트 크기 */ } Colored by Color Scripter

cs

2. 블로그 관리자페이지 → 테마 → 맞춤설정버튼 클릭 → html편집순으로 이동하여 html편집창안의 아무곳이나 마우스 클릭한 후 검색창(단축키 Ctrl+F키)를 눌러 연뒤에 ]]></b:skin>을 입력하고 검색합니다. 그리고 그 코드 바로 상단에 위의 복사한 코드를 집어넣습니다.

다른 방법도 있습니다. html편집창으로 들어가지 않고 다른 경로로 CSS를 추가하는 방법도 있습니다. 블로그관리자페이지에서 레이아웃메뉴를 클릭합니다.

우측에 나오는 레이아웃페이지의 상단에 테마 디자이너를 클릭합니다.

좌측의 고급메뉴를 클릭합니다.

스크롤을 아래로 내려서 CSS 추가를 클릭합니다. 

CSS 추가란이 나타나면 그곳에 CSS를 붙여넣기 해주세요.

이렇게 CSS를 추가할 수 있습니다. 하지만 나중에 다시 이 CSS를 수정하려면 위의 첫번째 방법과 같이 hmtl편집창의 같은 위치를 찾아서 내가 넣은 CSS를 직접 수정해야할 수 있습니다.

3. 이제 바뀐 폰트의 모습과 폰트의 크기를 비교해 보세요. 이전과 엄청나게 달라진 모습입니다. 이제야 폰트의 스타일이나 크기가 내 맘에 들게 세팅이 되었습니다. 만약 내 맘에 안들면 블로그테마에서 원하는 크기로 재설정하여 숫자만 입력함으로 더 마음에 들게 바꿀 수 있습니다.

이렇게 실제 본문에서 보여지는 폰트의 스타일과 글자크기등을 획인해볼 수 있습니다. css에서 원하는 폰트의 크기를 위의 코드에서 숫자만 바꿔서 적용하여 간단하게 폰트를 적용시킬 수 있습니다. 

이 글의 카테고리 : 꾸미기팁