Whatever스킨 - 포스팅 썸네일 비율 알맞게 변경하는 법

안녕하세요. 토미타미입니다. 오늘은 왓에버 스킨 포스팅 썸네일 비율을 변경해보려고 합니다. 스킨 유저는 공감하실 것 같은데. 아래 사진처럼 블로그 내 썸네일의 이미지가 일부만 보여서 썸네일이 안 이쁩니다! 처음에는 방법도 모르고 가운데 제목을 넣으면 제목까지는 노출돼서 크게 상관하지 않았는데. 제가 사이드바에 최신 글과 인기글에 썸네일을 추가했었는데. 여기선 또 제대로 나오고 미관상 이쁘지도 않고 개인 만족으로라도 수정해야겠더라고요.

 

 

변경하다 보니 적용된 기본 썸네일 프레임은 너비가 좀 더 긴 형태인데요. 저는 대부분의 썸네일이 정사각형으로 제작해서 사용하고 있는데요. 기존 썸네일 비율에 맞추자니 좌우가 늘어나 이쁘지 않게 나오기 때문에 정사각형으로 비율 적용했어요. 여러분도 기존 비율을 유지한 것과 정사각형 비율 선택하여 적용하실 수 있도록 두 가지 버전을 알려드리려고 해요. 그럼, 바로 가시죠!

 

 

 

 

 

HTML 변경

 

먼저 HTML을 변경해주도록 할게요. [스킨 편집-HTML 편집-HTML]에 가셔서 찾기로 post-item을 검색하고 2번째에 위치한 부분으로 가주세요. 글 목록에 있는 건 post-item에 해당하는 부분입니다. 여기 이미지 같은 경우는 html의 자체에서 기본 프레임이 설정돼 있어요. 그래서 기존 썸네일이 일부분만 보였던 겁니다. 이 부분을 해결하기 위해서는 사진에서는 안 보이는데 <img> 라인에 https://blog.kakaocdn.net/dn/2KKD6/btrTVVxmG5q/8T9pAGqzMrJszMmSHsSQh1/img.jpg의 앞에 위치하고 있는 //i1.daumcdn.net/...를 지워주시면 됩니다.

최종 완성된 HTML형태는 아래 더보기와 같아요. 내용을 그냥 복사 붙여 넣기 하실 분은 [!##_article_rep~~_##]에서 !(느낌표) 지우고 적용해 주셔야 합니다.

 

<span class="thum">
									<s_article_rep_thumbnail>
                  <img src="[!##_article_rep_thumbnail_raw_url_##]" alt="썸네일">
									</s_article_rep_thumbnail>
								</span>

 

 

 

 

 

CSS 변경

 

왼: 테스크탑 / 오: 모바일화면

이제 CSS변경만 해주시면 끝입니다. 간단하죠? 총 4곳의 설정값을 변경해줘야 하는데요. 우선, [스킨 편집-HTML 편집-CSS]에 가셔서 찾기(ctrl+F)로 thum img를 검색해주세요.

 

기존 직사각형 썸네일

검색하셨다면 총 8개가 검색될 거예요.그중 5번째에 있는 .post-item .thum과 .post-item .thum img의 값을 변경해 주실면 됩니다.  다음은 핸드폰에서 보이는 썸네일도 변경해주셔야 하는데. 검색 기준으로 8번째에 위치해 있고 동일하게 내용 변경해주시면 됩니다. 그래도 혹시 모르니까 위에 조금 올려서 @media screen and (max-width: 767px)이 있는지 위치 확인 한번 해주시면 좋을 것 같습니다.

 

.post-type-text .post-item .thum {
   float: right;
   width: 220px;
   height: 160px;
   margin: 0 0 0 35px;
   padding-bottom:0;
}
.post-type-text .post-item .thum img {
   position: relative;
   width: 220px;
   height: 160px;
}

@media screen and (max-width: 767px)
.post-type-text .post-item .thum {
    width: 130px;
    height: 100px;
}
.post-type-text .post-item .thum img {
    width: 130px;
    height: 100px;
    margin: 0;
}

 

 

정사각형 썸네일

정사각형으로 변경하는 건 위와 동일하게 진행해주시면 되고 다만 width와 height의 값을 같게 설정해주시면 됩니다. 저 같은 경우는 데스크톱에서 200px이고 핸드폰에서 115px로 설정했습니다. 

 

.post-type-text .post-item .thum {
   float: right;
   width: 200px;
   height: 200px;
   margin: 0 0 0 35px;
   padding-bottom:0;
}
.post-type-text .post-item .thum img {
   position: relative;
   width: 200px;
   height: 200px;
}

@media screen and (max-width: 767px)
.post-type-text .post-item .thum {
    width: 115px;
    height: 115px;
}
.post-type-text .post-item .thum img {
    width: 115px;
    height: 115px;
    margin: 0;
}

 

 

 

함께 보면 좋은 포스팅:

[일상다반사/블로그] - Whatever 스킨 오른쪽에 사이드바 만들기

[일상다반사/블로그] - [티스토리 블로그] HTML코드로 오디오/음성 파일 만들기

[일상다반사/블로그] - Whatever스킨 - 사이드바 인기글/최신글 썸네일 추가

[일상다반사/블로그] - [티스토리] 본문 소제목 꾸미기 : 쉽게 내용 구분하고 가독성도 높이자!