썸네일 이미지 정사각형 변경하기 - 티스토리 북클럽 스킨

 

 

안녕하세요 힐잉입니다.

 

《북클럽》 스킨은 썸네일 이미지가 직사각형이라 정사각형 썸네일 이미지는 잘려서 보입니다. 그냥 두거나 추가로 썸네일 이미지를 만들어야 하는 불편함이 있는데요. 구글에 검색을 해보니 썸네일 이미지를 정사각형 모양으로 수정할 수 있는 방법이 있기에 그 내용을 공유 합니다.

 

 

《북클럽》 스킨의 기본 썸네일 이미지

 

썸네일이 잘려서 제목을 알 수 없다. 폰트를 수정한 덕분에 글자는 예쁘다.

 

 

 폰트 수정에 관한 참고 포스팅

 

티스토리 북클럽 스킨 글꼴 변경하기 - CSS 수정

 

 

728x90

 

 

 

Step1 : 스킨 편집 → html 편집으로 이동

 

 

 

Step2 : Html 탭 내용 수정

 

 

• html 탭에서 Ctrl + F 를 누르고, 's_article_rep_thumbnail'을 검색한다.
• 검색하면 위 그림처럼 4개의 검색 결과가 나타난다.
• <s_article_rep_thumbnail>과  </s_article_rep_thumbnail> 사이에 있는 [C230x300]을 찾아 원하는 정사각 사이즈로 수정한다. 예제에서는 C250x250으로 수정

 

 

Step3 : CSS 탭 내용 수정

 

 

• CSS 탭에서 Ctrl + F 를 누르고, '.post-item .thum'을 검색한다.
• 검색하면 위 그림처럼 9개의 결과가 나타난다.
• .post-item .thum 괄호 안의 [padding-bottom : 60.89xxx%] 를 [100%] 로 수정한다.
• .post-item .thum img 괄호 안의 [width : 100%]를 [inherit] 로 수정한다.
• .post-item .thum img 괄호가 끝나기 전에 커서를 둔 상태에서 [Enter] 를 치고, [-webkit-transform: translateX(0%);] 를 추가한다.

 

위 과정을 모두 완료하면 끝이다.

수정된 사항을 정리한 내용은 아래 캡쳐 참조하시면 됩니다.

 

 

 

 

수정 완료 후 썸네일 이미지

깔끔하게 정사각형 모양으로 나온다!!

 

 

 

이상으로 티스토리 기본제공 스킨 북클럽 스킨의 썸네일 이미지 크기를 수정방법에 대한 내용 포스팅을 마칩니다. 끝까지 읽어주셔서 감사합니다. 조금이나마 도움이 되셨기를 바랍니다!!