구글 블로그 폰트 크기, 이대로 괜찮은가요? (내 마음대로 폰트 크기 조절하기)
큰 포부를 가지고 구글 블로그에 입성했지만, 여전히 많은 부분이 의문으로 남고 에디터가 불편하여 글을 작성하는 데 온전히 집중하지 못하게 만드는 것이 구글 블로그인 것 같습니다. 특히 티스토리, 네이버 블로그 등 여러 플랫폼을 경험하고 다뤄본 분들은 적응하는 데 그다지 오래 걸리지 않겠지만, 초보자가 처음부터 구글 블로그를 시작한다는 것은 어찌 보면 하나의 모험과도 같은 도전입니다.
글을 쓰고 내가 쓴 글이 웹상에서 어떻게 보이는지 확인했을 때, 폰트 크기에 불만이 많으셨던 분들이 계실 겁니다. 저도 마찬가지였습니다. 특히 구글 블로그는 외국의 테마를 많이 사용하는데, 그분들은 작은 텍스트가 그리 좋은지 많은 테마에서 기본적인 텍스트의 크기를 줄여서 만들어 놓아 글을 읽는 데 눈에 한 번에 들어오지 않는 문제가 있었습니다.
저는 사실 그냥 보기 좋은 게 좋아서 뭐든 제 마음에 들 때까지 바꾸고 싶은 마음이 많거든요. 본문의 폰트 크기와 제목, 부제목들도 마찬가지였습니다. 가장 먼저는 폰트를 제가 마음에 드는 것으로 바꾸는 것, 그다음이 크기를 바꾸는 것이었습니다. 폰트는 이미 다른 글에서 바꾸는 방법에 대한 자세한 글을 써두었으니 참고하시면 될 것 같습니다.
구글 블로그 폰트 변경하여 적용하는 방법 바로가기 (여기에 이전 폰트 변경 포스팅 링크 삽입)
본문 폰트 크기를 정하는 방법: '이대로는 안 돼!'
아래 예제 블로그에 작성한 글을 보겠습니다. 테마는 무료 테마인 'Litespot'을 적용해보았습니다. 이 테마에서 아무 설정을 하지 않았을 때 폰트의 크기가 어떻게 보이는지 확인해볼게요.
 |
| (실제 블로그 캡처 이미지: 기본 폰트 크기가 작고 가독성이 떨어져 보이는 모습) |
이건 실제 글을 작성하고 웹상에서 보고 있는 블로그의 모습입니다. "너무 시대에 뒤떨어지는 거 아닌가?" 하는 생각이 듭니다. 그렇다고 유연하게 내 마음에 들게끔 바꿀 수 있는 옵션이 많은 것도 아니고요. 물론 이 테마도 유료로 금액을 지불하고 사용한다면 훨씬 많은 기능을 담긴 합니다.
1. 우선 블로그관리자 페이지에서 레이아웃->테마디자이너를 클릭합니다.
2. 고급메뉴안에 Fonts라는 메뉴가 있습니다. 이것은 테마마다 다를 수 있습니다.
각 요소별 폰트 크기를 자세히 살펴볼까요?
3. Theme Fonts메뉴에 들어가니 아래의 캡처이미지처럼 각각의 위치에 해당하는 폰트를 하나하나 직접 선택할 수 있습니다.
제목에 해당하는 H2 부분을 볼까요? 여기서 제목이라 함은 에디터 상에서 문자를 입력하고 텍스트 설정의 "보통"이라고 쓰여있는 부분을 클릭해 제목으로 바꾸는 작업을 말합니다. (실제 블로그 캡처 이미지: H2 제목 폰트 정보 - 23px, Raleway, Arial, sans-serif) 폰트의 크기는 23px이고 폰트의 종류는 Raleway, Arial, sans-serif로 되어있습니다. 기본값을 누르면 다양한 폰트가 펼쳐지고 그 중 하나를 선택할 수 있습니다.
Nanum Gothic, serif입니다. (실제 블로그 캡처 이미지: 본문 폰트 정보 - 14px, Nanum Gothic, serif)H3에 해당하는 부제목도 역시나 14px로 되어있는 것을 확인할 수 있고요. (실제 블로그 캡처 이미지: H3 부제목 폰트 정보 - 14px)H4에 해당하는 소제목도 역시나 같은 크기의 14px입니다. (실제 블로그 캡처 이미지: H4 소제목 폰트 정보 - 14px)구글의 다양한 폰트를 살펴보려면 아래의 링크 버튼을 눌러주세요.
우리는 이렇게 나오는 것을 용납할 수 없습니다. 폰트의 스타일을 전에 알려드린 '폰트 변경하여 적용하는 방법'을 먼저 적용하고 나서 크기를 설정해보겠습니다.
폰트 바꾸고 크기 설정하기 (본격적인 CSS 수정)
먼저 지난번 글처럼 'Noto Sans Kr' 폰트로 모든 요소에 적용하고 화면을 보겠습니다. 자세한 적용 방법은 위의 버튼을 누르고 확인해볼 수 있습니다. 어떤가요? 기본 폰트보다 훨씬 더 가독성이 높아지고 뭔가 깔끔한 느낌이 들지 않으신가요?
이제 폰트의 크기를 모두 설정해보겠습니다. 아래의 방법대로 따라와 주세요.
1. 폰트 크기를 정의할 수 있는 CSS 코드 복사
여기서 폰트의 크기를 px로 설정할 수 있는데, 제가 설정한 폰트의 크기는 아래와 같습니다. 폰트의 크기를 정하고 뒤에는 !important;를 선언하여 이 사이즈가 고정되게 만들 수 있습니다.
/* 본문 텍스트 요소의 글자 크기 변경 */
.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; /* 본문 텍스트 크기 */ }
/* .post-body 내의 모든 글자 크기를 18px로 변경 */
.post-body {
font-size: 18px !important;
}
/*위에 복사합니다. */]]></b:skin>
2. CSS 코드를 블로그 테마에 추가하기 (두 가지 방법)
방법 1: HTML 편집창에 직접 추가 (권장)
이 방법은 가장 확실하고 일반적으로 사용되는 방법입니다.
- 블로그 관리자 페이지 → 테마(Theme) → HTML 편집(Edit HTML) 을 클릭합니다.
- HTML 편집창 안의 아무 곳이나 마우스로 클릭한 후, 검색창(단축키
Ctrl + F또는Cmd + F)을 눌러 연 뒤]]></b:skin>을 입력하고 검색합니다. - 찾은
]]></b:skin>코드 바로 상단에 위에서 복사한 CSS 코드를 붙여넣습니다.
1066 ]]><b:skin> 위에 공간을 만들고 여기에 css코드를 복사해서 붙여넣습니다.
- 마지막으로 화면 우측 상단의 '저장(Save)' 버튼(디스크모양)을 클릭하여 변경 사항을 적용합니다.
방법 2: 테마 디자이너의 '고급' 메뉴를 통해 추가
HTML 편집이 부담스럽다면 이 방법도 가능합니다. 우리에게는 이방법이 쉬울 것 같습니다.
- 블로그 관리자 페이지에서 '레이아웃(Layout)' 메뉴를 클릭합니다.
- 우측에 나오는 레이아웃 페이지 상단에 '테마 디자이너(Theme Designer)'를 클릭합니다.
- 좌측 메뉴에서 '고급(Advanced)' 메뉴를 클릭합니다.
- 스크롤을 아래로 내려서 'CSS 추가(Add CSS)'를 클릭합니다.
- 'CSS 추가'란이 나타나면 그곳에 위에서 복사한 CSS를 붙여넣기 해줍니다.
- 화면 우측 하단의 '블로그에 적용(Apply to blog)' 또는 '저장(Save)' 버튼을 클릭하여 변경 사항을 적용합니다.
참고:CSS 추가란을 통해 CSS를 추가할 수 있습니다. 하지만 나중에 다시 이 CSS를 수정하려면 첫 번째 방법과 같이 HTML 편집창의 같은 위치(]]></b:skin> 태그 바로 위)를 찾아서 직접 수정해야 할 수 있습니다.
3. 변경된 폰트 크기 확인하기
이제 블로그를 방문하여 바뀐 폰트의 모습과 폰트의 크기를 비교해 보세요. 이전과 엄청나게 달라진 모습입니다. 이제야 폰트의 스타일이나 크기가 내 마음에 들게 세팅이 되었습니다. 만약 내 마음에 안 들면 위에서 사용한 CSS 코드에서 숫자(px 값)만 바꿔서 적용하여 더 마음에 들게 바꿀 수 있습니다.
 |
| (실제 블로그 캡처 이미지: 폰트 스타일 및 크기 변경 후 가독성이 개선된 모습) |
이렇게 실제 본문에서 보여지는 폰트의 스타일과 글자 크기 등을 확인할 수 있습니다. CSS에서 원하는 폰트의 크기를 위의 코드에서 숫자만 바꿔서 적용하여 간단하게 폰트를 적용시킬 수 있습니다.
마무리하며
구글 블로그는 처음에는 다소 불편하게 느껴질 수 있지만, 이렇게 직접 CSS를 수정하는 방법을 익히면 여러분의 블로그를 원하는 대로 커스터마이징할 수 있는 무한한 가능성을 열 수 있습니다. 작은 폰트 크기로 인해 독자들이 불편함을 느끼지 않도록, 지금 바로 여러분의 블로그 폰트 크기를 조정하여 더욱 읽기 좋은 환경을 만들어보세요!
0 댓글