구글 블로그스팟 VTrick 테마 썸네일 정사각형으로 변경 방법

구글 블로그스팟 VTrick 테마에서 썸네일을 직사각형에서 정사각형으로 변경하는 방법을 소개합니다. 이 방법을 통해 썸네일이 잘리지 않고 깔끔하게 표시됩니다.

왜 썸네일을 정사각형으로 변경해야 할까요?

썸네일을 정사각형으로 변경하는 이유는 여러 가지가 있습니다:

일관성: 정사각형 썸네일은 블로그의 전체적인 디자인을 더 깔끔하고 일관되게 만듭니다.
적응성: 다양한 디바이스와 해상도에서 이미지가 왜곡되지 않고 올바르게 표시됩니다.
집중도: 방문자의 시선을 더 잘 끌 수 있어 콘텐츠의 클릭률을 높일 수 있습니다.
표준화: 여러 플랫폼에서 사용하는 표준 이미지 비율로, 소셜 미디어 공유 시에도 이미지가 잘리거나 변형되지 않습니다.

셈네일 변경시 주의사항

직사각형의 이미지만 지속적으로 사용한 블로그 같은 경우에는 기존에 썸네일이 좌우가 짤리는 경우가 발생되므로 신중하게 결정 하셔야 합니다.

테마 백업 하기

테마 수정하기 전에 블로그스팟 관리자 페이지에서 "테마" > "백업"을 실시 합니다.

테마 HTML 편집

블로그스팟 관리자 페이지에서 "테마" > "HTML 편집"으로 이동합니다.

썸네일 비율 수정하기

첫 번째로 썸네일 비율을 16:9에서 1:1로 수정합니다.

Ctrl+F 키를 눌러 검색창을 띄웁니다.
viewBox='0 0 16 9'을 찾아 viewBox='0 0 1 1'로 수정합니다.
HTML 내 모든 0 0 16 9를 0 0 1 1로 변경합니다.

HTML 소스

viewBox='0 0 1 1'

리사이즈 이미지 수정

두 번째로 리사이즈 이미지를 수정합니다.

Ctrl+F 키를 눌러 resizeImage(data:post.featuredImage, 72,를 검색합니다.
숫자 72를 400으로 변경합니다.
HTML 내 모든 resizeImage(data:post.featuredImage, 72,를 resizeImage(data:post.featuredImage, 400,로 변경합니다.

HTML 소스

resizeImage(data:post.featuredImage, 400,

함께 보면 좋은 글 정사각형 이미지 수정

마지막으로 CSS 코드를 추가하여 정사각형 썸네일을 구현합니다.

Ctrl+F 키를 눌러 ]]></b:skin> 찾은 다음 위에 코드를 붙혀 넣습니다.

HTML 소스

.entry-image-wrap {
    width: 100%;
    padding-top: 100%; /* 1:1 비율 유지 */
    position: relative;
    overflow: hidden;
}

.entry-thumb {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 이미지가 컨테이너를 꽉 채우도록 함 */