구글 블로그에서 본문 너비와 글자 크기 조절하는 방법
구글 블로그의 기본 템플릿은 간단하지만, 본문이 너무 좁거나 글자 크기가 작게 설정되어 있는 경우 가독성이 떨어질 수 있습니다.
특히 ‘Gambit’, ‘Emporio’, ‘Contempo’ 등의 템플릿을 사용하는 경우, 모바일에는 잘 맞지만 데스크탑에서는 본문 너비가 좁고 글자 크기가 작아보이는 문제가 자주 발생합니다.
이런 문제는 HTML 또는 CSS 사용자 정의를 통해 비교적 쉽게 조정할 수 있습니다.
1. 블로그 본문 너비를 넓히는 방법
템플릿 편집에서 ‘테마 → HTML 편집’ 메뉴에 진입합니다.
아래와 같은 CSS 코드를 추가하면 본문 영역의 최대 폭을 늘릴 수 있습니다.
<style>
.blog-posts, .post-body {
max-width: 860px !important;
margin: auto !important;
}
</style>
이 코드를 </head> 태그 바로 위에 삽입합니다. ‘max-width’ 값을 적절히 조정해 본인 블로그 스타일에 맞출 수 있습니다.
2. 기본 폰트 크기와 행간 조정하기
글자가 작아 보이거나 행간이 좁아서 답답한 경우 아래 코드를 추가합니다.
<style>
.post-body {
font-size: 17px;
line-height: 1.8;
}
</style>
폰트 크기는 font-size, 줄 간격은 line-height로 조정할 수 있으며, 둘 다 숫자값으로 자유롭게 설정 가능합니다.
3. 모바일 반응형은 유지됩니다
이 방식은 데스크탑 화면에서만 본문 폭을 넓히고, 모바일에서는 자동으로 좁게 유지되도록 작동합니다. 즉, 반응형 구조는 그대로 유지하면서 데스크탑의 가독성만 개선할 수 있습니다.
템플릿 전체를 수정하는 것이 아니라 CSS를 덧입히는 방식이라 오류 발생 가능성도 매우 낮습니다.
4. 저장 후 항상 ‘라이브 블로그 보기’로 확인
코드를 삽입한 후에는 반드시 실제 블로그를 열어 변화된 레이아웃을 확인해야 합니다. 변경이 반영되지 않은 경우 브라우저 캐시를 삭제하거나 새로고침(CTRL+F5)을 시도해보는 것이 좋습니다.
또한, 구글 블로그 앱에서는 CSS 변경이 반영되지 않을 수 있으므로, 실제 데스크탑 브라우저에서 확인하는 것이 정확합니다.
댓글 쓰기