북클럽 스킨 리스트 타입 변경 & 썸네일 크기 조절 방법

티스토리 북클럽 스킨의 리스트 타입 4가지 중 기본이 '북리뷰'인데 '뉴북' 스타일이 가장 가독성이 좋을 것 같아서 변경해 보았다.

북클럽 기본인 '북리뷰' 타입 (변경 전)은 시선이 지그재그로 왔다 갔다 하게 되는데 '뉴북' (변경 후) 타입은 세로로 한 번에 쭉 볼 수 있어서 가독성이 더 좋아진 것 같다.

리스트 타입 변경하는 방법은 아주 간단하다.

1. 블로그 관리> 꾸미기 > 스킨 편집으로 들어간다.

2. 우측 스킨 편집에서 스크롤을 내려보면 '리스트 타입' 이 있는데 '뉴북'으로 선택한 후 우측 상단 '적용' 버튼을 눌러주면 끝이다.

'뉴북' 타입으로 변경을 하고 보니 썸네일 이미지가 직사각형으로 길게 보여져서 정사각형 이미지로 크기 조절을 해보았다. HTML과 CSS를 각각 변경해 주어야 한다.

<HTML 변경 방법>

1. HTML에서 s_article_rep_thumb로 조회한다.

2. 가장 첫 번째로 검색된 것 바로 아래 줄을 보면 C 230x300으로 되어있는데, 이 부분을 정사각형 C 230x230으로 수정한 후 '적용'을 눌러준다.

<CSS 변경 방법>

1. CSS에서 list-type-thumbnail로 조회한다.

2. 여러 개가 나오는데 2260 행 (thum img) 아래 width 126px을 150px로 변경해 준다.

참고로 처음에 width 아래 height : auto 부분도 똑같이 150px로 변경해 주려고 했는데, pc에서는 썸네일이 정사각형으로 잘 보이지만 모바일에서는 직사각형으로 보여서 height는 변경하지 않고 width 만 변경했다.

스킨 편집 왼쪽 창에 pc/태블릿/모바일로 선택하고 새로고침을 하면 적용된 모습을 미리 보기 할 수 있으니 적용하기 전에 본인 블로그에 맞는 크기로 다양하게 조절해 보길 추천한다.

이미지가 정사각형으로 변경되니 안정감 있게 보이는 것 같다.

스킨 편집에서 리스트 타입도 변경해 보고 html, css를 수정해서 썸네일 크기도 수정하면서 블로그 가독성을 높여보길 추천한다.

미니멀라이프