티스토리 썸네일 정사각형 변경 방법(북클럽 뉴북 목록리스트 )

 

이번글에서는 티스토리 썸네일을 정사각형으로 변경하는 쉽고 빠른 방법에 대해 알아보겠습니다.

 

필자의 블로그는 북클럽 스킨으로 뉴북 리스트 타입을 사용하고 있습니다. 

티스토리 리스트타입 뉴북

 

 

뉴북으로 리스트를 보면 썸네일이 직사각형으로 보여 예쁘지가 않습니다. 썸네일에 글씨를 넣는 경우, 글씨도 잘리게 됩니다.

 

 

 

정사각형으로 변경하면 가독성도 좋고 좀 더 깔끔해 보입니다. html과 css 코드를 수정해야합니다. 방법은 간단하니 차근차근 함께 수정 해 봅니다.

 

티스토리 뉴북 직사각형 썸네일

 

북클럽 스킨 / 뉴북 리스트타입 기준으로 썸네일 정사각형으로 함께 설정 해 봅니다.

 

 

1. HTML 수정

꾸미기 -> 스킨 편집 -> html 로 들어가 줍니다. 아래 빈공간을 클릭한 후 CTRL +F 를 눌러 검색창을 활성화 해주고, s_article_rep_thumbnail 로 검색합니다. 400번대에 해당 코드를 찾아 C230x230 으로 수정하고 적용을 클릭 해 주세요. 개개인의 코드 추가나 삭제에 따라 줄 위치는 다를 수 있습니다. 

티스토리 썸네일 정사각형 변경 방법

 

 

2. CSS 수정

CSS는 2군데를 수정 하여야 합니다.

1) 꾸미기 -> 스킨 편집 -> html -> 상단 CSS 로 들어갑니다. 마찬가지로 빈공간 클릭 CTRL + F 눌러 검색창 활성화 해줍니다.  .list-type-vertical .post-item .thum 으로 검색해 아래 해당 코드를 찾아줍니다. 2200번대 줄에 있습니다. padding-bottom 을 100% 로 변경합니다.

 

티스토리 썸네일 정사각형 변경 방법

2) list-type-thumbnail 로 검색하여 2200번대에 아래 코드를 찾아줍니다. width는 150px ,  height는 auto 로 해줍니다. 적용 버튼을 클릭해주세요.

티스토리 썸네일 정사각형 변경 방법

 

 

3. 적용 확인하기

적용이 제대로 되었는지 확인해 보겠습니다.

 

 

스킨편집에서  상단에 보시면 모바일 아이콘을 클릭하고 새로고침을 눌러주세요. 정사각형으로 변경 된 것이 보이실 거에요! 

정사각형으로 변경된 썸네일

 

티스토리 썸네일 정사각형 변경 방법(북클럽 뉴북 목록리스트 기준)에 대해 알아보았습니다.

 

구글 애드센스 승인 받는 방법 (이대로만 하세요!)

가비아 하위도메인 생성 및 티스토리, 애드센스 등록하는 방법

티스토리 제목 배경 이미지 삭제 (초간단 방법)

티스토리 블로그 앵커광고란? 앵커광고 하단배치하기

티스토리 블로그 초기설정 세팅 (초간단 버전)