티스토리 썸네일 사이즈 변경하기(정사각형으로 만들기)

혹시, 아래의 왼쪽 이미지처럼 글의 대표 이미지가 직사각형 모양으로 되어 있어 이미지 내용이 잘려 보이지 않나요?

글의 내용을 가늠할 수 있도록 설정한 대표 이미지를 썸네일이라고 하는데요. 

 

아래의 오른쪽 이미지처럼 나타나게 하려면, 썸네일 모양을 정사각형으로 만들어야겠네요!

썸네일 사이즈를 잘 변경하면 아래의 오른쪽 이미지처럼 이미지의 내용이 잘려 보이지 않고 잘 나올 수 있습니다.

 

 

 

적절하게 적용한 썸네일은 독자가 글에 흥미를 가질 수 있도록 한다는 점에서 때로 매우 중요한 역할을 합니다. 썸네일 사이즈나 모양 역시 중요한 역할을 한답니다!

 

그럼 썸네일 사이즈는 어떻게 변경할 수 있을까요?

티스토리 블로그의 썸네일 사이즈를 변경하는 방법을 알아보겠습니다.

더 정확히 표현하자면, 썸네일의 내용이 잘리지 않도록 직사각형의 썸네일을 정사각형으로 변경해 보겠습니다. ^^

 

 

 

<목차>
1. 스킨 변경하는 방법
2. 썸네일 사이즈 변경하기

 

 

 

 

1. 스킨 변경하는 방법

 

제가 적용하고 있는 스킨은 'Book Club'입니다. 글 목록을 나타내는 방식은 '뉴북' 형식을 사용하고 있습니다.

제가 적용하고 있는 스킨 형태로 썸네일 사이즈 변경 방법에 대해 설명드리고자 하니 참고해 주세요.

 

혹시 여러분이 적용하고 있는 스킨을 정확히 알고 싶다면, '관리 페이지 ▶ 꾸미기  ▶ 스킨 변경'에서 확인 가능합니다. 

 

다른 스킨으로 변경하고 싶다면, 아래에 있는 스킨 목록 중 하나를 선택하여 마우스를 살짝 위로 올려 보세요. 이때 나타나는 적용 버튼을 클릭하면 해당 스킨으로 변경할 수 있습니다.

 

 

 

 

제가 사용하고 있는 'Book Club' 스킨에서 글 목록을 나타내는 방식을 변경하고 싶을 경우, 

'관리 페이지 ▶ 꾸미기  ▶ 스킨 편집 ▶ 커버 ▶ 리스트 타입'에서 가능합니다. 저는 '뉴북'을 선택했습니다.

 

 

 

 

 

2. 썸네일 사이즈 변경하기

 

이제 본격적으로 썸네일을 직사각형에서 정사각형으로 변경해 보겠습니다.

저처럼 스킨을 'Book Club', 글 목록을 나타내는 방식을 '뉴북'으로 선택하신 분들은 동일하게 변경하시면 되고,

다른 스킨이나 형식을 사용하신다면 참고하여 응용하시면 좋을 듯해요!

 

'관리 페이지 ▶ 꾸미기  ▶ 스킨 편집 ▶ html 편집'을 클릭합니다.

 

 

 

 

html 편집을 클릭했다면, 아래와 같이 HTML 창이 나타납니다.

이제 이 안에서 우리는 's_article_rep_thumbnail'를 찾을 것입니다.

 

HTML 코드가 적인 이 화면 안에서 마우스 왼쪽 버튼을 한번 클릭하세요. 

 

이어 'Ctrl(Control) + F'를 동시에 클릭하세요.

맥북이라면 'Cmd(Command) + F'를 동시에 클릭하면 됩니다.

 

➜ 종합하면, 'HTML 창 안에서(마우스로 찜함) 뭔가를 찾아볼게(Ctrl+ F)'라는 뜻입니다.

 

그럼, 상단에 텍스트를 입력할 수 있는 입력창이 나타납니다. 

s_article_rep_thumbnail를 입력한 후, Enter를 클릭하세요.

 

 

 

 

400번대에서 s_article_rep_thumbnail 텍스트를 찾았는데요.

 

저처럼 C230x300 형식이 보이시나요? 이런 형식이로 나타나는 숫자가 바로 현재 썸네일 사이즈(가로x세로)입니다.

가로가 더 짧다 보니, 그동안 썸네일 내용이 잘려 보였나 봅니다!

 

저는 정사각형으로 나타내고 싶어서 사이즈를 수정해 보겠습니다.

숫자를 동일하게 나타내어 주면 좋겠죠?

 

C230x230도 좋고, C300x300도 좋을 듯합니다.

제가 만든 썸네일의 원래 사이즈가 300x300(가로x세로)이어서, 저는 C300x300로 입력하겠습니다.

 

조심스럽게 사이즈만 변경한 후, 오른쪽 상단의 '적용' 버튼을 클릭해 주세요.

적용 버튼까지 클릭해야 반영이 된답니다!

 

 

 

 

자, 티스로티 블로그를 다시 확인해 보세요.

정사이즈로 만든 썸네일이 잘려 보이지 않고 잘 보입니다!

 

오, 멋져! 제가 해냈어요! ^^

 

 

 

물론, 여러분이 만든 썸네일이나 대표이미지로 설정한 이미지 원본 자체가

저처럼 정사각형이 아니라 직사각형 형태라면 그 사이즈에 맞게 HTML 창에서 사이즈를 입력해도 좋겠습니다. 

 

응용하면서 다양하게 실험해 보세요! ^^