2013년 7월 6일 토요일

구글 블로그(blogger) 이미지의 최대 폭 제한하기


일반 템플릿을 사용할 때, 큰 사이즈의 이미지를 원본크기로 올리면 그림처럼 이미지가 포스트 영역을 뚫고 나가 우측의 사이드바 영역을 침범하는 경우가 있습니다.

아래의 코드는 이러한 문제를 해결하는데 도움을 주는 코드입니다. 

 .post-body img{max-width:560px;height:auto;clear:both}  

또는,

 .post-body img{  
 max-width: 560px;  
 height:auto;  
 clear:both;  
 }  

위의 코드를 [대시보드→템플릿→맞춤설정→고급→CSS추가] 에 삽입하면, 포스트에 표시되는 이미지의 최대 넓이가 정해진 넓이 만큼 제한됩니다. 코드를 붙여넣을 때 '560' 대신 자신이 원하는 픽셀 값을 입력합니다.




! 코드 입력 전에 템플릿을 반드시 백업해두시기 바랍니다.



댓글 7개:

  1. 여러 개의 이미지를 동시에 사이즈 수정하는 방법은 없는지요?

    답글삭제
  2. 작성자가 댓글을 삭제했습니다.

    답글삭제
  3. 이런 방법이 있을까 찾고 있었는데, 좋은 정보를 알려주셔서 감사합니다. 말씀하신 대로 했더니 잘 작동합니다.

    답글삭제
  4. .separator img{
    max-width: 750px;
    height:auto;
    clear:both;
    }

    이렇게 하니.. 동적뷰에서 가능하네요~
    세컨용으로 구글 블로그로 세팅중입니다.

    http://poetcs-file.blogspot.kr/

    답글삭제
    답글
    1. 위코드를 css 에넣으면 되는것이죠?

      본문 글 사진만 적용이 되는것인가요?

      삭제
    2. 죄송한데 동적뷰에서도 적용할수 있는 코드는 없는지 ㅡㅡ:

      삭제
  5. 안녕하세요. css에 800픽셀로 가로길이 조정해도 그 사진을 다른 블로그나 사이트에 복사해서 쓰면 도로 커져있네요. 즉 구글 블로그에서 볼 때만 일시적으로 사이즈가 조정된 것처럼 보일 뿐 실제로는 크기가 달라진 게 아니었습니다. 어떻게 해야 다음블로그나 네이버블로그처럼 리사이징이 자동적으로 쉽게 되는 건가요? 저는 구글 블로그에 올린 사진을 퍼서 다른 곳에서도 쓰려고 하는데 크기조절이 3가지 뿐이라 엑스라지는 너무 작고 원본은 너무 커서 곤란하네요. 심지어 알려주신 css코드도 임시방편으로 구글 블로그내에서만 그리 보일 뿐 전혀 리사이징이 된게 아니었어요. 방법 좀 알려주세요.

    답글삭제