티스토리 블로그 북클럽스킨 썸네일 정사각형으로 만드는 방법

티스토리 블로그 북클럽스킨 썸네일 정사각형으로 만들기

티스토리 블로그에서 북클럽 스킨을 사용하다 보면, 첫 글을 작성한 뒤 자동으로 생성되는 썸네일이 가로로 길게 표시되는 경우가 많아요. 이 때문에 전체적인 화면이 정돈되지 않아 보일 뿐만 아니라, 썸네일에 글씨를 넣어둔 경우에는 내용이 잘려 가독성이 크게 떨어지기도 해요.

이러한 불편함을 해결하기 위해, 썸네일을 정사각형 형태로 바꾸는 방법을 소개해드리려고 해요. 설정 자체는 어렵지 않지만, 처음 접하시는 분들은 어디를 수정해야 할지 헷갈릴 수 있기 때문에 순서대로 차근차근 따라오시는 것이 중요해요.

지금부터 안내해드리는 방법을 그대로 적용하시면, 보다 깔끔하고 보기 좋은 정사각형 썸네일로 변경하실 수 있어요.

 

 

1. HTML 수정

먼저 HTML에서 Ctrl+F 키를 눌러 "230"을 검색합니다.

 

▼

 

C230x140을 C250x250으로 변경해 줍니다.

 

 

 

2. CSS 수정

① CSS탭으로 와서 Ctrl+F 키 를 눌러 .post-item .thum { 을 검색합니다.

 

 

 

② padding-bottom:60.8695......를 100% 로 수정합니다.

▼

 

 

 

 

③ .post-tiem .thum img { 를 검색하고 width 값을 inherit; 로 변경해줍니다.

 

▼

 

 

 

 

④ 그리고 맨 아랫부분에 한줄을 추가합니다.

-webkit-transform: translateX(0%);

 

이제 다 되었습니다.

다시 새로고침(Ctrl+F5) 을 하셔서 썸네일을 확인해보세요.

 

 

마무리 문단까지 자연스럽게 이어서 사용할 수 있게 정리해드렸어요.

이처럼 티스토리 북클럽 스킨에서 기본으로 제공되는 가로형 썸네일은 간단한 설정만으로도 충분히 정사각형 형태로 변경할 수 있어요. 작은 차이처럼 보이지만, 썸네일 비율이 바뀌는 것만으로도 블로그 전체의 완성도와 가독성이 훨씬 높아지는 것을 느끼실 수 있을 거예요.

특히 썸네일에 텍스트를 넣어 활용하시는 분들이라면, 정사각형 비율은 내용을 더 또렷하게 전달하는 데 큰 도움이 돼요. 방문자 입장에서도 한눈에 보기 편한 구조가 되기 때문에 클릭률에도 긍정적인 영향을 줄 수 있어요.

처음에는 조금 낯설 수 있지만, 한 번만 설정해두면 이후에는 계속 적용되기 때문에 꼭 한 번 적용해보시는 것을 추천드려요. 깔끔하고 정돈된 블로그를 만들고 싶다면, 지금 바로 적용해보세요.