티스토리에서 스킨은 '북클럽' 스타일을 가장 많이 추천합니다.
( 북클럽 스킨에도 세부 타입 설정이 또 있더라구요. 이건 아래서 또 설명하기로 하겠습니다. )
그런데 북클럽 스킨으로 글을 쓰다보면, 글 목록에서 썸네일이 이상하게 잘리거나 비율이 안 맞는 현상을 경험하게 됩니다. 이유는 썸네일 기본 이미지 사이즈 설정이 230 × 300 으로 되어 있기 때문입니다.
썸네일이 잘리는 이유
북클럽 스타일은 글 목록 썸네일 영역을 세로로 약간 긴 직사각형 (230 × 300) 기준으로 잡고 있습니다.
하지만 우리가 자주 사용하는 썸네일은 대부분 정사각형 (예: 200 × 200) 혹은 가로로 긴 배너 형태 (예: 800 × 200) 이기 때문에, 이와 맞지 않으면 이미지가 잘려서 표시됩니다.
해결 방법은 두 가지
이미지를 230 × 300 크기로 제작
썸네일 영역 자체에 맞춰서 이미지를 만드는 방법입니다. 이렇게 하면 HTML이나 CSS 수정 없이도 글 목록에서 깨지지 않고 잘 표시됩니다. 다만 세로로 긴 썸네일을 계속 유지해야 하는 단점이 있습니다.
썸네일 이미지를 정사각형으로 만들고, 코드에서 크기 수정
썸네일을 200 × 200 등 자신이 원하는 크기로 만들고, 티스토리 HTML 코드에서 썸네일 크기를 변경하는 방식입니다.
이 방법은 먼저 HTML 을 선택 (기본으로 선택되어 있음) 한 후, Ctrl + F 를 눌러 검색창을 엽니다.
그리고 검색 창에 s_article_rep_thumbnial 을 치면, 제 경우에는 4 개가 검색되는데 ... "C230X300" 이라고 써있는 부분이 썸네일 이미지 크기를 의미합니다. 이렇게 코드로 들어가 있기 때문에 이 부분을 건드리고 싶지 않다면, 이미지 크기를 230 * 300 으로 수정하면 된다는 말씀이었습니다.
아래는 변경 전, 기본 북클럽 썸네일 코드입니다.
이 부분을 다음처럼 수정하면 됩니다
스킨 타입
북클럽 스타일도 현재는 4가지의 타입으로 나뉩니다.
그 중에서 '뉴북' 타입은 본문에 이미지가 있을 때와 없을 때를 구분해서, 글 목록에 썸네일을 알아서 On / Off 시켜주기 때문에 일반적으로 이걸 가장 많이 선택하시는 것 같습니다.
북 클럽 스킨에서는 썸네일이 중요한 역할을 하기 때문에, 이미지 깨짐 없이 잘 보이도록 위 방법 중 하나를 적용해주는 걸 추천합니다. 물론 여기서 더 나아가 CSS 까지 건드려야 할 때도 있습니다만, 저는 아직 그 정도 실력은 안되기 때문에... 이쯤에서 현실과 타협하고 추후에 필요하면 그 때 더 배워서 적용할려구요. ^^;;
정리
* 북클럽 썸네일 기본 사이즈는 230 × 300 입니다.
* 본인 이미지가 그보다 작거나 비율이 다르면 깨지거나 잘릴 수 있어요. !!
* 해결책은 2가지
- 이미지를 230 * 300 으로 제작.
- html 코드 에서 원하는 크기로 수정.
* 저는 개인적으로 200 × 200 정사각형으로 통일하고 코드만 살짝 수정하는 방법으로 해결했습니다.