티스토리 북클럽 스킨 썸네일 크기 정사각형으로 바꾸는 방법
썸네일이 내 마음대로 안 맞춰질 때, 진짜 짜증나죠? 특히 북클럽 스킨처럼 기본 설정이 세로형인 경우엔 더더욱!
안녕하세요! 요즘 티스토리 블로그를 다시 꾸며보고 있는 저에겐 북클럽 스킨이 딱이더라고요. 그런데 세로로 길쭉한 썸네일이 은근 거슬리더라고요. 뭐랄까, 깔끔하게 정사각형으로 딱 맞춰서 보여주고 싶은데 그게 안 되니까 뭔가 아쉬운 거예요. 그래서 한참 삽질하다가, 결국 해결했습니다! 혹시 저처럼 썸네일 강박(?) 있으신 분들을 위해, 정사각형 썸네일로 바꾸는 방법을 쫙~ 정리해봤어요.
목차
CSS로 썸네일 크기 조정하기
먼저 티스토리 관리 페이지에서 [꾸미기 > 스킨 편집]으로 들어가서 CSS 탭을 열어주세요. Ctrl + F로 검색창을 열고 list-type-thumbnail을 입력해보세요.
그 중에서 아래 코드를 찾아줍니다.
.list-type-thumbnail .post-item .thum img
원래는 width: 126px; height: auto; 이런 식일 텐데요. 이 부분을 이렇게 바꿔주세요.
width: 150px;
height: 150px;이렇게 하면 썸네일 이미지가 정확히 150x150 픽셀, 정사각형으로 보여지게 돼요.
HTML에서 이미지 비율 맞추기
| 원래 설정 | 변경 후 설정 |
|---|---|
| C230x300 | C200x200 |
HTML 탭을 열고 s_article_rep_thumbnail 이 있는 부분을 찾은 다음, 이미지 링크 주소에 포함된 사이즈 값을 C200x200으로 수정해주세요. 이 작업은 이미지 비율 자체를 바꾸는 작업이라 아주 중요해요.
변경 적용 확인 방법
- 블로그 메인 페이지에서 썸네일이 정사각형으로 잘 보이는지 확인
- 캐시 문제로 변경 사항이 안 보이면 F5나 시크릿 모드로 새로고침
- 모바일에서 정상 작동 여부도 확인
왜 정사각형이 더 예쁠까?
정사각형 썸네일은 화면을 꽉 채우면서도 안정감을 줘요. 세로형 썸네일은 콘텐츠가 늘어져 보이는 반면, 정사각형은 균형감 있는 배열을 만들어줘서 시각적으로 훨씬 깔끔합니다. 특히 이미지와 글 제목이 나란히 배치되는 스타일에서는 정사각형이 시선을 분산시키지 않고 딱 집중하게 도와줘요.
자주 쓰이는 썸네일 사이즈 비교
| 사이즈 | 비율 | 사용 예시 |
|---|---|---|
| 150x150 | 1:1 | 정사각형 블로그 썸네일 |
| 230x300 | 3:4 | 북클럽 스킨 기본값 |
| 1920x1080 | 16:9 | YouTube 썸네일 |
썸네일 수정 시 자주 생기는 오류들
- 캐시가 남아있어 변경이 적용되지 않은 것처럼 보이는 현상
- HTML 코드에서 숫자만 바꿨는데, URL 전체 형식이 깨져서 이미지가 안 뜨는 경우
- 모바일에서 썸네일 비율이 왜곡되는 레이아웃 이슈
- 이미지 원본 자체가 세로로 너무 길어 왜곡이 생기는 경우
북클럽 스킨은 책 소개형 콘텐츠에 최적화된 구조라서, 기본 썸네일 비율이 책 표지처럼 세로형으로 되어 있습니다.
물론 가능합니다. CSS와 HTML에서 가로/세로 비율을 원하는 값으로 조정하시면 됩니다. 단, 가로형은 일부 스킨 레이아웃과 충돌할 수 있어요.
걱정하지 마세요! 수정 전 원본 백업을 꼭 해두시면 언제든지 되돌릴 수 있습니다. 변경 전 전체 복사해두는 걸 추천드려요.
아니요, 오히려 정사각형 썸네일은 콘텐츠를 더 단정하고 집중력 있게 보여주는 데 유리합니다. 텍스트와 이미지의 균형이 더 잘 맞아요.
CSS에 @media 쿼리를 활용해 반응형으로 조정해주셔야 해요. 또는 모바일 스킨에서 별도 설정이 필요한 경우도 있습니다.
스킨 업데이트 시 직접 수정한 코드가 초기화될 수 있습니다. 따라서 스킨 백업은 꼭 필요하며, 커스터마이징은 가급적 '복사한 스킨'에서 진행하는 게 안전해요.
오늘 같이 썸네일 하나 바꾸는 데도 생각보다 신경 쓸 게 많다는 걸 알게 되셨을 거예요. 하지만 한 번만 손봐두면 훨씬 보기 좋은 블로그가 완성되니 꼭 도전해보세요. 혹시 하다가 막히는 부분이 있거나 다른 스킨에서도 적용해보고 싶다면 언제든 댓글로 남겨주세요! 블로그는 결국 내 공간이니까, 내가 원하는 스타일로 꾸미는 게 제일 중요하잖아요. 😊
댓글 쓰기