티스토리 Book Club 북클럽 스킨 최적화 설정하기(썸네일, 최근글 등)

북클럽 스킨은 티스토리에서 무료로 제공하는 스킨으로 가독성이 좋고 아름다워서 많은 블로거들의 사랑을 받고 있다. 그러나 이름에서 보여주듯 도서 콘텐츠에 적합한 성격 때문에 나처럼 일반적인 블로거가 사용하기에는 몇몇 불편한 점도 있다. 이를테면 리스트 썸네일의 비율 같은 부분이 그렇다. 이미 많은 블로거들이 이런 문제를 개선하는 방법을 게시했지만 나도 나름대로 최적화한 방법이 있어서 기록해두려 한다.

1. 썸네일 비율

세로 썸네일은 출판사처럼 책을 소개하는 블로그 혹은 세로로 찍은 사진을 자주 올리는 블로그에 적합할 듯하다. 나는 썸네일을 PC나 모바일 양쪽 모두에서 가시성이 좋은 정사각형 비율로 변경하려고 한다. 그 전에 먼저 리스트 디자인부터 바꾸어 주자.

1) 리스트 설정: 뉴북

북클럽 스킨은 기본 리스트가 왼쪽 같은 타입으로 설정되어 있는데 나는 오른쪽 레이아웃을 쓰고 싶어서 리스트 설정을 바꿔보았다.

블로그관리 홈에서 꾸미기>스킨편집을 클릭하면  오른쪽 섹션 중간쯤에서 리스트 설정을 바꿀 수 있다. 기본 설정인 북리뷰에서 '뉴북'으로 바꿔준다.

2) 리스트 썸네일 변경

① 리스트 썸네일의 설정을 변경하기 위해 위 화면에서 html편집>css를 클릭한다. ctrl+f를 누르고 .list-type-thumbnail로 검색하면 아래 이미지와 같이 2260번째 라인쯤에 해당 코드가 있다.

② 왼쪽 이미지와 같은 코드를 오른쪽처럼 바꿔주면 된다. 즉, width: 126px을 width: 150px으로 바꾼다.

③ 그다음 html탭을 클릭해서 crtl+f, C230x300을 검색한다.

④ C230x300을 C200x200으로 바꾼다. 그러면 PC와 모바일 양쪽 모두에서 썸네일이 정사각형 비율로 나타나며, 원본 이미지 비율이 썸네일 비율과 다르다고 해서 임의로 확대, 축소하지 않고 있는 그대로 표시된다.

2. 최근글, 인기글 분리

북클럽 스킨의 최근글, 인기글은 원래 왼쪽 이미지와 같은 레이아웃이다. 이 형태를 가능한 한 유지하면서 오른쪽처럼 최근글, 인기글을 따로 분리해보기로 한다. 

1) 최근글, 인기글 글자 수 늘리기

먼저 글자 수부터 늘린다. 블로그관리 홈>꾸미기>사이드바에서 최근 글을 몇 개 표시할지, 몇 글자까지 표시할지 설정할 수 있다.

50~60글자 정도 설정하면 왼쪽의 기본 설정에서 오른쪽 이미지처럼 글자 수가 늘어나는 것을 볼 수 있다.

2) 최근글, 인기글 분리하기

다음으로 블로그관리 홈에서 꾸미기>스킨편집>html편집을 클릭하고 ctrl+f, 인기글을 검색한다.

그럼 위와 같은 코드가 나오는데 아래처럼 바꿔준다.

<s_sidebar_element>
<!-- 최근글/인기글 -->
<!--div class="post-list tab-ui"-->							
	<div id="recent" class="post-list tab-ui">
		<h2>최근글</h2>
		<ul>
			<s_rctps_rep>
				<li>
				<a href="">
				<s_rctps_rep_thumbnail>
				<img src="//i1.daumcdn.net/thumb/C58x58/?fname=" alt="" />
				</s_rctps_rep_thumbnail>
				<span class="title"></span>
				<span class="date"></span>
				</a>
				</li>
			</s_rctps_rep>
		</ul>
		</div>
		<div id="popular" class="post-list tab-ui">
		<h2>인기글</h2>
			<ul>
				<s_rctps_popular_rep>
				<li>
				<a href="">
				<s_rctps_rep_thumbnail>
				<img src="//i1.daumcdn.net/thumb/C58x58/?fname=" alt="" />
				</s_rctps_rep_thumbnail>
				<span class="title"></span>
				<span class="date"></span>
				</a>
				</li>
				</s_rctps_popular_rep>
		</ul>
	</div>											
<!--/div-->
</s_sidebar_element>

상위 div를 주석 처리하고(삭제해도 무관하겠지만 만약을 위해) 최근글, 인기글 div에 각각 post-list tab-ui라는 class를 부여해주었다.

※ 직접 수정하기 번거로우면 아래 첨부파일을 받아서 HTML 코드를 바꿔주면 된다.

최근글인기글분리.txt

0.00MB

3. 리스트 제목 숨기기

북클럽 스킨 사용 시에 메인이나 카테고리 목록에서 위와 같이 리스트 제목('전체 글', 혹은 카테고리 이름)이 표시되는 것을 볼 수 있는데, 스킨 내에서 이를 숨기는 방법을 제공하고 있다.

위와 같이 홈설정>목록 구성요소 '내용만', 기본설정>목록 구성요소 '내용만'으로 설정하면 리스트 제목이나 글 개수가 숨겨진다.

4. 제목 디자인 바꾸기

.entry-content h3 {
	clear: both;
	margin: 59px 0 22px;
	font-size: 1.3125em;
	line-height: 1.5;
	color: #000;
	border-style: solid;
	border-width : 0px 0px 1px 15px;
	border-color: #BF0A30; 
	padding: 7px;
}
.entry-content h4 {
	clear: both;
	margin: 39px 0 22px;
	font-weight: 400;
	font-size: 1.125em;
	line-height: 1.5;
	color: #000;
}

북클럽 스킨의 제목2, 3은 h3, h4이다. 블로그관리 홈>꾸미기>스킨 편집>html편집>CSS에서 .entry-content h3을 검색해서 원하는 디자인으로 꾸미면 되겠다. 아래 이미지는 위와 같이 꾸몄을 때의 결과물이다.

---

잘 꾸며진 블로그 스킨이나 서식은 양질의 콘텐츠를 더 돋보이게 해주는 중요한 역할을 한다고 생각한다. 블로그에 더 많은 시간을 쏟고 싶지만, 마음과 달리 현실에 쫓겨서 손을 놓고 있은 지 어언 몇 주. 이 글을 쓰면서 다시 블로그에 대한 열정이 살아나는 느낌이 들었다. 바쁜 일이 거의 다 끝났으니까 슬슬 시동을 걸어봐야겠다.