쉽빠! 티스토리 북클럽 스킨 꾸미기 (썸네일 크기변경 방법)

티스토리 북클럽 스킨 꾸미기 (썸네일 크기 변경)

안녕하세요. 벨라입니다. 

왜 북클럽 스킨을 사용하면 좋은지에 대한 이유와 초기 세팅 방법을 이전 포스팅에서 이야기했습니다. 그러나 북클럽 스킨을 그대로 사용하기엔 디자인의 한계가 있습니다. CSS와 HTML을 몰라도 누구나 쉽고 빠르게 북클럽 스킨 꾸미는 방법 모두 알려드릴게요!  

---

북클럽 스킨 디자인의 한계

 

▲ 북클럽 스킨을 그대로 사용하기엔 디자인의 한계가 있습니다. 그 이유는 도서 콘텐츠를 제공하는 출판사 블로그에 추천하는 형태로 제작된 스킨이기 때문입니다.

 

▲ 책이 예쁘게 보이도록 직사각형 형태로 썸네일이 초기 세팅되어 있기 때문에 우리는 직사각형을 정사각형으로 변경해서 사용해야 가독성과 심미성을 높일 수 있습니다. 

---

북클럽 스킨 썸네일 변경 방법 (직사각형 → 정사각형)

▲ 관리자 페이지 → 꾸미기 →스킨 편집 → html 편집 버튼을 눌러주세요. 이곳에서 HTML과 CSS편집을 하면 직사각형 모양의 썸네일이 정사각형으로 변경됩니다. 

 

1) CSS 변경

▲ 우측 상단의 CSS를 클릭한뒤 2261줄, 2262줄을 찾습니다. .list-type-thumbnail.post.list-type-thumbnail .post-item .thum img { 을 검색하여 찾아도 됩니다. 썸네일 이미지의 width:126px과 height:auto를 수정하면 이미지의 사이즈를 정사각형으로 변경시킬 수 있습니다. 

 

▲ width:150px과 height:150px으로 가로 세로 값을 변경한 뒤 적용버튼을 클릭합니다. 

 

▲ 직사각형 모양의 썸네일이 정사각형으로 변경되었습니다. 그러나 이미지가 가로로 퍼져 보입니다. 이 부분은 html에서 변경하겠습니다. 

---

2) HTML 변경 

▲ html에서 <s_index_article_rep>를 찾습니다. 약 390줄에 위치해 있습니다. 웹마스터 도구 등록시 메타테그를 추가 한 사람들의 경우 위치가 다를 수 있으니 태그로 찾는 걸 추천드립니다. <img src> 태그 안에 있는 C230x300 이 부분을 수정하면 이미지가 가로로 퍼져 보이는 문제를 해결할 수 있습니다. 

 

▲ <img src> 태그 안에 있는 C230x300 을 C200x200 으로 수정 후 적용 버튼을 클릭합니다. 

 

▲ 수정 전에는 썸네일이 직사각형이었는데, CSS와 HTML을 수정하니 정사각형 모양의 예쁜 썸네일로 변경 완료되었습니다.  

---

 

티스토리 썸네일 꾸미기 어떠셨나요? 쉽고 재밌었죠?

블로그도 사랑을 듬뿍 주고 예쁘게 가꿔주면 무럭무럭 클 수 있답니다 ^^

오늘도 긴 글 읽어주셔서 감사합니다. 좋아요와 구독하기는 큰 힘이 됩니다~

읽으면 도움이 되는 이전 글 

▶ 티스토리 북클럽 스킨을 추천 이유와 초기 세팅 방법