북클럽(Book Club) 스킨 썸네일 정사각형 1:1 비율로 바꾸는 방법

 

목차

 

---

북클럽(Book Club) 스킨 썸네일 정사각형 1:1 비율로 바꾸는 방법

 

티스토리를 하는분들에게 있어서 정석이라고 할 수 있는 스킨이죠. 북클럽(Book Club) 스킨의 '뉴북' 리스트를 많이들 사용하실텐데요. 이 뉴북 리스트는 굉장히 심플하고 깔끔하지만, 기본 스킨의 디자인이 마음에 안드는점이 있으실텐데요. 바로 썸네일이 직사각형이라는 겁니다.

 

하지만, 티스토리는 코딩을 통해 디자인을 마음대로바꿀 수 있습니다. 코딩은 전문기술이지만, 요즘은 정보가 많아사 보다 쉽게 바꿀 수 있습니다. 그럼 이제 이 '뉴북' 리스트의 썸네일을 정사각형으로 바꾸는 방법을 알아보도록 하겠습니다.

 

 

 

 

코드 수정하러 들어가기

 

 

먼저 블로그 관리 페이지로 들어온 뒤 다음과 같이 진행해주세요. 진행은 아래와 같이 총 4단계로 진행을 하게 되는데 잘 따라오시기를 바랍니다.

 

 

① 꾸미기 ▶ 스킨편집 

② 스킨편집 ▶ html편집 클릭

③ 썸네일 부분 HTML 코드 수정

④ CSS 코드 수정

 

 

 

먼저, 블로그 관리페이지에서 스킨편집을 누른 후 html편집을 클릭해서 코드 수정부분으로 들어갑니다.

 

 

 

 

HTML 코드 수정

 

 

HTML 소스 내부에서 's_article_rep_thumbnail' 이라고 검색을 해줍니다. Ctrl + F키를 이용하면 검색을 할 수 있습니다. 맥 사용자라면 커맨드 + F가 되겠네요.  대략 400번째 줄 정도에 위치해있습니다.

 

좌측 빨간박스 안에 노란색으로 칠해져 있는 부분이 있을텐데요. 

C230x300이라고 되어있죠?

이걸 우측과 같이

C230x230으로 바꿔줍니다.

 

이 부분이 썸네일이 보여지는 크기를 조절하는 부분입니다.

 

 

 

 

CSS 코드 수정

 

CSS로 들어가신다음 '.post-item .thum' 을 검색하셔서 너비를 수정해주어야 합니다. 약 1150번째줄 정도에 위치해 있습니다. width가 60%정도로 되어있는 것을 100%로 변경해줍니다. 아래박스는 이미지에 대한 정보를 수정해주는 코드입니다.

 

 

 

마무리

 

작업을 마무리 하면 썸네일이 정사각형으로 보이게 됩니다.