티스토리 오디세이(Odyssey) 스킨, 썸네일 정사각형(정방형)으로 바꾸기 - 포스터 타입

티스토리 오디세이(Odyssey) 스킨, 썸네일 정사각형(정방형)으로 바꾸기

오늘은 티스토리에서 제공하는 무료 반응형 스킨 중 하나인 오디세이(Odyssey)에서 기본 목록 스타일인 포스터 타입의 썸네일을 정사각형으로 바꾸는 방법에 대해서 알아보도록 하겠습니다.

티스토리 오디세이 스킨 자세히 보기

 

오디세이 - 포스터 타입 미리 보기

먼저, 오디세이 포스터 타입 최초 설정 시 어떻게 보이는지 확인해보도록 하겠습니다. 혹시 아직 스킨을 적용하지 않은 상태인 경우 바로 스킨을 변경하지 마시고, [꾸미기 - 스킨 변경]에서 원하는 스킨의 미리 보기를 통해 확인 후 변경해 주세요.

 

저는 썸네일이 어떻게 보이는지 쉽게 비교할 수 있도록 아래와 같이 세 가지 종류의 썸네일을 적용한 글을 미리 작성해 두었습니다. 

 

[등록되어있는 썸네일의 크기]

정사각형 썸네일: 600 x 600 

넓은 직사각형 썸네일: 1024 x 768

긴 직사각형 썸네일: 768 x 1024

 

포스터 타입 스킨은 아래 화면과 같이 길쭉한 직사각형 썸네일에 딱 맞는 포스터 비율 썸네일을 제공하고 있습니다. 정사각형(정방형)이거나 넓은 썸네일의 경우 일부가 잘리는 부분을 확인하실 수 있으며, 아래 등록된 글들 역시 넓은 직사각형 이미지가 등록되어있어 확대된 후 양쪽이 잘려있는 썸네일로 노출되고 있습니다.

변경 전 썸네일

 

티스토리 스킨 편집 도구 열기

스킨을 편집하기 위해 티스토리 블로그 관리자에서 [꾸미기 - 스킨 편집]을 선택하여 스킨 편집 도구를 열어주세요. 앞서 말씀드린 바와 같이 오늘 편집하는 스킨은 '오디세이'이며, 포스터 타입이며, 스킨 및 기본 목록 스타일이 다를 경우 수정방법이 달라지므로 본인이 설정한 것과 동일한 스킨인지 먼저 확인 후 진행하시는 것을 권장드립니다.

 

꾸미기 - 스킨 편집 / Odyssey - 포스터타입

 

CSS 편집

오른쪽 상단의 html편집 버튼을 클릭한 후, CSS 탭 메뉴를 선택해 주세요.

 

CSS 편집 메뉴 열기

 

CSS 편집 문서에서 다음과 같은 코드를 찾아주세요. 코드를 좀 더 쉽게 찾는 방법으로 Ctrl + F 버튼을 누른 후 아래 검색어를 입력하여 검색해주시면 됩니다. 

 

검색어: .article-type-poster .thumbnail

변경 전 CSS 코드

 

참고로 제 CSS 편집도구에서 해당 코드의 라인번호는 2496번 줄이었으나, 개인에 따라 일부 코드가 이미 변경되어 라인번호가 달라졌을 수 있으므로, 해당 라인 근처에서 코드를 찾아주시기 바랍니다.

 

코드를 찾으셨으면 padding-top의 값 132.5% 를 100%로 아래 이미지와 같이 변경해 주세요. 마지막에 붙는 세미콜론(;)은 잊지 말고 꼭 붙여주세요.

 

변경 전) padding-top: 132.5%;

변경 후) padding-top: 100%;

 

변경 후 CSS 코드

 

편집 후 스킨 확인

 

코드를 수정했다면, 편집 도구 오른쪽 상단에 있는 '적용' 버튼을 클릭한 다음 새로 고침 하여 올바르게 수정이 되었는지 확인해 봅니다.

 

변경 후 썸네일

 

직사각형 썸네일 및 이미지의 경우 높이 또는 너비에 맞춰 가운데 정렬되어 정사각형 썸네일로 보이는 것을 확인하실 수 있습니다. CSS 코드 한 줄만 수정하면 가능합니다.

 

 

모바일에서는 어떻게 보일까?

그럼 이제 모바일에서는 어떻게 보이는지 아래 비교 화면을 참조해 주세요.

 

기존 길쭉한 포스터 형태로 보이던 썸네일이 추가적인 CSS 수정 없이도 정사각형으로 보입니다. 오디세이 스킨은 티스토리의 북클럽 스킨과 다르게 썸네일 아래 제목만 붙어있는 형태이며, 모바일 화면에서 글이 두 개씩 나란히 붙어있는 특징이 있습니다. 같은 화면에서 북클럽보다 더 많은 글의 목록을 볼 수 있는 장점이 있겠습니다. 

수정 전 - 수정 후

 

 

이상으로 오디세이 스킨 썸네일을 정사각형으로 만드는 방법에 대해 알아보았습니다.

 

티스토리에서 활동 중인 많은 블로거분들이 깔끔한 광고 설정에 용이한 '북클럽' 스킨을 사용하십니다. 저 또한 북클럽 스킨을 애용하는 블로거로서 북클럽 스킨은 정말 인정할 수밖에 없는데요. 하지만 북클럽 스킨 외에도 티스토리에서 제공 중인 깔끔하고 이쁜 스킨이 많고, 조금만 손보면 개성 있고 효율 좋은 수익형 블로그로 거듭날 수 있다고 생각합니다. 

 

블로그에 방문해주신 분들에게 모두 감사드리며, 제 글이 부디 도움이 되셨기를 바랍니다.

오늘도 건강하고 행복한 하루 보내세요!