티스토리 북클럽 썸네일 크기 변경

티스토리 북클럽 스킨에서 썸네일 크기 변경에 관해 포스팅해보겠습니다.

북클럽을 처음 세팅하면 썸네일 모양이 직사각형인데 정사각형을 많이 선호하고 깔끔해 보여 저도 수정해서 쓰고 있습니다.

 

사용 중인 스킨  

북클럽

 

리스트 타입

북리뷰, 뉴북

 

 

북리뷰와 뉴북 공통

 

관리자 ≫ 꾸미기 ≫ 스킨 편집 ≫ html 편집으로 들어가서 html을 조금만 수정해 보겠습니다.

어렵지 않으니 따라 해 주세요

 

 

리스트 타입

북리뷰

 

이것은 북리뷰에 해당되는 포스팅이며 뉴북은 아래에 있으니 해당 리스트 타입에 맞춰 봐주세요

 

 HTML에서  본문 아무 곳에 클릭 후 ctrl + f를 누르면  노란색 검색 부분이 나옵니다.

원하는 위치에 단어를 눌러서 찾아주세요

C230 X300이나 's_article_rep' 등등 검색할 단어 적고 엔터를 누르면 해당 글자가 모두 노란색으로 바뀝니다

 

아래 그림의 오른쪽 부분에 보면 빨간 박스 부분의 노란색 줄들이 있는데 이것은 해당 단어들이 있는 위치입니다.

 

 

HTML에서 395번쯤

HTML을 수정하신 적이 있으신 분들은 395번에 위치하지 않으니 검색하셔서 찾으시길 추천드리며 보통 390번대 전후로 있습니다.

 

빨간박스 부분의 C230 X C300이 있습니다.

 

 

빨간박스 부분을 C200 X C200 또는  C250 X C250 정도로 정사각형으로 바꿔주세요

 

 

CSS에서 ctrl + f로 검색 부분이 나타나면 ' thum img'를 타이핑하고 찾으세요

 

 

CSS에서 1154번쯤 

아래와 같은 부분을 찾으세요

CSS 수정한 적이 없다면 이렇게 나타나겠죠?

 

 

 

빨간색 부분을 변경해주고 상단 부분의 적용을 클릭하세요

 

 

새로고침을 눌러 변경되었는지 확인해주세요

 

전 후 비교

 

 

리스트 타입

유북

 

HTML에서 393번쯤

C230 X C300이 있습니다.

빨간 박스 부분을  C200 X C200 또는  C300 X C300 정도로 정사각형 사이즈로 바꿔주세요

 

<!-- C230 X C300 썸네일 크기 조정 -->

이 부분은 다음에 다시 수정할 때 원래의 사이즈를 알기 위해 표시해놓은 부분이며 <!-- 글 적기 --> 안에 글을 적으면 홈페이지에서는 적용되지 않는데 구분할 수 있는 자신만의 표기를 해놓으시길 추천드려요.

 

 

CSS에서 ctrl + f  검색에서 'thum img' 또는 'margin-left'를 찾아주세요

2263번쯤 아래와 같은 부분을 찾아주세요

 

 

150px  또는 200px 정도로 변경해주고 적용을 클릭하세요

사이즈는 아래 비교된 이미지를 보시고 정하세요

 

 

사이즈 비교

 

 

많은 분들이 정사각형을 선호하는 데는 여러 가지 이유가 있는데, 수익형 블로그를 하실 분들이 라면 더더욱 수정해야겠죠.

수치 값을 조금씩 변경해 자신의 블로그에 어울리는 크기를 찾으세요.

몇 번 해보면 어렵지 않아요.