블로그스팟(구글블로그) 게시물 크기에 맞게 이미지 크기 자동 조정

닉네임

20 1월, 2023

Blogger에서 게시물 이미지의 크기를 자동으로 조정하는 방법에 대해 많은 사람들이 ㅈ같다고 여겼습니다...

저는 이번 게시물에서 이미지를 동일한 너비로 만들고 블로그 게시물 영역에 완벽하게 맞춰 블로그 모양을 개선하는 방법을 보여줍니다. (해당 블로그는 복붙 방지이기에 코드는 맨아래에 복사 가능하게 해놨음)

아래 코드는 원래 비율을 유지하고 이미지가 왜곡되지 않도록 자동으로 높이를 설정합니다.

시작 전 참고사항

게시물에 이미지를 업로드하기 전에 이미지 크기를 조정하는 것이 좋습니다. 큰 이미지를 업로드하고 아래 코드를 사용하여 자동으로 크기를 작게 조정하면 브라우저는 템플릿의 나머지 코드를 읽기 전에 먼저 큰 이미지를 로드합니다. 즉, 블로그 로드 속도가 느려집니다.

또한 이미지 품질이 압축되거나 왜곡되지 않으므로 Blogger 옵션에서 원본 크기를 선택하는 것이 좋습니다.

이미지의 화소 변화를 생각해두시고, 작은 이미지를 크게 만들어지면서 흐릿해지고 화질이 구려집니다.

CSS를 사용하여 Blogger 이미지 크기 자동 조정

템플릿 > HTML 편집으로 이동하여 ]]> </b:skin> 위에 ]]> </b:skin>다음에 아래 코드를 복붙해주세요

모든 이미지의 너비를 600px로 설정할려면 이미지가 600px보다 크거나 작은 경우 이미지가 늘어나거나 픽셀화되어 나타날 수 있습니다.

.post-body img { width:600px; height:auto; } (말 그대로 600px로 고정하는것임)

모든 이미지 의 너비 가 최소 600px이기를 원하면 이 코드를 사용하십시오. 이로 인해 이미지가 설정된 크기보다 작은 경우 이미지가 늘어납니다.

.post-body img { min-width:600px; min-height:auto; } (최소 600px보다 작으면 키워줌)

이미지 너비를 최대 600px 로 하려면 이 코드를 사용하세요, 이렇게 하면 더 큰 이미지의 크기가 조정되어 공간에 적절하게 맞춥니다.

.post-body img { max-width:600px; max-height:auto; } (최대 600px로 고정하는거임)

그런 다음 표시(숫자px)된 너비 값을 블로그 게시물 영역에 맞는 숫자로 변경합니다. 게시물 너비 영역이 올바르게 설정된 경우 위의 값을 100%로 변경할 수도 있습니다 .

일반적으로 필요하지는 않지만 A, B 및 C에 가입할 수도 있습니다. 이미지를 업로드할 때 최상의 품질을 얻으려면 원본 크기를 선택해야 합니다.

참고로 한방에 업로드할때는 HTML 설정에서 하는걸 추천합니다. 그래야 한방에 원본 설정이 가능합니당

스크립트를 사용하여 Blogger 이미지 크기 자동 조정

일부 블로그 템플릿에서는 잘 작동하지 않았지만 다른 템플릿에서는 잘 작동합니다.(내꺼요) 템플릿 > HTML 편집 > 위의 스크립트에 다음 스크립트를 추가합니다 </head> 이후에

/**

this script was written by Confluent Forms LLC http://www.confluentforms.com

for the BlogXpertise website http://www.blogxpertise.com

any updates to this script will be posted to BlogXpertise

please leave this message and give credit where credit is due!

**/

$(document).ready(function(){

// the dimension of your content within the columns

var areawidth = $('#Blog1').width();

$('.post-body').find('img').each(function(n, image){

var image = $(image);

var height = image.attr('height');

var width = image.attr('width');

var newHeight = (height/width * areawidth).toFixed(0);

image.attr('width',areawidth).attr('height',newHeight);

var greater = Math.max(areawidth,newHeight);

image.attr({src : image.attr('src').replace(/s\B\d{3,4}/,'s' + greater)});

});

//]]></script>

그런 다음 위의 템플릿 > HTML 편집 >에 다음 코드를 추가하고 게시물 영역을 초과하는 경우 이미지를 다시 게시물 영역으로 이동하도록 값을 ]]> </b:skin> 에서 변경해야 할 수 있습니다.(기본 사이즈 변경)

이미지(사진)를 등록할 때 자동으로 여백 만들때

왼쪽으로 이동할려면

.post-body img { margin-left: -30px;}

또는 오른쪽으로 이동하려면

.post-body img { margin-left: 30px;}

코드 복사하기(위에꺼 골라서 쓰셈)

이상 다음 컨텐츠는 이미지 그림자, 여백 흐릿 등 수정하는거임...