본문 바로가기
+ Development/Tistory

[Tistory] 티스토리 Book Club 스킨 썸네일 정사각형으로 수정하기

by :: Teacher :: 2022. 1. 23.
728x90
반응형

[Tistory] 티스토리 Book Club 스킨 썸네일 정사각형으로 수정하기
[Tistory] 티스토리 Book Club 스킨 썸네일 정사각형으로 수정하기

티스토리(Tistory)에 스킨 중 Book Club 스킨을 사용하고, 특히 리스트 타입인 "뉴북"을 사용하는 경우 홈 화면에서 글 옆에 있는 사진이 잘린다거나, 대칭이 안 맞게 설정되어 있다.

올린 이미지는 정사각형으로 250 x 250 Size이다. 

그럼 해당 부분을 정사각형 형식으로 나오도록 설정하는 방법에 대해서 알아보도록 하자. 

1. HTML 편집 화면으로 이동

우선 티스토리 관리자 화면으로 들어가서 "꾸미기 > 스킨 편집"을 선택하자.

그 후 "html 편집" 선택 후 "HTML" 항목으로 이동하자.

1. HTML 편집 화면으로 이동
1. HTML 편집 화면으로 이동

2. 기존 설정 확인하기

HTML 편집 화면으로 들어가서 "article_rep_link"를 검색을 하자.

검색하면 아래와 같이 썸네일(Thumbnail) 이미지 크기가 C 230x300으로 설정됨을 확인할 수 있다. 

2. 기존 설정 확인하기
2. 기존 설정 확인하기

230x300으로만 봐도 정사각형이 아님을 알 수 있다. 

이제 이 부분을 250x250으로 수정하도록 하자.

물론 300x300 / 350x350 / 400x400으로 해도 무방하지만 개인적으로는 250x250 혹은 300x300이 제일 현재 화면에 잘 어울리는 것 같다. 

반응형

3. 사이즈 변경

이제 아래와 같이 250x250으로 정사각형 형태로 변경해보도록 하자. 

3. 사이즈 변경
3. 사이즈 변경

HTML 편집 화면에서 변경 후 맨 위에 있는 "적용" 버튼을 클릭 하자.

변경 완료 후 이제 홈 리스트 화면으로 접근을 해보면 아래와 같이 정사각형으로 변경된 것을 확인할 수 있다. 

3. 사이즈 변경
3. 사이즈 변경

이렇게 하면 조금이라도 깔끔한 느낌이 나서 만족할 것이다.

728x90
반응형

댓글


loading