[티스토리] 북클럽 Book Club 스킨 썸네일 이미지 비율 변경하기

 

티스토리 북클럽 Book Club 스킨을 적용하면 기본적으로 아래와 같이 썸네일이 가로로 긴 직사각형 형태로 되어있다.

보통은 썸네일을 정방형 형태로 만드는데 기본 세팅이 직사각형 형태에다 썸네일 양옆이 자동으로 잘려보여 썸네일을 정방형 형태로 보이도록 스킨을 편집해보려고한다.

 

북클럽 스킨 기본 목록 (썸네일 비율 변경전)

 

 

 

썸네일 비율 변경 하는 방법

이 방법은 북클럽(Book Club) 스킨에만 해당되는 내용이며, 스킨에 따라 수정 방법이 다를 수 있다.

 

1. 티스토리 관리 페이지에서 스킨 편집을 누른다.

 

2. 스킨 편집 창에서 [html 편집 버튼]을 클릭한다.

 

 

 

3. HTML 수정 하기

 

1) HTML 영역에서 Ctrl + F를 눌러 post-item 을 입력 후 엔터를 두번하면 404번째줄 쯤에 해당 부분이 있는 것을 확인할 수 있다.

 

2) 408번째줄의 이미지태그에서 

<img src="//i1.daumcdn.net/thumb/C230x300/?fname=https://blog.kakaocdn.net/dn/EetAY/btrYSkk5GZy/FQ60Nkk8oAIErZpfx0GBT0/img.jpg" alt="">

=> C230x300 부분을 C300x300로 변경한다.

 

(변경 후) <img src="//i1.daumcdn.net/thumb/C300x300/?fname=https://blog.kakaocdn.net/dn/EetAY/btrYSkk5GZy/FQ60Nkk8oAIErZpfx0GBT0/img.jpg" alt="">

 

 

4. CSS 수정 하기

 

1) CSS 영역으로 이동해서 마찬가지로 Ctrl + F를 누른다음 .post-item .thum 을 검색한다.

2) 1154번째줄 쯤에 padding-bottom 값이 60.8695...%로 되어있는데 이 숫자를 모두 지우고 100% 로 변경한다. 100% 뒤에 세미콜론(;)이 빠지지 않게 조심!

3) 그리고 바로 아래쪽 1160~1162번째 줄의 transform, -webkit-transform,-ms-transform 부분 세줄도 삭제한다.

 

(변경후)

 

 

완료!

코드 편집 후 , 저장 한 뒤 블로그를 다시 들어가보면 이렇게 썸네일이 정방형 형태로 변경된 것을 확인할 수 있다.