본문 바로가기
인터넷/티스토리

티스토리 북클럽 북리뷰 스킨 썸네일 정사각으로 바꾸기

by 애니 Annie 2022. 5. 20.

지금 보고 계신 글은 '티스토리 북클럽 북리뷰 스킨 썸네일 정사각으로 바꾸기'에 관한 내용입니다.

TISTORY 북클럽 '북리뷰 스킨'을 기본 셋업 하다 보면 그림이 어중간하게 가운데서 잘리는 모습을 확인할 수 있습니다.  네이버나 다음 검색 결과에서는 정사각형으로 썸네일이 출력되니, 내 블로그도 정사각형으로 바꾸어 운영해보는 것도 좋은 방법입니다.

 

'북클럽 스킨 썸네일 바꾸기'로 검색하여 HTML소스와 CSS소스를 바꾸다 보면 '읭?" 스럽게 가로 모양의 크기가 정사각형으로 변하지 않는 경우가 있는데요. 바로 북클럽 스킨도 4가지이며, 보통 기본 '뉴북'에 관련된 포스팅이 많아서 헷갈리는 경우가 많더라고요.

 

  • 북클럽 북리뷰 스킨 썸네일 정사각으로 쉽게 바꾸는 방법

1. 티스토리 블로그 관리자 로그인합니다.

2. 블로그 관리 메뉴로 이동

3. 꾸미기 스킨 편집

4. 오른쪽 상단 HTML 편집 버튼을 클릭합니다.

5. HTML 편집창이 열리면, CTRL+F 를 이용하여 'thumb/C250x250/'를 검색합니다.

6. C250x250으로 수정하고 저장합니다.

7. 오른쪽 상단 CSS편집 버튼을 클릭합니다.

 

8. CTRL+F를 이용하여 thum img를 검색합니다.

9. thum img 해당 줄 기준 3칸 위에 padding-bottom: 100%로 수정합니다.

10. thum img 해당 줄 기준 1칸 아래에 width: inherit;로 수정합니다.

11. thum img 해당 줄 기준 6칸 아래에 webkit-transform: translateX(0%);를 추가합니다.

12. 화면 오른쪽 상단 적용 버튼을 클릭하면 완성됩니다.

13. 이제 브라우저에서 블로그를 확인하시면 모든 이미지가 정사각형으로 보일 것입니다.

 

그럼 지금까지 티스토리 북클럽 북리뷰 스킨 썸네일 정사각으로 바꾸기에 대해 알아봤습니다. 관심과 댓글은 사랑입니다. 감사합니다.

반응형

↓ 이 글 공유하려면 ↓

facebook twitter naver band kakaostory kakaoTalk


↓ 구독하려면 클릭 ↓



댓글