[티스토리 블로그] 썸네일 다루기 심화편 ①

 

[티스토리 블로그] 썸네일 다루기 심화편 ①

 

티스토리는 군데군데 치환자도 많고, 공식 문서가 상세하지 않아서 자세히 파헤쳐 볼 필요가 있는 것 같습니다.

여기서 다루는 내용은 Book Club 스킨에 한정합니다.
스킨마다 구조가 다르기 때문에 반드시 확인하셔야 합니다.

가장 많이들 쓰시는 스킨이기도 하고, 저 역시 사용하고 있기 때문이죠.
기본에 가장 충실하면서 필요한 기능은 모두 갖추고 있기 때문이기도 합니다.

 

스킨 내에서 섬네일 구조 파악

최신글 - 목록+내용

 

HTML 구조를 파악하면 쉽게 필요한 부분을 찾을 수 있습니다.
저는 참고로 크롬 브라우저를 사용합니다.
해당하는 위치의 썸네일 이미지에 마우스를 대고 오른쪽 버튼을 클릭하여 '검사'를 눌러 파악할 수 있습니다.

 

커버 - 뉴스레터

 

같은 방법으로 썸네일이 들어가는 곳의 HTML 구조를 모두 파악해보도록 하겠습니다.
스킨 편집에서 최신글/커버 유뮤, 커버를 선택한 경우 커버 아이템 형태에 따라 달라집니다.

 

홈설정에서 최신글/커버를 선택할 수 있습니다.

수정 버튼을 눌러서 커버 아이템 종류와 세부적인 설정을 바꿀 수도 있습니다.

 

커버아이템 선택이 가능합니다.

Book Club 스킨은 기본으로 제공하는 커버 아이템이 많습니다.

 

 

 

각 설정별 썸네일 표시 HTML 구조 목록

커버 아이템 중에 썸네일 없이 본문 내용만 나오는 기본 리스트, 배너 형태로만 나오는 이벤트 배너 두 가지는 여기서는 제외하겠습니다.

	최신글	커버
	목록+내용	섬네일리스트	뉴스레터	커버갤러리1	커버갤러리2
첫 화면	div.post-item>a>span.thum>img	div.cover-thumbnail-1>ul>li>a>figure>img	div.cover-thumbnail-2>ul>li>a>figure>img	div.cover-thumbnail-3>ul>li>a>figure>img	div.cover-thumbnail-4>ul>li>a>figure>img
글 목록	div.post-item>a>span.thum>img
최근글/인기글	div#recent>ul>li>a>img
관련글	div.related-articles>ul>li>a>figure>img

 

 

구조 파악이 모두 끝났으니 다음 포스트에서는 본격적인 수정법을 살펴보겠습니다.