티스토리 북클럽 스킨: 커버 아이템 타이틀 (소제목) 스타일 변경하는 방법

티스토리 북클럽 (Book Club) 스킨에서 스킨 편집 시 커버 아이템을 설정하고 각 커버 아이템의 타이틀을 지정할 수 있습니다. 커버 아이템 타이틀 (소제목)의 기본 스타일이 마음에 들지 않는 경우 CSS를 사용하여 커버 아이템 제목 스타일을 변경할 수 있습니다.

☞참고로 티스토리 소제목 스타일을 변경하고 싶은 경우 다음 글의 "티스토리 소제목 (헤딩) 스타일 변경" 부분을 참고해보세요.

티스토리에 목차 표시하는 방법 (북클럽 스킨)

티스토리 북클럽 스킨의 커버 아이템 타이틀 (소제목) 스타일 변경 방법

티스토리 북클럽 스킨에서는 홈 설정을 '커버'로 지정하여 홈페이지를 다양하게 구성할 수 있습니다.

각 커버 아이템의 타이틀을 지정할 수 있습니다.

그러면 다음 그림과 같이 타이틀이 표시됩니다.

저는 기본 제목 스타일이 단조로운 것 같아서 간단한 CSS 코드를 추가하여 스타일을 약간 변경했습니다.

커버 아이템 타이틀의 제목 스타일을 변경하려면 다음과 같은 CSS 코드를 사용할 수 있습니다.

/* 커버 소제목 스타일 */
.cover-thumbnail-2 h2, .cover-thumbnail-3 h2 {
    font-size: 1.1em;
    background-color: #333;
    color: white;
    padding: 10px;
}

글자색과 배경색, 폰트 크기, 안쪽 여백(Padding) 등은 원하는 대로 변경이 가능합니다.

티스토리에서 CSS 코드 추가하기

티스토리 블로그에서 CSS 코드를 추가하려면 티스토리에 로그인한 상태에서 꾸미기 > 스킨 편집 > html 편집 > CSS 탭을 차례로 클릭한 다음, 맨 아래에 코드를 추가하면 됩니다. 

부록

1. 티스토리 블로그의 본문 소제목 스타일 변경하기

티스토리에서 본문의 소제목 (머리말) 스타일을 변경하고 싶은 경우 CSS를 사용할 수 있습니다. 예를 들어, 북클럽 스킨의 경우 다음 코드를 사용할 수 있습니다.

/* 북클럽 스킨 소제목 스타일 */
/* H2 태그 */
.entry-content h2 {
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
COLOR: #666;
PADDING-BOTTOM: 10px;
TEXT-ALIGN: left;
BORDER-LEFT: #55555B 8px solid;
padding: 3px 9px;
margin: 30px 0 20px 0;
BACKGROUND-COLOR: #FFF;
BORDER-BOTTOM: 1px solid #000;
}

/* H3 태그 */
.entry-content h3 {
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
COLOR: #2E86B9;
PADDING-BOTTOM: 10px;
TEXT-ALIGN: left;
border-left: rgba(85, 85, 91, 0.5882352941176471) 8px solid;
padding: 3px 9px;
BACKGROUND-COLOR: #FFF;
border-bottom: 1px solid rgba(85, 85, 91, 0.5882352941176471);
margin-bottom: 15px;
}

/* H4 태그 */
.entry-content h4 {
padding: 3px 9px;
border-left: 5px solid #eeeeee;
border-bottom: 1px solid #eeeeee;
margin-bottom: 15px;
}

위의 코드를  꾸미기 > 스킨 편집 > html 편집 > CSS 탭에 추가하면 이 블로그의 소제목 스타일과 비슷하게 바뀔 것입니다. 스킨에 따라 코드가 조금씩 달라질 수 있습니다. 예를 들어, 이 블로그에 현재 사용 중인 고래 스킨에서는 위의 코드 스니펫에서 .entry-content를 .post-content로 대체하면 됩니다.

2. 목차 자동 생성하기

티스토리에는 목차를 자동 생성하는 플러그인이 없지만 인터넷에 공개된 TOC 스크립트를 사용하여 목차를 자동 생성할 수 있습니다. 목차는 헤딩 태그를 인식하여 자도 생성됩니다. 글을 작성할 때 소제목으로 구분하여 작성하면 가독성도 향상되고 SEO에도 유리합니다.

북클럽 스킨에서 목차를 자동 생성하는 방법은 다음 글을 참고해보세요. 다른 스킨에서도 비슷하게 응용이 가능합니다.

티스토리에 목차 표시하는 방법 (북클럽 스킨)

마치며

간단한 CSS를 사용하여 티스토리 북클럽 스킨의 커버 아이템 타이틀의 스타일을 변경하는 방법을 살펴보았습니다. 커버를 지원하는 다른 스킨에서도 코드가 동일한지는 모르겠습니다. 하지만 CSS를 조금 알면 쉽게 응용하여 적용할 수 있습니다. (사용하는 스킨에서 변경하는 데 어려움을 겪는 경우 댓글에 질문을 남겨주시면 확인해드리겠습니다.)

W3Schools의 CSS 레퍼런스 페이지(www.w3schools.com/cssref/)에서 왼쪽의 CSS 속성(예: background-color)을 클릭하면 자세한 사용법을 확인할 수 있습니다.

참고

티스토리 Book Club 스킨 수정: 본문 글자 크기 변경하는 방법

티스토리 블로그의 모든 글에 자동으로 목차 표시하는 방법

CSS로 텍스트의 절반 높이만 형광펜으로 표시하는 방법