티스토리 북클럽 스킨 썸네일 정사각형으로 바꾸기

티스토리 썸네일 비율 변경하기

'책'을 주제로 디자인된 북클럽 스킨은 썸네일도 정사각형 모양이 아니라 책 표지의 비율과 비슷한 직사각형의 비율입니다.

직사각형의 썸네일

하지만, 스킨 설정에서 간단하게 설정을 바꿔주면 정사각형 모양으로 썸네일 비율을 바꿀 수 있습니다.

1. HTML 수정

블로그 관리 > 스킨 편집 > html 편집으로 들어갑니다.

 

ctrl + F 단축키를 누르고, <s_article_rep_thumbnail>을 복사해 붙인뒤 엔터 버튼을 눌러 검색합니다.

<s_article_rep_thumbnail>
 <img src="//i1.daumcdn.net/thumb/C300x300/?fname=https://blog.kakaocdn.net/dn/btJw0e/btqNti8m3w9/eylsLER4pJcrTwOl73EW8k/img.jpg" alt="">
</s_article_rep_thumbnail>

위에처럼 소스중 C230x300을 C300x300으로 바꿔준뒤 적용 버튼을 눌러 저장합니다.

2. CSS 수정

상단의 CSS를 눌러 CSS 편집창으로 들어갑니다.

 

ctrl + F 단축키를 누르고, .list-type-thumbnail .post-item .thum img {을 복사해 붙인뒤 엔터 버튼을 눌러 검색합니다.

.list-type-thumbnail .post-item .thum img {
	float: right;
	width: 150px;
	height: auto;
	margin-left: 57px;
	border: 1px solid #f1f1f1;
	transform: translateY(0);
	-webkit-transform: translateY(0);
	-ms-transform: translateY();
}

위에처럼 소스중 width: 135px;를 width: 150px;으로 바꿔준뒤 적용 버튼을 눌러 저장합니다.

 

소스 변경후 정사각형으로 바뀐 썸네일

이후 블로그에 다시 들어가보면 썸네일이 정사각형으로 바뀐 모습을 확인할 수 있습니다.