티스토리 북클럽 스킨 뉴북 리스트 썸네일 정사각형으로 만들기

티스토리 북클럽 스킨 뉴북 리스트 썸네일 정사각형으로 만들기

 

 

티스토리 블로깅을 해오면서, 다른 사람들의 블로그와 내 블로그가 뭔가 좀 서로 다른 것 같다는 묘한 느낌을 받고 있었는데, 오늘 자세히 살펴보면서 썸네일 때문이었다는 것을 알게 되었습니다. 오옷!

 

이래 저래 인기 많은 북클럽 스킨이, 아무래도 Book과 관련된 테마를 갖고 있다보니, 리스트의 썸네일이 책 모양인 직사각형 Portrait 형태를 디폴트로 띄고 있습니다.

 

 

아무래도 저는 이것을 직사각형, Square 형태로 바꾸고자 합니다.

 

 

북클럽 스킨 기본 설정

 

일단 저의 북클럽 스킨 기본 설정은 다음과 같습니다.

 

 

 

그리고 목록 설정은 아래와 같습니다.

 

 

 

그럼, 썸네일을 직사각형으로 변경해보겠습니다.

 

 

첫번째, HTML 편집 > 수정

 

Html 소스 창에서 Ctrl + F로 아래 단어를 검색합니다. ( 행번호는 참고하시되, 제것과 다를 수 있습니다!)

s_article_rep_thumbnail

 

 

 

img 엘리먼트에서 이미지 크기를 결정하는 것으로 보이는 부분을 정사각형 형태로 수정해줍니다.

 

<!-- 변경 전 -->
<img src="//i1.daumcdn.net/thumb/C230x300/?fname~~ 블라블라


<!-- 변경 후 -->
<img src="//i1.daumcdn.net/thumb/C230x230/?fname~ 블라블라


<!-- 요약: C230x230 으로 변경했습니다!!-->

 

그리고, [적용] 버튼을 클릭해주고, Alert 창에서 [확인] 클릭!!

HTML 수정 끝!!

 

 

 

두 번째, CSS 편집 > 수정

 

CSS 소스 창에서 Ctrl + F로 아래 단어를 검색합니다. ( 행번호는 참고하시되, 제것과 다를 수 있습니다!)

.list-type-thumbnail .post-item .thum img

 

 

thum의 height 크기를 결정하는 것으로 보이는 부분을 height: auto; → height: fit-content; 로 수정해줍니다.

 

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


<!-- 변경 후 -->
.list-type-thumbnail .post-item .thum img {
	float: right;
	width: 126px;
	height: fit-content;
	margin-left: 57px;
	border: 1px solid #f1f1f1;
	transform: translateY(0);
	-webkit-transform: translateY(0);
	-ms-transform: translateY(0);
}


<!-- 요약: height: fit-content; 으로 변경했습니다!!-->

 

이 또한, [적용] 버튼을 클릭해주고, Alert 창에서 [확인] 클릭!!

HTML 수정 끝!!

 

아래와 같이 목록 썸네일들이 정사각형 형태로 변경되었습니다. 완료!

 

 

 

참, 쉽죠?

 

마치며

 

썸네일 형태를 바꾼다고 뭐, 갑자기 많은 방문객이 발생하는 것은 아니겠지만 기분전환겸 한번 썸네일 형태를 직사각형으로 바꾸어보았습니다.

 

사실 직사각형 형태는, 이미지를 다루기에 가장 편리한 형태이긴 합니다. 가로로 길쭉한 이미지를 넣던, 세로로 길쭉한 이미지를 넣던 평균적으로 기본빵은 하게 되니까요.

 

다음에 또 수정할 일이 있을 것 같아 기록으로 수정해두었으니, 필요하신 분들은 참고하여 사용해주세요.

 

오늘도 즐거운 코딩생활, 즐코딩

KINcoding.