자세히보기

크리에이터 초보여도 괜찮아/티스토리 블로그 마스터하기

티스토리 목록 썸네일 이미지크기 비율 동일하게 설정하는 방법(모든스킨 적용가능)

갓찌뇽 2022. 7. 14. 08:00
반응형

티스토리 대표이미지 동일하게 비율설정하기 (썸네일 크기 고정)

 

티스토리를 운영하다보면 여러가지를 자체적으로 수정해야할 사항들이 꽤나 많은데요. 그중에서도 썸네일이미지가 뒤죽박죽 크기로 업로드되어 정돈된 느낌이 들지 않을 때 티스토리 목록 썸네일 이미지크기비율을 동일하게 설정하는 방법을 알려드릴게요~! 모든 스킨에 적용가능한 방법이니 참고해보셨으면 좋겠습니다.

 

 

 

01. 개발자 도구에서 썸네일 CSS 위치찾기


STEP1 개발자 도구에서 썸네일 CSS위치찾기 [티스토리설정]-[스킨편집]에 들어간 후 썸네일  오른쪽마우스 클릭에서 [검사]를 선택 후 개발자 도구로 들어가주세요.

 

 

STEP2 선택된 개발자 도구에서 썸네일만 선택되도록 코드를 선택해줍니다.

 

 

STEP3 CSS에서 선택된 .article-type-resize , thumbnail {를 복사해주세요.

 

 

 

02. 티스토리 CSS에서 크기 변경해주기


STEP1 티스토리 CSS편집창으로 넘어와서 Ctrl + F 찾기 누른 후 붙여넣기를 해주세요.

 

 

STEP2 .article-type-resize , thumbnail { 에서 height 값이 auto;로 되어있는 곳을 확인합니다. 가로사이즈width값은 100%로 지정이 되어있기 때문에 크기가 변동이 없지만 세로사이즈 height값은 자동으로 지정이되어 있었기 때문에 대표이미지(썸네일)이 크기 그대로 목록에 보여지고 있었기 때문에 이부분을 변경해줄게요.

 

STEP3 height값을 300px;로 변경해주세요.

 

 

 

03. 최종변경된 썸네일 확인


변경 전과 변경 후 비교해보니 잘 조정이 되었죠? 앞으로는 대표이미지 사이즈가 아무리 크더라도 그대로 노출되지 않고 이렇게 일정하게 비율이 맞춰져서 보여질거에요. 딱봤을때 보기 좋게 변경하는 건 중요한 항목이니 꼭 짚고 넘어가보면 좋을 것 같습니다. 오늘도 빠이팅이에요!

 

[유용한 관련글 보기]

728x90
반응형