티스토리 블로그 북클럽 스킨 썸네일 크기 변경 방법

티스토리 북클럽 스킨을 사용할 때 뉴북의 리스에 나오는 썸네일이 작게 나오는 문제가 있습니다. 글자가 잘리거나 이미지 일부분이 보이지 않을 수 있습니다. 스킨의 HTML의 s_article_rep_thumbnail를 수정하면 정사각형의 썸네일로 수정할 수 있습니다. 

 

목차

 

---

티스토리 블로그 북클럽 스킨 썸네일 크기 변경 방법

 

 

티스토리-블로그-북클럽-스킨-썸네일-크기-변경-방법

 

---

 

 

 

뉴북 스킨 편집 적용

티스토리의 북클럽 스킨을 사용합니다. 북클럽 스킨에서 스킨 편집 메뉴를 선택하게 되면 다음 그림과 같이 리스트 타입을 확인할 수 있습니다. 4가지의 북리뷰, 베스트셀러, 뉴북, 뉴스레터 의 리스트 타입을 제공합니다. 

북리뷰는 썸네일과 글자, 베스트셀러는 큰 썸네일, 뉴북은 글자+세로 사각형 썸네일, 뉴스레터는 글자로 표시됩니다. 

기본 설정은 북리뷰로 되어 있으며, 뉴북으로 변경합니다. 

 

 

뉴북-스킨-편집-적용

 

뉴북 리스트를 적용하게 되면 썸네일은 230X300 사각형 크기로 화면에 보이게 됩니다. 문제는 글자가 일부 보이지 않거나 이미지가 보이지 않는 문제가 발생합니다.  구글, 네이버 등 포털 사이트에서는 정사각형의 썸네일을 규격을 출력합니다. 따라서 글을 작성할 때 썸네일은 정사각형으로 만들어지게 되며, 뉴북의 썸네일도 정사각형 썸네일을 보여질 수 있도록 수정이 필요합니다. 

 

뉴북-스킨-썸네일

 

---

 

 

 

 

썸네일 크기 변경 C230XC230

230X300에서 230X230의 정사각형 썸네일로 변경하기 위해 (1) 꾸미기→스킨편집을 선택합니다. (2) 스킨 편집에서 HTML을 선택하고, (4) CTRL-F로 s_article_rep_thumbnail를 검색합니다. (5) 썸네일 크기가 230X300 인 것을 확인할 수 있습니다. (6) 썸네일 크기를 230X230으로 수정합니다.

<span class="thum">
	<s_article_rep_thumbnail>
		<img src="//i1.daumcdn.net/thumb/C230x230/?fname=https://blog.kakaocdn.net/dn/bQ7BKB/btq1s4OqpNr/gZ7zKK5IjJs988OFUK7hpK/img.jpg" alt="">
	</s_article_rep_thumbnail>
</span>

 

(7) 적용 버튼을 클릭합니다. (8) 화면을 갱신하면 , (9) 정상적으로 썸네일이 정삭각형으로 변한 것을 확인할 수 있습니다. 

 

 

 

썸네일-크기-변경-C230

 

 

썸네일 크기 변경이 끝났습니다. 

 

 

---

 

 

 

썸네일 크기 조절

만약 썸네일의 크기가 작은 느낌이 든다면 크기를 조절 할 수 있습니다. 스킨 편집→CSS를 클릭합니다. CSS에서 CTRL+F로 list-type-thumbnail 를 검색합니다. width가 126으로 설정되어 있습니다. 크기를 160px로 변경합니다. 

 

수정 위치는 아래 주석으로 되어 있는 3군데 입니다. 

.list-type-thumbnail .post-item .thum img {
	float: right;
	width: 150px; /*width: 126px;*/
	height: auto;
	margin-left: 57px;
	border: 1px solid #f1f1f1;
	transform: translateY(0);
	-webkit-transform: translateY(0);
	-ms-transform: translateY();
}
.list-type-thumbnail .post-item.protected .thum {
	float: right;
	width: 160px; /*width: 126px;*/ 
	height: auto;/*166px;*/
	margin-left: 57px;
	border: 1px solid #f1f1f1;
	background-color: #f8f8f8;
}

 

썸네일-크기-조절

 

 

 

---

 

마무리

구글, 네이버, 다음등 포털 사이트에서 사용하는 썸네일은 정사각형을 사용합니다. 일부 화면에서는 16:9의 가로 직사각형 썸네일을 사용하기도 합니다. 글을 작성할 때 정사각형 썸네일을 고려해서 이미지를 등록하게 되지만 북클럽 뉴북 리스트는 세로 직사각형 썸네일을 보여 주기 때문에서 정사각형으로 변경하는 작업이 필요합니다. 

 

230X300에서 230X230으로 변경하는 것 만으로 썸네일을 바꿀 수 있는 매우 간편한 팁입니다.