[CSS] 티스토리 북클럽-북리뷰 테마 썸네일 가운데 정렬하는 방법

 

변경 전

  현재 티스토리 Book Club 스킨 중에서 북리뷰 리스트 타입을 사용하고 있다. 정사각형 사진을 썸네일로 지정하면 위쪽으로 정렬되어 보기 좋지 않아서, 직사각형 모양을 유지하되 썸네일의 Y 좌표가 가운데 오도록 정렬하고 싶었다.

변경 전

 

 

변경하는 부분

  여러 글들을 읽어보니 CSS 한 줄만 바꾸어도 쉽게 조정할 수 있다는 사실을 알게 되었다. 설정 > 스킨 편집 > CSS에 들어가서 Ctr+F(command+F)로 .post-item .thum img에 해당하는 줄을 찾는다.

변경한 내용

 

 

  나의 경우는 transform: translateY(-25%); 부분을 수정해야 했다. 원래 값은 transform: translateY(-25%);로 되어있는데 -20으로 변경하니 내 마음에 드는 가운데 위치에 제대로 조정되었다. 추가로 width도 100%에서 inherit으로 변경했다.

.post-item .thum img {
	width: inherit;
	height: auto;
	transform: translateY(-25%);
	-webkit-transform: translateY(-20%);
	-ms-transform: translateY(-25%);
}

 

 

변경 후

  변경된 모습은 아래와 같다. 해당 CSS 부분의 %를 조정하면서 본인이 원하는 위치로 오도록 수정할 수 있다.

변경 후

 

 

썸네일 정사각형으로 변경하는 방법

  북클럽 테마의 뉴북 리스트를 사용하지 않고 북리뷰 리스트에서 정사각형 썸네일을 만드는 방법도 있었다. .post-item .thum 부분의 padding-bottom을 100%으로 변경하고, .post-item .thum img 부분에서 -webkit-transform: translateY을 -25%에서 -5%로 변경하고, -webkit-transform: translateX(0%) 한 줄을 추가를 해주면 된다. 참고한 글은 아래에 첨부해 두었다.

.post-item .thum {
	position: relative;
	display: block;
	overflow: hidden;
	width: 100%;
	height: 0;
	margin-bottom: 5px;
	padding-bottom: 100%;
	background-color: #f8f8f8;
}
.post-item .thum img {
	width: inherit;
	height: auto;
	transform: translateY(-25%);
	-webkit-transform: translateY(-5%);
	-ms-transform: translateY(-25%);
	-webkit-transform: translateX(0%);
}

 

 

 

티스토리 북클럽 북리뷰 스킨 썸네일 여백없이 정사각형으로 바꾸는 방법

티스토리 북클럽(bookclub) 스킨, 썸네일 정비율로 크게 조정하기(리스트타입 북리뷰형태)