티스토리 Book Club 스킨 썸네일 정사각형 만들기

북 클럽 스킨 섬네일(thumbnail) 정사각형으로 만들기

 

본 포스팅은 티스토리 Book Club 스킨의 리스트 타입 '뉴북'을 사용하는 경우에만 한합니다. 추가 요청사항이 있으면 해당 방법에 대해서도 도와드릴 수 있습니다.

 

본 블로그의 스킨이 바로 Book Club스킨이다. 이것저것 사용해본 끝에, 디자인도 가볍고, 심플해서 애용하고 있다.

Book Club 스킨 Preview 화면

 

다만 최근들어 하나가 거슬리기 시작했는데...

직사각형으로 표시되는 썸네일

 

"바로 직사각형의 썸네일"

 

Book Club이란 이름에 걸맞게 책 표지에 맞게 디자인된 테마다 보니 어쩔 수 없는 부분인데, 어쩔 수 없다고 포기하면 삵이 아니다.

이제 문제를 해결하러 가보자!

 

 Book Club 스킨 Thumbnail 정사각형으로 만들기

1. 스킨 편집 메뉴로 진입한다.

블로그 설정 메뉴의 스킨 편집 메뉴

 

※ 삵의 경우 아래의 설정을 사용하고 있으니 참고 바란다. 설정에 따라 본 따라하기가 다소 다르게 동작할 수도 있다.

리스트 타입을 뉴북으로 사용하고 있다.

2. HTML 편집 메뉴로 진입한다.

빨간 표시를 해둔 버튼을 눌러 html 편집 메뉴로 진입하자.

3. Ctrl+F를 눌러 s_index_article_rep 을 검색한다.

Ctrl+F를 누르면 위와 같은 노란색 창이 나타난다.

가장 핵심이 되는 부분이다! C230x300과 같이 크기가 나타난 것이 보일 것이다. 앞서 '뉴북' 리스트 타입에서 나타나는 썸네일의 크기가 되겠다. 

이것이 바로 '뉴북'타입에서 썸네일의 크기이다.

이 부분을 C230x230 으로 변경하자. R230x230과 같이 앞을 R로 붙이면 잘리지 않고 크기를 줄여서라도 썸네일의 그림 전체를 보여주는데, 그림이 늘어나는 모양새를 좋아하지 않아서 C로 사용하고 있다.

 

"C230x300 -> C230x230 으로 변경"

 

변경을 마쳤으면, 꼭 '적용'을 눌러주도록 하자.

여기까지 마쳤어도, 우선 정사각형 썸네일로의 변경은 완료.

그런데, 크기가 작아져서 맘에 들지 않을 수가 있다. 이 경우 CSS편집을 해야한다. 이 부분도 하러 가보자.

 

4. CSS를 눌러 CSS 편집모드로 진입

오른쪽 상단의 CSS를 누르면 CSS 편집 모드로 들어갈 수 있다.

 

5. Ctrl + F를 눌러, .list-type-thumbnail .post-item .thum img 라고 검색

검색이 두개가 될 것인데, 아래의 그림 부분만 보자. width를 원하는 크기로 변경하면 되는데, 본 블로그의 경우 150px이 적절해 보여 이와 같이 설정하였다.

썸네일의 크기를 원하는대로 조절하자.

 

"width를 150px(혹은 원하는 사이즈)로 변경"

 

이번에도 변경을 마쳤으면, 꼭 '적용'을 눌러주도록 하자.

여기까지 완료한 모습이 현재 블로그의 모습이다!

 

현재 <삵 izz well> 블로그의 썸네일 모습

 

---

이번에는 티스토리 Book Club 스킨을 편집하여 썸네일 크기를 조절하는 방법을 알아보았다. 무엇보다, 직사각형의 썸네일을 정사각형으로 바꾸니 한층 더 심플한 디자인이 된 것 같아 만족스럽다.

다른 블로그의 정리들도 있지만, 아무래도 IT 개발자의 입장에서 가장 단순한 부분만 짚어주는 것이 더 혼란을 덜지 않을까 하여 포스팅하였다.

다만, 리스트 타입은 '뉴북' 한정이다. 하지만 모두 같은 방법론으로 커버가 가능할 것이니 이 포스팅도 도움이 될 것이라고 생각한다.