[html/css] 티스토리 썸네일 크기 조절 하는 법

※ 목차

1. css 수정

2. html 수정

 

---

 

1. css 수정

---

ctrl + F를 눌러 thum img를 검색해주세요. 여러 개의 thum img가 검색이 되는데 바꾸고자 하는 부분을 골라 수정해주시면 됩니다.

 

 

① 블로그 홈의 썸네일을 수정하려는 경우

---

.post-type-thumbnail .post-item .thum img와 .post-item .thum img의 width와 height를 각각 변경해주세요. 정사각형 모양으로 만들고 싶다면 width와 height를 같게 하면됩니다.(보통 100%나 150px로 입력하시면 적당합니다.) 만약 이미지의 잘림이 발생한다면 margin(여백)을 조절해주면 됩니다. 변경을 마치셨다면 이제 html 수정으로 넘어가면 됩니다.

 

 

 

 

적용 모습 1

 

적용 모습 2

 

 

② 블로그 글의 관련 글의 썸네일을 수정하려는 경우

---

.related-articles ul li .thum img를 찾아 width와 height를 각각 변경해주세요. 정사각형 모양으로 만들고 싶다면 width와 height를 같게 하면됩니다.(보통 100%나 150px로 입력하시면 적당합니다.) 변경을 마치셨다면 이제 html 수정으로 넘어가면 됩니다.

 

 

 

 

적용 모습

 

③ 기타

---

적용된 블로그 스킨에 따라 수정해야 하는 곳이 조금씩 다릅니다. 예를들어 커버가 있는 스킨을 사용하는 경우 수정해야하는 부분이 보통 .cover로 시작합니다. thum img를 검색해 수정하실 때 이 점을 주의해주세요. 수정을 마치셨다면 이제 html 수정으로 넘어가면 됩니다.

 

예제, 커버의 썸네일 크기 수정 부분

 

 

2. html 수정

---

아래와 같이 C230×300을 R200×200으로 수정해주세요.

(R은 이미지를 자르지 않지만 C는 이미지가 규격에 맞지 않는다면 잘라버립니다.)