요약
티스토리 북클럽 스킨에서 글 아래에 있는 "관련 글" 리스트의 썸네일 크기를 직사각형에서 정사각형으로 수정했다. 제목이 썸네일에 겹치는 문제도 해결했다.
관련 글 리스트 (수정 전)
티스토리 북클럽 스킨에서 글의 마지막 부분 아래에는 태그, 관련 글, 댓글의 순서로 표시된다. 이 중에서 "관련 글" 부분에서는 아래 그림에서 보는 바와 같이, 관련 글 (썸네일과 간략한 제목) 이 표시된다.
내 생각에 티스토리 북클럽 스킨을 만든 사람은 정사각형을 싫어하거나 직사각형을 좋아하는 듯 하다. 직사각형의 썸네일을 정사각형으로 수정하는 일은 이번이 3번째인데, 마지막이 되었으면 한다.
썸네일 수정 (직사각형 > 정사각형)
스킨편집 > html 편집 으로 들어간 다음, HTML 탭에서 ctrl + F 누르고 "related_rep_thumbnail" 를 찾는다. 그 아래 줄에 있는 <img src="//i1.daumcdn.net/thumb/C176x120/?fname=" alt=""> 에서 C176x120 를 C176x176 으로 변경한다. HTML 편집 이후 관련 글 리스트는 아래와 같다.
썸네일 이미지는 정사각형으로 바뀌었지만, 관련 글의 제목이 썸네일 이미지에 겹치는 (overlap) 문제가 발생했다.
관련 글 제목 위치 조정
관련 글의 제목이 썸네일 이미지에 겹치는 문제를 해결하기 위해, 스킨편집 > html 편집 으로 들어간 다음, CSS 탭에서 ctrl + F 를 누르고 "related-articles ul li figure" 를 찾는다 (아래 그림 참조).
줄 번호 1390에 있는 height 옵션을 0 에서 100% 또는 fit-content 로 변경하고, 줄 번호 1392에 있는 padding-bottom 옵션을 68.x % 에서 0px 로 변경했다. CSS 편집 이후 관련 글 리스트는 아래와 같다.
