티스토리(tistory) 시행착오 8. 썸네일 사이즈 변경(북클립,정사각형)

 

 

안녕하세요. 러닝머신입니다.

게시글 하나를 작성할 때 관심을 끌기 위해서 반드시 해야 하는 작업은 바로 썸네일(thumbnail) 작업입니다.

그리고 일반적으로 썸네일은 정사각형으로 만듭니다. 하지만 북클립 기본 썸네일은 정사각형이 아닌 직사각형으로 되어 있습니다. 그래서 이번에는 썸네일 크기를 직사각형에서 정사각형으로 바꾸는 방법을 알아보겠습니다.

 

 

목차

 

티스토리는 다른 블로그와 달라서 html과 CSS 코딩으로 세팅을 변경해야 합니다.

저는 컴퓨터 언어를 모르기 때문에 정말 많은 시행착오를 겪었습니다. 그래서 이번에는 제가 시도해 본 모든 방법을 알아보겠습니다. 모든 방법을 사용해 보시고 저와 같이 이런데 오랜 시간을 투자하지 않으시길 바랍니다.

(* 파일 위치를 찾을 때는 반드시 코딩 창 안에서 ctrl + F를 누르시길 바랍니다.)

 

1. 첫 번째 시도

1) html

s_article_rep_thumbnail을 검색합니다.

>> thumb 사이즈를 C250x250으로 변경 (C=center, 300x300으로 변경해도 무방합니다.) 

 

html 코드변경

 

2) CSS

list-type-thumbnail .post-item .thumb img을 검색합니다.

>> width=160, height =160

CSS 코드변경

 

2. 두 번째 시도

CSS

list-type-thumbnail .post-item .thumb img를 검색합니다.

>>  width=160, height =auto 

list-type-thumbnail .post-item .protected .thum 

>>  width=160, height =auto

 

CSS코드 변경 두 번째 시도

 

 

 

3. 세 번째 시도 (성공했던 방법)

html

s_article_rep_thumbnail을 검색합니다.

>> thumb 사이즈를 C250x250으로 변경

 

CSS

.post-item .thum 검색합니다.

>> padding bottom을 100% 로 수정

바로 아래에 있는 .post-item .thum img

>> 아래 이미지와 같이 수정해 줍니다.

padding-bottom (100%) / webkit- transform: translateY  수치 변경

마지막에 webkit-transform: translateX(0%)는 추가

 

CSS 코드변경 세 번째 시도

 

 

많은 시간을 투자하면서 오기로 알아낸 방법들입니다.

'북클립' 스킨에서 정사각형 베너를 사용하기를 원하시는 분들께 작은 도움이 되기를 바랍니다.

 

 

※ 함께 보면 좋은 글

 

 

티스토리(tistory) 시행착오 7. sitemap, rss 설정

 

티스토리(tistory) 시행착오 3. 도메인 설정