티스토리 북클럽 스킨 썸네일 정사각형으로 변경하기

티스토리 북클럽 스킨 썸네일 정사각형으로 변경하기

 

티스토리 블로그 초보자에게 가장 추천되는 스킨이 북클럽 스킨이라고 해요. 저 역시 북클럽 스킨을 사용하고 있는데요. 반응형 스킨이고 우측에 사이드바가 있기 때문에 카테고리를 노출할 수 있고 광고를 달 수 있거든요.

 

 

블로그의 가독성을 높이고 클릭률을 높이기 위해서 티스토리 북클럽 스킨 썸네일 크기를 정사각형으로 변경하는 방법을 알려드리려 합니다.

 

 

 

스킨 변경에 들어가셔서 북클럽(Book Club) 스킨을 적용하세요.

 

 

 

좌측의 메뉴에서 스킨 편집을 클릭하시면 우측에 스킨 편집 화면이 나타나는데요.

 

최신 글을 선택하신 후에 스크롤을 죽 내리시면 리스트가 보입니다.

 

 

 

리스트에서 뉴북을 선택해주셔야 해요.

 

변경을 하기 전 뉴북은 직사각형의 썸네일이라 가독성이 좋지 않습니다. 이 썸네일을 정사각형으로 만들어볼게요.

 

 

 

html 편집을 클릭해주세요.

 

 

 

변경 전

변경 후

스킨 편집에서 상단의 CSS를 클릭해 주세요.

 

그리고 list-type-thumbnail .post-item . thum img를 찾아주세요. 태그를 찾으실 때 Ctrl+f 키를 누르시고 검색하시면 쉽게 찾으실 수 있어요.

 

여기에서 딱 한 가지만 변경해주시면 돼요.

 

width: 126px;

height: auto;를

 

width: 150px;

height: 150px;

 

로 변경해주세요. 작업을 마친후에는 적용을 꼭 눌러주세요.

 

 

 

이 과정까지 마치면 정사각형 모양이긴 하지만 보기 싫게 옆으로 늘어나서 html 편집을 해주셔야 합니다. 상단의 HTML을 클릭해주세요.

 

변경 전

변경 후

HTML을 클릭하신 후 <s_index_article_rep>을 찾아주세요. 역시 Ctrl+f를 누르신 후 검색하시면 쉽게 찾을 수 있습니다.

 

여기서 단 한 가지만 변경해 주시면 되는데요.

 

<img src="//i1.daumcdn.net/thumb/C230x300/ 을

 

<img src="//i1.daumcdn.net/thumb/R200x200/ 으로 변경해주세요.

 

R은 대문자여야 하고 x는 소문자여야 합니다. 하나라도 틀리면 제대로 반영되지 않아요.

 

변경을 마치신 후에는 적용을 꼭 눌러주세요.

 

 

 

적용을 마치신 후 새로고침을 누르시면 정사각형의 썸네일을 보실 수 있습니다.

 

 

 

기본 뉴북의 변경 전 썸네일

테그 편집 후 정사각형의 썸네일

안내해드린 대로 잘 변경하여 주시면 기본 제공의 직사각형 썸네일에서 정사각형의 썸네일로 변경됩니다.

 

 

사소한 차이가 클릭률을 더 부른다고 하더라고요.

 

예쁜 스킨 사용하세요. :)