블로그 꾸미기 팁

티스토리 오디세이 목록 썸네일 정사각형으로 변경하는 법

하이풋 2021. 5. 3. 18:09

티스토리 오디세이 글 목록 썸네일 정사각형으로 변경하는 법을 소개해드리겠습니다.

티스토리의 경우 다음 검색 노출 시 썸네일이 정사각형(1:1) 비율로 노출이 되는데 오디세이 스킨의 경우 포스팅 목록의 썸네일이 가로가 더 깁니다.

따라서 적절하게 썸네일을 등록하기 어려워지는데요.

오디세이 스킨을 변경하여 간단하게 썸네일을 정사각형 비율로 만들 수 있습니다.

다른 블로그의 글에서도 해당 방법에 대해 다양하게 설명되어 있는데 생각보다 복잡하게 알려드리고 있더라고요.

CSS를 복사, 붙여 넣기 하는 과정만으로 가능하도록 알려드리겠습니다.

이 글이 블로그 운영에 소소하게나마 도움이 되었으면 좋겠습니다.

티스토리 오디세이 글 썸네일 비율 변경 전후

우선 썸네일 비율을 변경하도록 도와드리기 앞서서 원래 어떻게 생겼고, 어떻게 변하게 될지 한번 사진으로 확인해보고 진행하겠습니다.

원본 비율의 경우 가로가 더 긴 형태의 썸네일입니다.

따라서 블로그와 다음 노출 시 썸네일 비율이 달라 정사각형으로 통합이 필요해 보입니다.

다음 노출 시 나오는 썸네일 사이즈와 블로그 글 목록 내의 썸네일 사이즈가 동일해져서 대표 이미지 설정에 혼란이 없습니다.

* 이미지 크기의 경우 더 크게 바꾸는 설정법도 알려드리고 있으니 참고해주시길 바랍니다.

이제 티스토리 블로그 오디세이 스킨의 글 미리 보기 썸네일 비율을 정사각형으로 바꿔봅시다.

썸네일 비율을 변경하기 위해서는 CSS 편집이 필요한데요.

우선 블로그 설정을 접속해주셔야 합니다.

블로그 설정은 티스토리에 접속하셔서 우측 상단에 있는 프로필 사진을 누르면 나오는 톱니바퀴 모양입니다.

썸네일 비율을 변경하고 싶은 블로그의 톱니바퀴 모양 아이콘을 선택해줍니다.

왼쪽에 블로그를 설정할 수 있는 다양한 메뉴들이 나옵니다.

꾸미기에 있는 스킨 편집을 눌러줍니다.

우측에 html 편집이라는 버튼을 클릭해주세요.

HTML을 건들지 않고 오직 CSS만 바꾸셔도 충분히 썸네일 비율을 정사각형으로 만들 수 있습니다.

게다가 복사, 붙여 넣기만 하시면 끝나도록 알려드리겠습니다.

위 텍스트 파일에 있는 내용을 복사하셔서 에디터(CSS) 가장 아래에 붙여 넣기만 하시고 저장하시면 끝납니다.

기본적으로는 가로, 세로 100px로 설정됩니다.

만약에 더 크거나 작은 사이즈를 원하실 경우 해당 코드 내에 변경법을 모두 알아보실 수 있게 담아두었으니 참고하여서 변경하시면 됩니다.

간단하게 티스토리 오디세이 스킨 글 목록 썸네일(미리 보기)을 정사각형 비율로 바꿔보았습니다.

비슷한 분이 많이 읽으신 글

티스토리 오디세이 스킨 제목 배경 제거 방법

외에도 수익형 블로그를 운영하는 다양한 꿀팁을 블로그카우 종합 코스에 공개했습니다.

일부 내용은 미리보기로 무료 공개했으니 구경하고 가세요.

티스토리 오디세이 글 썸네일 정사각형으로 변경하는 법을 전달해보았습니다. 전부 읽어주셔서 감사합니다. 추가적으로 필요하신 정보가 있다면 위의 글들을 참고하십시오. 이 포스트가 유익하셨다면 구독, 하트(공감), 댓글을 해주시면 저에게 힘이 됩니다.