오늘은 티스토리에서 가장 많이 사용되는 북클럽 스킨의 썸네일 모양을 변경하는 방법을 정리해 보겠습니다. 북클럽 스킨의 리스트 타입이 '뉴북'인 경우 홈화면의 '글목록'과 글 내용 하단의 '관련글'의 썸네일이 직사각형으로 표시되어 본인이 설정한 썸네일이 잘려 보이게 됩니다. 이 직사각형 모양을 정사각형 모양으로 변경하면 잘리지 않은 정상적인 모양의 썸네일을 확인할 수 있습니다.
홈화면 글목록 썸네일 모양 변경
티스토리 북클럽 스킨의 리스트타입을 뉴북으로 했을 경우 홈화면의 글목록의 썸네일은 아래와 같이 위아래로 긴 직사각형 모양으로 표시됩니다. 본인이 등록한 썸네일의 좌우측 화면이 잘려서 표시되어 어색한 모양이 됩니다.
이 모양을 정상적으로 변경하기 위해서는 HTML과 CSS의 수정이 필요합니다. 티스토리 관리메뉴의 스킨편집화면에서 상단 오른쪽의 'HTML 편집"을 클릭하여 HTML 편집메뉴로 이동합니다. HTML편집메뉴에서는 상단의 HTML과 CSS 선택메뉴를 이용하여 각각 편집이 가능합니다.
1. HTML 편집
HTML편집창에서 Ctrl+F를 누르고 검색창에 자신이 찾는 단어를 입력하면 해당 단어의 위치를 찾을 수 있습니다. 썸네일 모양을 바꾸기 위해 "s_article_rep_thumbnail"을 찾습니다. 줄번호는 사용자의 조건에 따라 다를 수 있으니 참고해 주세요. "s_article_rep_thumbnail" 다음 줄의 C230x300을 C200x200으로 변경 후 상단의 '적용하기'버튼을 눌러주세요.
2. CSS 편집
CSS편집창에서 Ctrl+F를 누르고 " .list-type-thumbnail .post-item .thum img"를 찾아 width를 126px에서 150px로, height를 auto에서 150px로 변경한 후 적용하기를 누릅니다.
HTML과 CSS 편집을 마무리 하면 아래와 같이 썸네일 모양이 정사각형 모양으로 바뀐 것을 확인할 수 있습니다.
관련글 썸네일 모양 변경
관련글의 썸네일 기본모양은 아래와 같이 좌우로 긴 직사각형 모양으로, 본인이 등록한 썸네일의 위아래가 잘려서 표시됩니다. 이 썸네일 모양을 정사각형 모양으로 바꿔보겠습니다.
1. HTML 편집
HTML편집창에서 Ctrl+F를 "s_article_related_rep_thumbnail"을 찾습니다. "s_article_related_rep_thumbnail" 다음 줄의 C176x120을 C150x150으로 변경 후 상단의 '적용하기'버튼을 눌러주세요.
HTML 코드를 수정 후 썸네일 이미지를 확인하면 글제목과 이미지가 겹쳐서 표현됩니다. 이를 수정하기 위해 CSS를 수정해 보겠습니다.
2. CSS 편집
CSS편집창에서 Ctrl+F를 누르고 "related-articles ul li figure"를 찾아 padding bottom을 100%로 변경한 후 적용하기를 누릅니다.
HTML과 CSS를 모두 변경하고 나면 아래와 같이 썸네일 이미지와 제목이 겹치지 않고 구분되어 표시됩니다.
오늘은 티스토리에서 가장 많이 사용되는 스킨인 북클럽 스킨의 썸네일 모양을 변경하는 방법에 대해 정리해 봤습니다. 썸네일 모양이 맘에 들지 않아 바꾸는 방법을 찾아보시는 분들에게 도움이 되었으면 좋겠습니다.
'경제 및 재테크 > 디지털 부업' 카테고리의 다른 글
| 티스토리 북클럽 스킨 제목 잘림 수정하는 방법 (10) | 2023.02.14 |
|---|---|
| 티스토리 트위터와 연동해서 방문자 늘리기 (32) | 2023.01.31 |
| 구글 애드센스 초기 설정 (티스토리 블로그) (25) | 2023.01.21 |
| 티스토리 블로그의 구글 애드센스 승인 후기 (17) | 2023.01.17 |
| 키워드 검색량 조회 : 블랙키위 사용법 (6) | 2023.01.13 |
댓글