[티스토리 블로그] 썸네일 다루기 심화편 ③ 커버 썸네일 수정

[티스토리 블로그] 썸네일 다루기 심화편 ③ 커버 썸네일 수정

 

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

 

---

심화편 ①에서는 각 설정별 구조를 살펴보았고, ②에서는 기본 목록의 썸네일 이미지를 조정하는 법을 살펴보았습니다.

이번에는 관리>스킨편집>홈설정이 커버일 때 커버 아이템별로 썸네일 이미지를 조정하는 방법을 살펴보겠습니다.
심화편 ①에서 찾은 커버 아이템별 HTML 구조는 다음과 같습니다.

	섬네일리스트	뉴스레터	커버갤러리1	커버갤러리2
첫 화면	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 class="cover-thumbnail-n"></div> 구조로 묶인 구문을 찾아서 조정할 수 있습니다.

 

관리 > 스킨편집

 

관리>스킨편집으로 진입했을 때의 화면입니다.
홈설정 우측의 최신글/커버 탭 중 커버를 선택하고 바로 아래의 수정 버튼을 누르면 커버 아이템을 바꿀 수 있습니다.

 

커버 아이템 수정

원하는 커버 아이템을 선택하고 우측 상단의 저장을 누르면 윗쪽의 스킨편집 화면으로 되돌아갑니다.
이때 주의할 점은, 스킨 편집 화면에서도 적용을 눌러주셔야 바뀐 커버아이템이 내 블로그에 적용이 됩니다.

 

섬네일리스트 / 뉴스레터

 

커버갤러리1 / 커버갤러리2

 

 

썸네일 사이즈 조정하기

뉴스레터 커버의 예

Book Club 스킨에서 커버 아이템 썸네일은 스킨의 HTML 옵션만으로 간단하게 조정이 가능합니다.

HTML 편집창 아무곳에나 마우스를 갖다 대고 한 번 클릭하여 커서를 편집창 내부에 옮겨둔 상태에서 Ctrl+F를 눌러 cover-thumbnail을 찾으면 쉽게 해당 부분을 찾을 수 있습니다. 거기서 저렇게 썸네일 이미지 링크를 거는 부분 중 사이즈 옵션 부분을 찾아서 바꿔주면 됩니다.