[북클럽 스킨] 썸네일 크기 변경

 

북클럽 스킨 썸네일 크기 변경

 

Book Club 스킨이 기본적인 기능은 다 제공하면서 깔끔해서 많이들 쓰시죠?
저도 Book Club을 사용하고 있습니다.

다만, 첫 페이지에서 썸네일이 위아래로 길쭉한 형태라는 점이 조금 아쉽습니다.
북리뷰를 위한 스킨이어서 이런 디자인을 채택한 것 같습니다.

그래도 아주 간단한 방법으로 썸네일 크기를 조절할 수 있으니 다행인 것 같습니다.

 

 

 

저는 크롬 브라우저를 주로 사용하고 있습니다.
참고하시고요.

첫 페이지의 썸네일 이미지 위에 마우스를 댄 상태로 오른쪽 클릭 -> 검사를 클릭합니다.
(또는 단축키 Ctrl + Shift + I )

 

 

 

 

구조가 한눈에 보이지요?
CSS에서는 크기 지정한 부분이 딱히 보이지 않습니다.
구조는 잘 기억해 둡시다.
.cover-thumbnail-2 ul li figure img

HTML 소스를 보니 이름 지정을 통해 조절하나 보네요.
어디서 조절하면 되는지 힌트를 얻었으니 스킨 변경으로 갑니다.

 

 

 

 

관리 > 스킨편집 메뉴로 갑니다.
이제 어느 부분을 수정해야 할지 찾아야 합니다.
앞서 본 소스에서 썸네일 리스트는 "cover-thumbnail-2" class 속성을 가진 div에 묶여있었습니다.

<div class="cover-thumbnail-2">
<ul><li><figure><img /></figure></li></ul>
</div>

 

편집기에 마우스 포인터를 옮겨놓고 Ctrl+F를 눌러보세요.
편집기 내부에서 원하는 지점을 찾을 수 있습니다.

주의할 점은 반드시 마우스 포인터가 편집기 내부에 위치해야 한다는 점입니다.
편집기 바깥에서 찾으면 내부 검색은 안 됩니다.

 

 

 

편집기에서 해당 속성을 찾았더니 cover-thumbnail-1 부터 cover-thumbnail-4 까지 총 4개의 단락을 찾을 수 있었습니다.

구조를 살펴보면 2가 현재의 리스트 화면입니다.
즉, 우리가 손 볼 곳은 2 단락입니다.

 

 

 

① 스킨 기본 설정 상태에서의 목록 썸네일입니다.

② 모바일 화면으로 볼 때 이미지 사이즈를 지정해 줍니다.

③ 적용을 눌러주면 간단하게 사이즈 변경 완료입니다.

 

 

 

 

정방형 썸네일로 변경됐습니다.

간단해서 좋네요. ^^