[블로그] 티스토리 메인 화면 썸네일 비율 조정

   안녕하세요, 리뷰당 입니다.

이번 포스팅에서 다뤄볼 내용은 '티스토리 메인 화면 썸네일 비율 조정'에 대한 부분입니다. 저는 가장 많이들 사용하시는 북클럽 스킨을 사용 중에 있는데요. 썸네일이나 대표 이미지가 정방형으로 1:1 비율로 보였으면 좋겠다는 생각을 하였는데요. 찾아보니 이러한 부분을 HTML 코드 수정으로 변경을 할 수 있더군요. HTML 수정은 부담스럽지만 해당되는 부분만 찾아서 수정만 하면 되니 생각보다 간단히 변경하실 수 있으실 겁니다. 그럼 오늘의 포스팅 시작해 보겠습니다!

 

 

 

1. 이미지 비율 수정 전, 후 비교

▼ 티스토리 메인 화면에 들어가면 제가 작성한 글 목록을 볼 수 있으실 껍니다. 글 제목과 내용 우측에 대표 사진으로 설정해두었던 사진이 썸네일로 들어가게 되는데요. 수정 전에는 이미지 길이가 포스터 형식으로 적용되어 있어서 이미지 길이가 길어져 문단 라인과 딱 떨어지지 않아 깔끔하게 보이지 않네요. 그래서 대표 이미지가 깔끔하게 보일 수 있도록 스킨 편집에서 2군데 수정이 필요합니다.

 

• HTML 수정 적용 전

• HTML 수정 적용 후

 

2. 수정 방법

▼ 우선 티스토리 [관리]-[스킨편집]으로 들어가 줍니다. 스킨편집 항목에 들어가 보시면 [html 편집]을 눌러주시면 html 코드를 수정해 주실 수 있어요. 

 

 

 

■ 이미지 표시 크기 변경

 

▼ 우선 티스토리 [관리]-[스킨편집]으로 들어가 줍니다. 스킨편집 항목에 들어가보시면 [html 편집] 을 눌려주시면 html 코드를 수정해 주실 수 있어요. 일단 상단 CCS 화면으로 가줍니다. 들어가서 CCS 화면에서 아래 코드를 검색해주세요 (cmd + f, ctrl +f)

- 검색 코드  :. list-type-thumbnail

 

아래 항목을 찾을 수 있습니다. 저희가 수정해야 할 항목은 검색어 뒤 [post-item .thum img]을 찾아보세요. 보시면 height (높이)가 auto(자동)으로 디폴트 설정되어 있으실 거예요. 저희는 정방형 사이즈를 원하기 때문에 width(폭) 길이와 동일하게 126px으로 수정해주세요.

 

이미지 크기 수정 전

 

그리고 수정해주셔야 할 부분이 margin-left 부분입니다. 메인 화면 글 목록에서 글 제목/내용 일부 옆에 이미지가 있잖아요. 그 사이 간격 마진이라고 생각해주시면 될 것 같아요. 수정전에는 너무 멀리 있어서 조금 더 가깝게 표시되도록 20px ~30px으로 수정합니다. 저는 30px 수준으로 수정하였습니다. 완료하셨으면 창 우측 상단에 [적용] 꼭 클릭해 주세요. 만약 margin-right 가 설정되어 있으시다면 지우시고 margin-left으로 입력하셔서 간격을 입력하시면 될 거예요.

 

이미지 크기 수정 후

 

 

■ 이미지 표시 비율 변경

 

▼ 상기 이미지 크기만 변경하게 되면 아래 그림처럼 이미지가 크기에 맞지 않게 늘어지는 이미지 모습을 보실 수 있을 거예요. 그래서 이미지 비율을 맞춰주는 작업이 필요할 것 같아요.

 

 

▼ 이번엔 CCS 환경이 아닌 html 환경에서 편집을 해야 됩니다. 전과 동일하게 편집 환경에서 가셔서 html 환경으로 들어가 주세요.그리고 아래 코드를 검색합니다. (검색 : cmd + f, ctrl +f)

 

보시면 C230x300으로 초기 세팅되어 있을 거예요. 이 부분을 C200x200으로 수정해 줍니다. 정방형 사이즈이기 때문에 가로, 세로 동일하게 하는 것이죠. 수정 후 오른쪽 상단의 [적용] 버튼 꼭 눌러주세요.

- 검색 코드  :  s_article_rep_thumbnail

이미지 표시 비율 수정 전

 

이미지 표시 비율 수정 후

 

▼ 수정 후 정말 보기 좋게 표시되는 크기와 비율이 조절되었습니다! 전과 비교할 시 참 깔끔해졌습니다.^^

    마무리

이번 시간에는 티스토리 북클럽 스킨에서 메인 화면에 표시되는 이미지의 크기와 비율 조절에 대해 살펴보았습니다. 깔끔하지 않은 블로그의 모습은 분명 글을 읽는 분들께 감점 요소라 생각됩니다. 보기 좋은 떡이 맛도 좋다고 설명드린 부분 잘 적용해 보시길 바래요!

 

그럼 이번 포스팅은 여기까지 정리하도록 하겠습니다.
끝까지 글 읽어주셔서 감사드리며 다음에는 더 유익한 정보와 리뷰로 찾아뵙겠습니다! ^^ 

 

 

  ▶ 이 글과 연관된 포스팅 글을 확인해보세요  

▶ [블로그] 티스토리 썸네일 적정 사이즈와 썸네일 간단히 만드는 방법