티스토리 북클럽 스킨 썸네일 정사각형으로 변경하기 초간단 핵심만

티스토리 썸네일 크기변경

 

안녕하세요. 오늘은 티스토리 북클럽 스킨의 썸네일을 정사각형으로 변경하는 방법에 대해 핵심만 간단하게 설명드리겠습니다.

아래의 내용들을 그대로 따라하시기만 하면 북클럽 스킨의 썸네일을 정사각형으로 변경하실 수 있습니다.

 

 

1.  북클럽 스킨 - '뉴북'으로 설정

티스토리에서 기본으로 제공하는 스킨 중 북클럽을 많이들 사용하고 계실텐데요. 

관리 메뉴에서 스킨 편집으로 들어가셔서 아래쪽의 리스트 항목을 보시면 리스트 타입이 있습니다. 

리스트 타입의 기본값은 '북리뷰'로 되어있을텐데 '뉴북'으로 변경해주시면, 작성한 포스팅들이 한결 보기 좋게 리스트됩니다.

뉴북으로 설정하실 경우 기본적으로 썸네일이 책 모양 처럼 직사각형으로 나오게 됩니다  

관리 메뉴 -> 스킨편집 -> 리스트 타입을 '뉴뷱'으로 변경

 

 

 

2.  HTML 설정하기 - 가로 세로 비율 1:1로 설정

 

관리 메뉴에서 스킨 편집으로 들어가신 후 우측 상단에 'html 편집'으로 들어갑니다.

html 편집을 누르시면 아래와 같은 화면이 나옵니다.

 

1) html 화면을 한번 누르시고 '컨트롤 + F'를 누릅니다. 검색창이 뜨면   s_article_rep_thumbnail  을 검색합니다.

s_article_rep_thumbnail

 

2) 바로 아래줄에 C230x300 으로 작성된 부분을 C300x300 으로 바꿔줍니다.  (가로x세로 비율을 의미합니다)

3) 우측 상단의 적용을 눌러줍니다.

 

 

3.  CSS 설정 - 썸네일 크기 적절한 크기로 키우기

 

1) 상단의 CSS를 선택하신 후 HTML 설정과 마찬가지로, 마찬가지로 화면을 한번 클릭 후

.list-type-thumbnail .post-item .thumimg {    을 검색합니다.

.list-type-thumbnail .post-item .thumimg {

 

2) 2라인 아래의 width 를 150px로 변경해주면 썸네일이 보기 적당한 크기로 변경됩니다.

3) 우측 상단의 적용을 눌러줍니다.

 

 

 

 

이상으로 티스토리 북클럽 스킨의 썸네일을 정사각형으로 변경하는 방법에 대해 알아보았습니다.

많은 도움이 되셨으면 좋겠습니다. 감사합니다.