안녕하세요. 이번 시간에는 티스토리 블로그 북클럽(Book Club) 스킨에서 리스트 타입이 '뉴북'인 경우 썸네일을 정사각형으로 설정하는 방법에 대해서 알아보도록 하겠습니다.
HTML 편집 메뉴 접근
블로그 관리 페이지에서 [꾸미기] > [스킨 편집] 메뉴에 접근합니다. 스킨 편집 메뉴에 접근하면 리스트 타입이 '뉴북'으로 설정되어 있는지 확인합니다. 리스트 타입을 확인한 후 상단의 [html 편집] 버튼을 클릭합니다. 해당 글에서는 티스토리 블로그 스킨이 '북클럽(Book Club)'이고 이 리스트 타입이 '뉴북'인 경우에 썸네일을 정사각형으로 변경하는 방법에 대해서 다룹니다. 만약, 다른 스킨과 리스트 타입을 사용하시는 경우에는 이와 비슷한 방법으로 변경이 가능하지만, 완전히 동일하지는 않을 수 있으므로 참고용으로만 활용하시기 바랍니다.
메인 화면 썸네일 수정
HTML 소스코드 수정 및 적용
HTML 소스코드에서 's_article_rep_thumbnail' 태그를 검색합니다. [Ctrl] + [F] 단축키를 입력하고 's_article_rep_thumbnail'을 검색하면 쉽게 찾을 수 있습니다. 's_article_rep_thumbnail' 태그 내에 존재하는 img 태그에서 'C230x300' 부분을 아래 소스코드와 같이 'C300x300'으로 수정합니다. 소스코드 수정이 완료되면 상단의 [적용] 버튼을 클릭합니다.
<img src="//i1.daumcdn.net/thumb/C300x300/?fname=https://blog.kakaocdn.net/dn/IaaxR/btroeBiORGj/IJ5kBHDStOXA3Bkhf6nIGk/img.png" alt="">
위 내용을 적용하면 게시글 목록에서 썸네일이 정사각형으로 출력되는 것을 확인할 수 있습니다. 소스코드 수정 전후를 비교하면 아래 그림과 같습니다. 소스코드를 수정하기 전에는 직사각형 모양이던 썸네일이 소스코드 수정 후 정사각형 모양으로 변경되어 보다 게시글 목록이 깔끔해진 느낌을 줍니다.
관련글 썸네일 수정
HTML 소스코드 수정 및 적용
이번에는 관련글 썸네일을 수정해보도록 하겠습니다. HTML 소스코드에서 's_article_related_rep_thumbnail' 태그를 검색합니다. 위와 동일한 방식으로 [Ctrl] + [F] 단축키를 입력하고 's_article_related_rep_thumbnail'을 검색하면 쉽게 찾을 수 있습니다. 's_article_related_rep_thumbnail' 태그 내에 존재하는 img 태그에서 'C176x120' 부분을 아래 소스코드와 같이 'C150x150'으로 수정합니다. 소스코드 수정이 완료되면 상단의 [적용] 버튼을 클릭합니다.
<img src="//i1.daumcdn.net/thumb/C150x150/?fname=" alt="" />
CSS 소스코드 수정 및 적용
HTML 소스코드만 수정된 상태에서는 썸네일 이미지와 게시글 제목이 겹쳐보이게 됩니다. 이를 해결하기 위해서 관련글 썸네일은 추가적으로 CSS 수정이 필요합니다. CSS 탭에 접근한 다음 'related-articles ul li figure' 문자열을 검색합니다. 검색된 부분에서 heigtht를 '0'에서 '3.5rem'으로 수정합니다. 소스코드 수정이 완료되면 상단의 [적용] 버튼을 클릭합니다.
CSS 소스코드를 수정하면 게시글 하단의 관련글 썸네일이 정사각형으로 출력되고 게시글 제목과도 겹쳐지지 않게 됩니다. 소스코드 수정 단계 별 관련글 썸네일 모양을 비교하면 아래 그림과 같습니다.
이번 시간에는 티스토리 블로그 북클럽(Book Club) 스킨에서 뉴북 리스트 타입을 사용하는 경우 썸네일을 정사각형으로 설정하는 방법에 대해서 알아보았습니다. 처음 블로그를 시작하며 썸네일 모양이 마음에 들지 않아 고민하시는 분들에게 도움이 되었으면 좋겠습니다. 오늘도 긴 글 읽어주셔서 감사합니다.
'티스토리 블로그' 카테고리의 다른 글
| 구글 애드센스 외국어 광고 차단하기 (0) | 2022.02.01 |
|---|---|
| 티스토리 블로그 서식으로 애드센스 수동 광고 편하게 넣기 (0) | 2022.01.01 |
| 북클럽(Book Club) 스킨 제목 전부 보이게 설정하기 (0) | 2021.12.26 |
| 구글 애드센스 핀번호(PIN) 등록하기 (0) | 2021.12.23 |
| 구글 애드센스 수익금 지급 수수료가 저렴한 은행 찾아보기 (0) | 2021.12.23 |
| 구글 애드센스 판매자 정보 Google sellers.json 파일 게시 해결 방법 (0) | 2021.12.19 |
| 다음 최적화 및 블로그 저품질 여부 확인 방법 (0) | 2021.12.18 |
| 티스토리 블로그 모바일 화면 확대, 축소 설정하기 (모바일 화면 크기 고정 해제하기, 모바일 화면 확대/축소 기능 활성화 하기) (0) | 2021.12.12 |
댓글