북클럽 스킨 커버 아이템 활용과 썸네일 정사각형 변환

 

 

티스토리로 블로그를 시작하는 많은 이들이 북클럽(Book Club) 스킨을 가장 많이 선호합니다. 그 이유는 아무래도 무료로 주어지는 직관적이고 깔끔한 레이아웃을 사용할 수 있다는 점과 사이드바 활용 등에 최적화된 스킨이기 때문입니다. 오늘은 북클럽 스킨 커버를 활용한 홈 설정에 대해 알아보겠습니다.

 

 

북클럽 스킨 커버 아이템

기본적으로 북클럽 스킨 편집으로 들어가면 ‘최신글’과 ‘커버’ 아이템 두 가지 홈 설정을 정할 수 있습니다. 특히 기본설정인 ‘최신글’ 과는 다르게 ‘커버’ 형식을 활용한다면 별도의 편집 없이도 간단하게 본인의 개성을 살린 특별한 블로그로 완성할 수 있습니다.

 

 

 

커버 아이템에는 기본리스트, 섬네일리스트, 뉴스레터, 커버 갤러리 1,2, 이벤트배너로 총 6가지 종류가 있고 각 기능을 홈화면 원하는 곳에 배치가 쉽게 가능합니다.

 

 

 

편집하는 방법은 블로그관리홈 꾸미기 스킨편집 커버 순서로 들어가서 ‘커버 아이템 추가’ 버튼을 이용해 원하는 종류의 콘텐츠 순서를 정합니다. 이때 카테고리별 글이라든지 개별 글 선택이라든지 굉장히 다양한 조합을 시도해 볼 수 있습니다.

 

하지만 여기에서 한 가지 문제점이 있는데, 북클럽의 기본값 썸네일은 정사각형이 아니라 기존의 사진들이 잘려 보여줍니다. 그러기 때문에 간단한 HTML과 CSS 편집으로 통해 깔끔한 화면을 완성시킬 수 있습니다.

 

 

썸네일 정사각형으로 변환

커버아이템 뉴스레터의 직사각형 썸네일을 정사각형으로 바꿔주기 위해선 다음의 두 가지 세팅을 해주어야 합니다.

 

 

 

1. HTML에 들어가서 thumbnail-2 검색 후, 대략 248번 줄에 있는 C126 x C166을 C166 x C166으로 변경해 줍니다.

 

 

 

2. CSS로 들어가서 cover-thumbnail-2 ul li figure 검색 후, 대략 655줄에 있는 width: 128px; margin-left: 57px;를 width: 200px; margin-left: 30px; 으로 바꿔줍니다.

 

마찬가지로, 커버 갤러리 1을 정사각형으로 변환하고 싶으면 thumbnail-3 검색을 해서, 커버 갤러리 2는 thumbnail-4로 검색해서 동일하게 바꿔주면 됩니다. 

 

 

추가적으로 thumbnail-4는 글과 그림이 겹치지 않게 해 주기 위해선 CSS로 들어가 thumbnail-4 검색 후 대략 837번 줄에 있는 paddington-bottom 60.xx을 100.xx로 변경해 주고 적용을 누르고 나면 모든 편집이 완성됩니다.

 

마지막으로 완성된 '커버 갤러리 1'은 PC에서 5개까지 보이지만 모바일에서는 2개만 노출이 됩니다. 마찬가지로 '커버 갤러리 2'는 PC에서 3개 그리고 모바일에서 1개 화면만 보입니다. 

 

---

 

이상 티스토리 북클럽 스킨 커버 아이템을 활용한 블로그 편집과 썸네일 크기를 조절하는 방법에 대해 알아보았습니다. 이 기능을 적극활용하면 한층 더 심플하고 깔끔한 모습의 블로그를 디자인하실 수 있을 것입니다.

 

 

 

스크롤바 하나로 나도 전문 블로거!