티스토리 북클럽 베스트셀러 썸네일 크기 조절하기

티스토리(Tistory) 블로그 스킨의 한 종류인 북클럽(Bookclub)의 경우

 

리스트 타입을 베스트셀러, 뉴북, 북리뷰, 뉴스레터의 4가지 중 하나로 선택할 수 있습니다.

 

그 중 베스트셀러의 경우 썸네일과 제목만 노출되기에 심플하여 좋지만

 

썸네일이 세로가 긴 직사각형 이기에 이를 정사각형으로 바꾸면 더욱 깔끔해질 수 있습니다.

 

우선 [블로그 관리]로 진입합니다.

스킨 편집을 선택한다.

좌측 바에서 [스킨 편집]으로 진입한 후,

 

html 편집을 통하여 디테일한 커스텀이 가능하다.

우측 상단의 [html 편집]을 클릭합니다.

 

html 편집모드

html 편집창에서 393번 째 전후의 코드를 확인하면

" C230X300 "을 확인할 수 있습니다.

 

이를 [R230X230] 로 변경하여 [적용]합니다.

 

R의 경우, 이미지 전체를 지정 사이즈에 채워 넣기 때문에,

사진이 늘어나거나 줄어들 수 있습니다.

R230X180, 사진이 눌린 모습이다.

 

그에 반해 C의 경우, 사진의 원형을 지정 사이즈 위에 얹기 때문에,

늘어나거나 줄지 않지만 사진이 잘려보일 수 있습니다.

C230X180, 사진은 눌리지 않았지만 잘려나갔다.

 

수정을 완료했다면 썸네일안의 사진은 정사각형이 되지만

썸네일 공간 자체는 그대로이기 때문에 회색 빈공간이 생깁니다.

이를 해결하기 위해서 [CSS 수정에 진입]합니다.

CSS 편집모드

2221번 째 줄에서 padding-bottom을 확인할 수 있습니다.

이를 [100%]로 수정하고 적용합니다.

 

커스텀 수정된 북클럽 베스트셀러 리스트 타입

모든 과정을 따라왔다면 위와 같이 깔끔한 사각형 썸네일을 가진

베스트셀러 스킨이 완성됩니다.