티스토리 북클럽 스킨 I 커버 소제목 스타일 변경하는 방법

목차

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

 

참고로 티스토리 소제목 스타일을 변경하고 싶은 경우 다음 글의 "티스토리 소제목 꾸미기"를 참고하세요.

 

티스토리 북클럽 스킨의 커버 소제목 스타일 변경 방법

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

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

 

---

 

북클럽의 커버를 선택하면 아래 그림과 같이 타이틀이 표시됩니다.

 

기본 제목 스타일이 너무 단조로운 것 같다면 간단한 CSS 코드를 추가하여 스타일을 변경할 수 있습니다.

 

728x90

 

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

CSS 코드는 '관리자 홈'에서 '꾸미기 > 스킨 편집 > html 편집 > CSS' 탭을 차례로 클릭 후

---

 

아래의 CSS코드를 '맨 아래에' 붙여넣기만 하면 됩니다.

 

코드 변경 전용 후 새로고침을 하면 변경된 블로그를 확인할 수 있습니다.

 

수정전

---

수정후

 

코드 1

CSS 코드 복사하기 🔻

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

 

CSS 코드 다운로드 🔻

커버소제목1.txt

0.00MB

 

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

아래는 변경된 코드로 제 블로그에 적용된 그러데이션 스타일입니다.

 

코드 2 (그라데이션 스타일)

CSS 코드 복사하기 🔻

/* 커버 소제목 스타일 */
.cover-thumbnail-1 h2, .cover-thumbnail-2 h2, .cover-thumbnail-3 h2 {
font-size: 1.1em;
font-weight: bold;
background: linear-gradient(to right,#18408a,#800080);
color: #ffff;
padding: 10px; }

 

CSS 코드 다운로드 🔻

커버소제목2.txt

0.00MB

 

 

카테고리 소제목 스타일 변경하기

위에서 간단한 CSS를 사용하여 티스토리 북클럽 스킨의 커버 아이템 타이틀의 스타일을 변경하는 방법을 살펴보았습니다. 다만 위의 방법은 커버에만 적용되며 카테고리의 소제목은 따로 CSS코드를 수정해줘야 합니다.

 

카데고리 목록 소제목 스타일은 아래 링크를 참조하세요.

 

티스토리 I 카테고리 목록 소제목 스타일 변경하기 (tistory.com)

티스토리 I 카테고리 목록 소제목 스타일 변경하기

티스토리 소제목 서식(HTML) 스타일 모음

티스토리 소제목 서식(HTML) 스타일 모음

 

마치며

간단한 CSS를 사용하여 티스토리 북클럽 스킨의 커버 아이템 타이틀의 스타일을 변경하는 방법을 살펴보았습니다.

이외에도 CSS의 코드를 조금씩 변경하면 좀 더 멋진 나만의 블로그를 만들 수 있습니다.

 

다만 CSS의 코드 수정 시 /* 스타일 코드 삽입 */을 꼭 넣어주어 수정한 부분을 표시해 주시기 바랍니다.

 

"쿠팡 파트너스 활동을 통해 일정액의 수수료를 제공받을 수 있습니다"