티스토리 썸네일 정사각형 설정 방법
티스토리 썸네일을 정사각형으로 설정하는 방법에 대해서 알아보겠습니다. 간단한 코드 변경만으로 가능하니 수정해서 깔끔하게 보일 수 있으니 참고하시기 바랍니다.
티스토리 블로그의 썸네일은 정사각형 이미지가 아니라 가로로 긴 직사각형이거나 북클럽의 경우 세로로 긴 직사각형이라서 썸네일 이미지를 만들어 올리면 깔끔한 모습이 아닐 때가 많습니다.
정사각형 이미지에 맞춰 썸네일을 설정하는 방법에 대해서 알아보겠습니다.
티스토리 썸네일 꾸미기
1. 썸네일 정사각형으로 설정하기
가장 많이 사용하는 북클럽 기준으로 안내드리겠습니다.
썸네일을 정사각형 이미지로 만들어서 업로드를 했지만 이미지가 잘려서 깔끔한 느낌이 부족합니다.
정사각형으로 설정하기 위해서는 스킨편집으로 들어가서 변경을 해주어야 합니다.
스킨편집에서 리스트 타입을 북리뷰에서 뉴북으로 변경해 줍니다. 들어간 김에 글 수도 기본이 4개인데 개수를 20개까지 늘려주었습니다.
그다음에 HTML편집으로 들어가서 s_article_rep_thumbnail을 검색합니다.
s_article_rep_thumbnail이 여러 개 검색되면 위에 보이는 대로 사이즈형식이 있는 코드를 찾아서 수정해 줍니다. 230*300으로 되어있는데 책모양의 세로 썸네일로 목록에 표기됩니다. 이 부분을 230*230도 괜찮고 300*300도 괜찮습니다.
정사격형 수치로 변경해 주면 글 목록에서 사이즈가 정사각형으로 보이게 됩니다.
티스토리 썸네일 꾸미기
2. 썸네일 크기 키우기
HTML편집에서 정사격형으로 수정을 완료하면 글 목록에서 보여지는 썸네일이 정사각형으로 정상 반영되었음을 알 수 있습니다.
하지만 크기가 작아서 글씨가 잘 안보이는 듯한 모습입니다.
썸네일 크기를 키워주기 위해서 CSS로 들어가서 코드를 찾아줍니다.
list-type-thumbnail을 검색해 주면 아래 이미지처럼 코드가 나오는데, 이미지 width 수치를 수정해 주면 됩니다.
thum img 아래에 있는 width를 126px > 160px로 변경해 줍니다.
변경 전에 오류를 대비해서 기존 사이즈를 옆에 복사해 두고 주석처리를 합니다. /* 내용 */
이어서 바로아래 width는 126px > 160px로 변경해 주고, height는 166px > auto로 변경해 줍니다. 마찬가지로 기존 사이즈는 변경 전에 미리 복사해서 주석처리 해둡니다.
적용버튼 누르고 새로고침을 하면 완료됩니다.
코드 적용 마무리 후에 목록을 확인해 보면 썸네일 크기가 커져서 가독성이 높아져 있는 것을 확인할 수 있습니다.
이상으로 글 목록에 썸네일을 정사각형으로 변경하고 크기를 수정하는 방법에 대해서 포스팅을 마칩니다.
'티스토리 > 티스토리 관리 팁' 카테고리의 다른 글
| 북클럽 스킨 "H1 태그 중복" 문제 해결 방법 (구글 SEO) (0) | 2024.01.16 |
|---|---|
| 티스토리 애드센스 상단광고 2개 설정하는 방법 (2023년 12월) (0) | 2023.12.25 |
| 티스토리 코드블럭 꾸미기 (열림, 닫힘, 줄바꿈, 스크롤) (0) | 2023.12.21 |
| 티스토리 코드블럭 복사버튼 만들기 (0) | 2023.12.16 |
| 티스토리 이미지 지연로드 설정방법 (0) | 2023.12.14 |
