블로그스팟(Blogspot, 구글블로그) 본문 글자 크기(font size) 조절하는 방법

블로그스팟은 구글블로그의 이름입니다. 처음 블로그스팟에 글을 작성하면 글자의 크기가 상당히 작다는 것을 느낄 수 있습니다. 모바일로 보면 더욱 더 작게 보여 글씨를 읽을 수가 없습니다. 디자인(테마)에 따라서 글자크기가 더 작아지는 것도 있는데요. 따라서 처음 블로그스팟을 시작할때 초기세팅을 잘해두어야 합니다. 이에 블로그스팟에서 글자크기 조절 방법에 대하여 정리해 보았습니다.

블로그스팟 기본테마에는 Contempo, Soho, Emporio, Notable, Essential, Simple, Dynamic Views, Picture Window, Awesome Inc., Watermark, Ethereal, Travel 등 12가지가 있습니다.



블로그스팟 본문 글자크기 조절하는 방법
블로그스팟 본문 글자크기 조절하는 방법


1. 블로그스팟의 글자 크기 비교

블로그스팟의 초기 글자 크기는 테마별에 따라 차이가 있으며, 기본 12px~20px로 설정되어 있습니다. 컴퓨터로 볼때에는 특별히 불편이 없을지라도 모바일을 통해 글을 보려면 글씨가 너무 작아 불편하기만 합니다. 따라서 모바일 가독성을 높이기 위해서는 글자크기를 조절할 필요가 있습니다.

이에 14px~20px로 바꿨을때의 크기를 비교해 보았습니다. 본문 글자크기의 경우 테스트 해본 결과 16px~18px이 적당한 크기가 아닐까 생각됩니다. 데스탑의 경우에는 16px도 불편하지 않았으나, 모바일의 경우에는 17px~18px로 했을때 가독성이 좋게 느껴졌습니다.

비교에 사용된 테마는 블로그스팟에서 기본적으로 제공되는 에센셜 라이트(Essential Light)이며, 모바일 기준으로 비교하였습니다.

⧪ 아래 그림은 본문 글자크기를 14픽셀, 15픽셀, 16픽셀로 했을때의 비교 결과입니다.



블로그스팟 글자크기 14픽셀, 15픽셀, 16픽셀 비교
블로그스팟 본문 글자크기 14픽셀, 15픽셀, 16픽셀 비교



⧪ 아래 그림은 본문 글자크기를 17픽셀 및 18픽셀로 했을때의 비교 결과입니다.



블로그스팟 글자크기 17픽셀 18픽셀 비교
블로그스팟 본문 글자크기 17픽셀 18픽셀 비교


⧪ 아래 사진은 본문 글자크기를 19픽셀, 20픽셀로 변경했을때의 비교 결과입니다.



블로그스팟 본문 글자크기 19픽셀 20픽셀 비교하기
블로그스팟 본문 글자크기 19픽셀 20픽셀 비교


2. 테마 > 맞춤 설정

  • 테마를 클릭합니다.
  • 그러면 오른쪽에 테마 목록들이 보이고, 내 블로그스팟에 설정된 테마가 제일 상단에 보입니다. 그다음 맞춤 설정을 클릭합니다.



블로그스팟 테마 및 맞춤설정하는 방법
테마 및 맞춤설정



3. 맞춤 설정 > 고급 > 기본값 수정 > 저장

글꼴 기본값 수정으로 본문 글자크기 수정하는 방법(예. 에센셜 테마의 경우)

에센설 라이트 테마의 경우 기본값은 15픽셀로 설정되어 있습니다. 15픽셀은 모바일로 볼때 글자크기가 조금은 작다는 느낌을 줍니다. 16픽셀로 수정해 줍니다.

  • 맞춤설정을 클릭한다.
  • 고급을 클릭한다.
  • 글꼴 기본값 15px에서 16px로 수정 합니다.
  • 저장을 클릭합니다.

Contempo, Essential 등 블로그스팟에서 기본적으로 제공되는 대부분의 테마에서 위와 같은 간단한 방법으로 본문 글자크기를 조절할 수 있습니다.



블로그스팟 글자크기 수정하기
글꼴 기본값 15픽셀에서 16픽셀로 수정한다



❥ CSS 코드 입력으로 글자크기 수정하는 방법

테마에 따라서는 CSS 코드 입력으로 본문 글자크기를 조절해야 하는 경우도 있습니다. 이경우 맞춤설정 > 고급 > CSS 추가 순서로 수정합니다.

이경우 맞춤설정을 클릭하면 아래 그림과 같이 나타납니다. 다음 순서에 따라 CSS 코드를 입력하여 글자크기를 조절하시면 됩니다.

  • 맞춤설정을 클릭합니다.
  • 고급을 클릭합니다.
  • 페이지 텍스트를 클릭합니다.
  • 페이지 텍스트 메뉴에서 CSS 추가를 클릭합니다.
  • CSS 코드를 입력합니다.(.article {font-size 16px;})
  • 저장을 클릭합니다.



블로그스팟 CSS 추가로 글자크기 조절하기
블로그스팟 CSS 입력으로 글자크기 조절하기



4. 블로그에 적용

블로그에 적용(저장)을 클릭합니다. 수정결과가 정확하게 적용되었는지 결과를 확인합니다.

감사합니다.


❣ 함께 보면 좋은글 입니다.

[블로그스팟] meta name "description" 설명 누락 해결하는 방법 두가지



댓글

이 블로그의 인기 게시물

한국인이 마늘을 좋아하는 이유는? 마늘이 가진 효능/효과 정리

블로그스팟(Blogspot, 구글블로그) 카테고리 만들기(에센셜 테마 기준)

블로그스팟(Blogspot, 구글블로그) 초기 설정 하는 방법