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

2020. 5. 9. 17:12 | 댓글 7

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

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

 

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

티스토리에는 모든 글에 자동으로 목차를 표시하는 방법은 없지만, 원하는 글에 자동으로 목차를 삽입할 수 있습니다. 헤딩 태그를 인식하여 자동으로 목차를 생성하는 jQuery를 사용할 수 있습��

avada.tistory.com

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

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

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

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

저는 기본 제목 스타일이 단조로운 것 같아서 간단한 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에도 유리합니다.

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

 

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

티스토리에는 모든 글에 자동으로 목차를 표시하는 방법은 없지만, 원하는 글에 자동으로 목차를 삽입할 수 있습니다. 헤딩 태그를 인식하여 자동으로 목차를 생성하는 jQuery를 사용할 수 있습��

avada.tistory.com

마치며

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

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

참고

 

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

이 블로그에는 현재 최근 공개된 Book Club (북 클럽)이라는 스킨이 적용되어 있습니다. 북 클럽 스킨에서는 본문 글자 크기가 0.9375em으로 설정되어 글자가 다소 작게 느껴질 수 있습니다. 저는 스��

avada.tistory.com

 

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

티스토리 블로그에 목차를 표시하려는 경우 목차 스크립트 파일을 이용하여 목차를 추가할 수 있습니다. 보통의 경우 목차를 표시할 자리에 수동으로 HTML 코드를 추가해야 하는데, 그러면 번거�

avada.tistory.com

 

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

요즘 블로그를 구경하다 보면 텍스트에 형광펜 효과를 주는 경우를 종종 봅니다. 보통은 텍스트의 전체 높이에 형광펜 효과를 주는 배경색을 이용하거나, 밑줄 형태로 형광펜 효과를 주는 경우가 사용될 것입니다...

avada.tistory.com

 

  • 네이버 블러그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 카카오스토리 공유하기

댓글을 달아 주세요

">
  1. thumbnail
    [찌쏘]'s Magazine

    좋은 내용 항상 감사합니다. 스킨변경의 꿀팁들이네요 ㅎㅎ

  2. thumbnail
    연구랩★

    도움되는 정보글들이 많네요 '티스토리에서 CSS 코드 추가하기'나 '참고' 같은 글자 모양은 어떻게 만드는건가요?

  3. thumbnail
    미녀_Cathie

    좋은정보감사드려요!!