티스토리 블로그 북클립 스킨 썸네일 이미지 정사각형으로 수정하는 방법

티스토리 블로그 북클립 썸네일 사이즈 변경하는 방법

티스토리 블로그 북클립 스킨을 적용하면 블로그메인페이지에 썸네일의 크기가 직사각형으로 나오는 것을 확인하실 수 있습니다.

스킨 이름 자체가 북클립이다 보니 책모양의 사이즈로 직사각형 형태로 보여지는 것인데, 그렇다 보니 나의 대표이미지를 정사각형으로 등록한 경우 원하지 않은 이미지 크기로 보여 썩 보기에 마음에 들지 않았습니다.

그래서 썸네일 이미지를 정사각형으로 변경할 수 있는 방법이 무엇인지 찾아보고 적용을 해봤습니다.

 

 

블로그 메인화면에 나타나는 기본 썸네일 크기

 

블로그 관리 페이지 - 꾸미기 - 스킨편집으로 들어갑니다.

우선 위 이미지와 같은 구성의 리스트는 '북클립' 스킨에서 '뉴북' 리스트로 적용한 것인데요. 혹시 뉴북리스트로 변경을 원하시는 분은 우측 스킨편집 창에서 내리다 보면 리스크-리스트타입에서 뉴북으로 변경해주시면 됩니다.

 

리스트 타입 변경

 

뉴북으로 변경하셨다면 다시 막대바를 위로 올려 스킨편집창 맨위의 html 편집 버튼을 눌러줍니다.

이미지 크기를 html 코드에서 변경이 가능하기 때문입니다.

 

 

그리고 코드에서 ctrl+F 단축키를 눌러 'thumbnail' 로 검색을 해줍니다.

400번대에 작성된 thumbnail 코드 위치에 C230x300 으로 작성된 것을 보실 수 있는데 이 부분을 '200x200' 또는 '300x300' 으로 변경해줍니다. 크게 차이는 없습니다.

 

 

 

그런 다음 맨위 스킨편집에서 적용버튼을 눌러주시고 왼쪽 편 새로고침을 눌러 미리보기를 해봅니다.

그럼 원래 직사각형이었던 썸네일이 정사각형으로 변경된 모습을 보실 수 있습니다.

 

 

썸네일 사이즈 더 크게 변경하는 방법

그런데 정사각형 크기가 조금 작은 것 같지 않나요?

좀 더 썸네일 크기를 키워보겠습니다.

스킨편집 아래 CSS 부분을 눌러주신 후 Ctrl+F 를 눌러 '126' 으로 검색을 해줍니다.

2260 즘에 있는 126 숫자를 150 정도로 수정해주세요.

 

 

 

짠!. 아까보다 썸네일 크기가 커졌죠? 아주 만족스러운 변경이었습니다.

관련글 썸네일 사이즈 변경방법

추가로 관련글 썸네일도 변경하고 싶다면 html 부분에서 466 부근의 썸네일 크기를 150x150으로 수정해주시면 정사각형의 관련글 썸네일로 변경이 됩니다.

원래도 이 부분으도 이상한 직사각형형태로 되어 있어서 생긴게 별로 였는데, 깔끔한 정사각형으로 변경된 것을 보실 수 있습니다.

 

깔끔한 썸네일을 위한 변경방법을 알아보았습니다.

코드가 복잡하게 작성되어있지만 바꾸는 방법이 생각보다 간단하죠?

이곳 저곳의 썸네일 크기를 변경하고 싶으시면 동일한 방법으로 썸네일 검색하셔서 크기 변경 후 테스트를 진행해보세요.

 

마음에 드는 썸네일 크기로 깔끔한 블로그 운영하시기 바랍니다!