구글블로그 이미지 작게 뜰 때 본문 사진 크게 보이게 하는 CSS 설정

구글블로그에 사진을 올렸는데 본문에서는 이상하게 작게 보이는 경우가 있습니다. 특히 PC에서는 여백이 너무 많이 남고, 모바일에서는 사진이 본문 폭을 다 쓰지 못해 답답하게 보일 때가 많습니다.

참고 : 블로그 10년차의 현실 구글 유입 1만 → 300, 네이버는 살아났는데…어디로 가나

이 문제는 대부분 이미지 업로드 자체보다 블로그 테마 CSS, 이미지 컨테이너 폭, 구글 이미지 URL 사이즈 값 때문에 생깁니다. 사진 원본은 큰데 본문에서만 작게 보인다면 CSS를 한 번 수정하는 것만으로 대부분 해결됩니다.

구글블로그 이미지가 작게 뜨는 이유

구글블로그는 이미지를 본문에 넣을 때 자동으로 separator, post-body, a img 같은 구조 안에 이미지를 감싸는 경우가 많습니다.

그래서 단순히 이미지만 크게 설정해도 바깥 박스가 작게 잡혀 있으면 사진이 크게 보이지 않습니다.

또 하나는 이미지 주소 문제입니다.

구글블로그 이미지는 주소 안에 /s320/, /s400/, /s640/ 같은 사이즈 값이 들어가는데, 이 값이 작으면 CSS로 사진 폭을 키워도 선명하지 않거나 기대만큼 크게 보이지 않습니다.

원인	증상
본문 이미지 CSS 제한	사진이 원본보다 작게 보이고 양쪽 여백이 많이 남습니다.
이미지 링크 박스 폭 제한	img 태그만 수정해도 크기가 그대로인 경우가 있습니다.
/s320/ 같은 작은 이미지 주소	사진은 커졌지만 흐릿하거나 화질이 떨어져 보입니다.
모바일 반응형 미적용	스마트폰에서 이미지가 작거나 화면 밖으로 밀릴 수 있습니다.

구글블로그 이미지 크게 보이게 하는 CSS

가장 먼저 아래 CSS를 적용하면 됩니다.

구글블로그 본문에 들어간 이미지를 본문 폭에 맞춰 크게 보여주고, 모바일에서도 화면을 벗어나지 않도록 잡아주는 설정입니다.

테마 -> 맞춤설정으로 들어갑니다.

고급탭에서 CSS 추가를 선택하면 구글블로그에 CSS를 추가할 수 있으며 여기에 아래 코드를 넣어주면 됩니다.

/* 구글블로그 본문 이미지 크게 표시 */
.post-body img,
.entry-content img,
.post img,
.blog-posts img {
  max-width: 100% !important;
  width: 100% !important;
  height: auto !important;
  display: block !important;
  margin: 20px auto !important;
}

/* 이미지가 링크로 감싸져 있을 때 */
.post-body a img {
  max-width: 100% !important;
  width: 100% !important;
  height: auto !important;
}

/* 구글블로그 이미지 박스와 정렬 영역 */
.post-body figure,
.post-body .separator {
  max-width: 100% !important;
  width: 100% !important;
  text-align: center !important;
}

사진을 본문 폭에 꽉 차게 보여주고 싶다면 width:100% 설정이 가장 간단합니다. 다만 세로 사진이나 작은 캡처 이미지는 너무 크게 늘어나 보일 수 있으니, 그런 경우에는 아래처럼 최대 폭을 따로 제한하는 방식이 더 보기 좋습니다.

본문 사진을 1200px까지만 키우는 CSS

사진이 너무 크게 늘어나는 게 싫다면 아래 CSS가 더 안정적입니다.

PC에서는 최대 1200px까지만 커지고, 모바일에서는 화면 폭에 맞춰 자동으로 줄어듭니다.

/* 구글블로그 이미지 최대폭 제한 */
.post-body img,
.post-body a img {
  max-width: 1200px !important;
  width: 100% !important;
  height: auto !important;
  display: block !important;
  margin: 20px auto !important;
}

.post-body .separator {
  width: 100% !important;
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

구글블로그 CSS 넣는 위치

구글블로그 관리자에서 CSS를 넣는 위치는 두 가지입니다.

저는 처음에는 맞춤설정 CSS에 넣고 확인한 뒤, 테마가 꼬이거나 적용이 안 될 때만 HTML 편집에서 직접 넣는 편입니다.

방법	설정 위치
쉬운 방법	구글블로그 관리자 → 테마 → 맞춤설정 → 고급 → CSS 추가
확실한 방법	구글블로그 관리자 → 테마 → HTML 편집 → </head> 위에 style 코드 삽입

HTML 편집에 넣는 전체 코드

HTML 편집에서 직접 넣을 때는 아래처럼 <style> 태그까지 포함해서 넣어야 합니다.

위치는 보통 </head> 바로 위가 가장 무난합니다.

<style>
/* 구글블로그 본문 이미지 크게 표시 */
.post-body img,
.entry-content img,
.post img,
.blog-posts img {
  max-width: 100% !important;
  width: 100% !important;
  height: auto !important;
  display: block !important;
  margin: 20px auto !important;
}

/* 이미지 링크로 감싸진 경우 */
.post-body a img {
  max-width: 100% !important;
  width: 100% !important;
  height: auto !important;
}

/* 이미지 박스 폭 보정 */
.post-body figure,
.post-body .separator {
  max-width: 100% !important;
  width: 100% !important;
  text-align: center !important;
}
</style>

CSS를 넣어도 이미지가 작거나 흐릴 때

CSS를 넣었는데도 사진이 선명하지 않거나 여전히 작게 느껴진다면 이미지 주소를 확인해야 합니다. 구글블로그 이미지는 주소 안에 사이즈 값이 들어가는데, 이 값이 작게 들어가 있으면 원본보다 작은 사진을 불러오게 됩니다.

예를 들어 이미지 주소 중간에 아래처럼 /s320/이 들어가 있으면 작은 이미지가 불러와질 수 있습니다.

https://blogger.googleusercontent.com/img/.../s320/image.jpg

이럴 때는 아래처럼 /s1600/ 또는 /w1200/ 형태로 바꾸면 더 큰 이미지를 불러올 수 있습니다.

https://blogger.googleusercontent.com/img/.../s1600/image.jpg

https://blogger.googleusercontent.com/img/.../w1200/image.jpg

저라면 먼저 CSS를 넣고, 그래도 사진이 흐리게 보일 때만 이미지 주소의 사이즈 값을 확인합니다. 모든 이미지를 무조건 s1600으로 바꾸면 페이지 로딩이 느려질 수 있어서, 일반 본문 이미지는 w1200 정도가 보기와 속도 면에서 더 무난합니다.

모바일에서 이미지가 잘리는 경우

모바일에서 사진이 화면 밖으로 밀리거나 일부가 잘린다면 부모 박스에 고정 폭이 들어가 있을 가능성이 큽니다. 이럴 때는 이미지뿐 아니라 본문 안의 figure, separator, table, iframe까지 같이 잡아주는 CSS가 좋습니다.

/* 모바일 본문 요소 화면폭 보정 */
.post-body img,
.post-body figure,
.post-body .separator,
.post-body iframe,
.post-body table {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

.post-body img {
  height: auto !important;
}

특히 캡처 이미지, 인포그래픽, 표 이미지처럼 가로가 긴 이미지는 모바일에서 잘리는 일이 많습니다. 이 경우 max-width:100%와 height:auto는 거의 필수로 넣어주는 게 좋습니다.

사진이 너무 커질 때 조절하는 CSS

모든 이미지를 본문 폭에 맞추면 보기 좋은 경우도 있지만, 아이콘이나 작은 설명 이미지는 과하게 커져서 오히려 어색해질 수 있습니다.

이럴 때는 모든 이미지를 100%로 키우기보다 최대 폭을 정해두는 방식이 낫습니다.

/* 너무 작은 이미지가 과하게 커지는 것 방지 */
.post-body img {
  max-width: 100% !important;
  width: auto !important;
  height: auto !important;
  display: block !important;
  margin: 20px auto !important;
}

/* 가로형 대표 이미지나 큰 이미지에만 적용하고 싶을 때 */
.post-body .separator img {
  width: 100% !important;
  max-width: 1200px !important;
}

본문 대표 이미지, 제품 사진, 설명용 캡처처럼 크게 보여야 하는 이미지는 100%로 키우고, 작은 아이콘이나 버튼 이미지는 원본 크기를 유지하는 식으로 쓰면 더 자연스럽습니다.

구글블로그 이미지 크기 설정 정리

상황	추천 설정
사진이 본문에서 작게 보임	post-body img에 width:100%, max-width:100% 적용
사진이 커졌지만 흐림	이미지 주소의 /s320/, /s400/ 값을 /s1600/ 또는 /w1200/으로 변경
모바일에서 사진이 잘림	img, figure, separator에 max-width:100% 적용
작은 아이콘까지 너무 커짐	전체 이미지 width:auto 적용 후 separator img만 100% 적용
페이지 속도가 느림	s1600보다 w1200 수준으로 조절

바로 쓰기 좋은 추천 CSS

여러 설정을 따로 넣기 귀찮다면 아래 CSS 하나만 넣어도 충분합니다.

사진은 본문 폭에 맞게 커지고, 모바일에서도 잘리지 않으며, 이미지 박스 폭까지 같이 잡아줍니다.

/* 구글블로그 본문 이미지 반응형 크게 표시 */
.post-body img,
.post-body a img {
  width: 100% !important;
  max-width: 1200px !important;
  height: auto !important;
  display: block !important;
  margin: 20px auto !important;
  box-sizing: border-box !important;
}

/* 구글블로그 이미지 감싸는 영역 */
.post-body .separator,
.post-body figure {
  width: 100% !important;
  max-width: 1200px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

/* 모바일 화면 보정 */
@media screen and (max-width: 768px) {
  .post-body img,
  .post-body a img,
  .post-body .separator,
  .post-body figure {
    max-width: 100% !important;
  }
}

구글블로그 이미지는 테마마다 클래스명이 조금씩 다르게 잡히지만, 대부분은 post-body와 separator 안에서 해결됩니다. CSS를 넣은 뒤에도 변화가 없다면 브라우저 캐시를 삭제하거나 시크릿 모드에서 다시 확인하는 게 좋습니다.

Q. 구글블로그 이미지를 무조건 width 100%로 해도 되나요?

대표 이미지나 본문 설명 이미지는 괜찮지만, 작은 아이콘이나 로고까지 커질 수 있습니다. 그런 경우에는 .separator img에만 width:100%를 적용하는 방식이 더 좋습니다.

Q. CSS를 넣었는데 사진이 흐릿해 보이는 이유는 뭔가요?

이미지 주소에 /s320/, /s400/처럼 작은 사이즈 값이 들어가 있을 가능성이 큽니다. 이 경우 /s1600/ 또는 /w1200/으로 바꾸면 더 선명하게 보입니다.

Q. 모바일에서 사진이 화면 밖으로 밀리면 어떻게 해야 하나요?

img뿐 아니라 figure, separator에도 max-width:100%를 넣어야 합니다. 이미지를 감싸는 박스가 고정 폭이면 사진만 수정해도 문제가 남을 수 있습니다.

Q. 구글블로그 테마 HTML 편집이 어려우면 어디에 넣으면 되나요?

테마 맞춤설정의 CSS 추가 메뉴에 먼저 넣는 게 가장 쉽습니다. 적용이 안 될 때만 HTML 편집에서 </head> 위에 style 태그로 넣으면 됩니다.