티스토리 북클럽스킨 게시글 리스트 사진 1:1비율 설정하기

 

아무튼-정보3

 

저는 북클립 스킨을 사용하고 있습니다. 

 

북클립의 스킨은 책을 소개하는 스킨으로 세팅되어 있어서 그런지 게시글을 작성했을 때 리스트에 보이는 이미지가 맘에 들지 않더라고요. 그래서 썸네일로 만든 이미지를 더 돋보이게 하기 위해 1:1의 정사각형 비율로 수정해 주려고 합니다.

 

🔎게시글 리스트 사진 1:1 비율 설정하기

이 과정은 홈페이지의 세팅을 바꾸는것이기때문에,관리  → 스킨편집  → html편집에서 수정을 해야 합니다.

 

먼저 북클립스킨 / 스킨편집에서 내려보면 리스트가 있습니다. 4가지 타입이 있지만 내용과 이미지가 나란히 보이는 뉴북타입으로 선택해줍니다. [저장은 필수]

 

뉴북-설정

뉴북은 게시글의 내용과 이미지가 옆에 나오는 대충 요런 디자인이에요!  본문 내용은 모자이크 처리 했습니다ㅎㅎㅎ

예시1

게시글에 넣은 이미지는 1:1 비율로 넣었는데, 블로그 메인화면에서 보이는 이미지는 직사각형으로 보여 너무 보기에 만족스럽지 않더라구요. 이 부분을 수정해 주려고 합니다.

 

 

🔎 html편집_사진 비율조정

스킨편집화면 / THML에서 단축키 ctrl + F를 눌러 <s_article_rep_thumbnail> 검색합니다.

썸네일-비율-조정

 

🙇🏻‍♀️ 블로그마다 순서는 조금씩 다른 거 같아서 주소를 주의해서 보는 게 좋습니다.

 

C230x300이 지금 나타내고 있는 이미지의 비율이기 때문에 200x200 또는 300x300으로 수정해 줍니다.

근데 다른 분들의 후기를 봐도 200이든 300이든 큰 차이가 없다고 하더라고요ㅎㅎ

 

그래서 저는 200x200으로 수정했습니다. [저장 필수]

 

🔎 CSS_사진비율조정

스킨편집화면 / CSS에서 단축키 ctrl + F를 눌러<list-type-thumbnail>를 검색합니다.

 

썸네일-비율-조정

 

<list-type-thumbnail.post-item.thum img> 부분을 수정해 줄 텐데,

width(너비) 126px로 세팅되어 있던 것을 150px로 세팅해도 정사각형의 모양이 나온다고 합니다.

하지만 저는 너비와 높이 동일하게 auto로 수정해 줬습니다.

 

 

📝 수정 후 결과!

 

예시2

이미지의 사이즈가 커짐으로서 썸네일로 정한 이미지가 더 잘 전달될수 있을꺼 같아 보입니다. 

 

 

 

아무튼-정보-LOG