티스토리 북클럽 스킨 썸네일 이미지 정사각형으로 바꾸기

티스토리 북클럽 스킨에서 썸네일을 정사각형으로 만드는 방법에 대해서 알아보도록 하겠습니다.

북클럽 스킨에서 대부분의 썸네일들은 직사각형 형태로 되어 있습니다. 직사각형으로 되어 있다면 썸네일 이미지를 만들기가 애매할 때가 많습니다. 간단한 html 변경으로 스킨을 수정해 보도록 하겠습니다.

 

티스토리 북클럽 스킨 썸네일 정사각형으로 바꾸기

먼저 thumbnail 부분이 어떻게 html 코드로 되어 있는지 확인해줘야 합니다.

키보드 F12 키를 누르면 개발자 도구가 나옵니다. 여기서 위 이미지 처럼 커서 표시를 클릭한 후 썸네일을 클릭해 줍니다.

그럼 해당 위치의 HTML 코드에서 div class 이름이 나옵니다.

[cover-thumbnail-x] 같은 이름의 클래스 이름이 나올겁니다. 이것을 복사해 줍니다.

 

티스토리 스킨 편집으로 가셔서 HTML 편집을 클릭해 줍니다.

Ctrl+F(찾기) 단축키를 이용해서 아까 복사해 둔 [cover-thumbnail-x] 값을 붙여 넣어 줍니다.

아래와 같은 코드가 나올겁니다.

<s_cover name='cover-thumbnail-4'>

<div class="cover-thumbnail-4">

<h2></h2>

<ul>

<s_cover_item>

<li>

<a href="">

<figure>

<s_cover_item_thumbnail>

<img src="//i1.daumcdn.net/thumb/C230x140/?fname=" alt="">

</s_cover_item_thumbnail>

</figure>

여기서 img src 부분에 [c230x140] 부분을 보시면 딱, 이미지의 크기라는 감이 오실겁니다.

이 부분을 정사각형 형태로 수정해 줍니다. 예) c230x230

그리고 나서 새로고침 버튼을 클릭해 보시면 썸네일이 정사각형으로 바뀐 것을 확인하실 수 있습니다.

 

 

 

만약 값을 수정했는데, 페이지가 이상하게 바뀌거나

이미지가 텍스트를 가리게 되면 CSS 부분도 수정이 필요합니다.

 

CSS 탭으로 가셔서 똑같이 Ctrl+f 찾기로 해당 썸네일 부분을 찾아 줍니다.

.cover-thumbnail-4 ul li figure {
display: block;
width: 100%;
height: 0;
margin-bottom: 5px;
padding-bottom: 100.869565217391304%;
background-color: #f8f8f8;

여기서 padding-bottom 부분을 100%로 바꿔줍니다.

여기서 세세한 부분을 수정하시다 보면 자신이 원하는 썸네일 형태가 나오게 될 겁니다.

 

오늘은 티스토리 썸네일 이미지를 정사각형 모양으로 만드는 방법에 대해서 알아보았습니다.

 

2021.08.30 - [블로그] - 북클럽스킨 최적화 썸네일 이미지 크기 비율 수정

북클럽스킨 최적화 썸네일 이미지 크기 비율 수정

2021.12.19 - [블로그] - 티스토리 북클럽스킨 포스트 커버 이미지 수정하기

티스토리 북클럽스킨 포스트 커버 이미지 수정하기