블로스스팟 썸네일 사진 조정 방법 썸네일

 

블로그스팟 썸네일 사진 크기 조절하기

제가 사용하는 Evol-blogger-template 기준으로 작성되었습니다.

저는 사진을 1600 x 1067 사이즈로 업로드해요.

기존 Evol-blogger-template을 그대로 사용하면 측면 이미지가 짤리더라구요.

모바일 화면으로 보았을 때는 위 아래가 심하게 짤리구요.

관심있을 만한 글도 마찬가지였어요.

이번 사이즈 조절도 html/css를 수정하면 고칠 수 있어요.


PC 메인 썸네일 이미지 크기 조절하기

 .index-post .post-image-wrap{
    width: 100%;
    height: 365px;
    overflow: hidden;
    margin: 0;
}

html 편집으로 들어가서 위에 소스코드를 찾으세요.

자신이 주로 업로드 하는 썸네일 사이즈에 맞는 height를 찾아 입력해보아야 해요.

이건 숫자를 계속 수정해보고 잘 어울리는 값을 찾으셔야해요.

 1600 x 1067 기준으로 270이 제일 적당하더라구요.

저는 썸네일에 위 아래 줄에 라인을 넣는 게 더 깔끔해 보여서 라인을 넣어주었어요.

최종적으로 수정한 코드는 아래와 같아요.

 .index-post .post-image-wrap{
    width: 100%;
    height: 270px;
    overflow: hidden;
    margin: 0;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
}


 border-top/border-bottom을 이용해서 1픽셀 씩 위 아래에 테두리를 넣어주었어요.



모바일 메인 썸네일 이미지 크기 조절하기


모바일 썸네일 크기를 조절하는 코드는 아래와 같아요.

.index-post .post-image-wrap, .index-post .post-image-wrap .post-image-link {
    float: left;
    width: 100%;
    height: 185px;
    overflow: hidden;
    margin: 0 0 10px 0;
}

마찬가지로 height 값을 수정해서 최적화된 값을 찾아야해요. 저장하고 모바일로 이미지를 확인하는 방법 밖에 없더라구요.

저는 255px이  제일 적당해서 255로 수정했어요.



관심 있을 만한 글(related-posts) 썸네일 크기 조정하기

관심 있을 만한 글 썸네일 크기 조절 코드는 아래와 같아요.

 .related-posts .post-image-link{
    width:100%;
    height:120px;
    position:relative;
    overflow:hidden;
    display:block;
    margin:0 0 10px;
    border-radius:3px
}

여기서도 height 값을 수정해서 적절한 크기를 찾으시면되요. 

기존 높이 120은 너무 낮아서 제가 작성한 포스팅이 무엇을 보여주는지 제대로 표현하지 못했어요. 저는 240px이 맞아서 240px로 조절했어요.


블로거스팟 관련 글 모아보기