티스토리 북클럽 스킨 | 사이드바 카테고리 밑줄 넣기 및 마우스 오버 색상 변경

 

사이드바의 카테고리 디자인 꾸미기 (CSS 가이드)

✚

티스토리 북클럽(Book Club) 스킨은 깔끔하고 심플하지만, 기본 설정 상태의 사이드바는 폰트가 너무 작거나 디자인이 다소 밋밋하게 느껴지기도 합니다.

이번 포스팅에서는 CSS 코드를 간단하게 수정하여 사이드바 카테고리의 폰트를 키우고, 마우스 오버 효과를 넣고, 테두리 박스 및 최근글/인기글 영역까지 예쁘게 정돈하는 다양한 꾸미기 팁을 소개해 드립니다!

📌 알림 

웹서핑을 하다 보면, 제가 만든 코드나 태그 속성, 심지어 오탈자까지 그대로 가져가 본인 글처럼 사용하는 경우가 있습니다. 코드 자체의 복사는 막을 수 없지만, 제 자료를 활용해 관련 포스팅을 작성하실 때는 반드시 출처를 명시해 주시기 바랍니다.

그 외 개인적인 사용은 자유롭게 하시면 됩니다.

 [📌 코드 수정 시 주의사항은 아래 '더 보기'를 참고하세요.]

1. 스킨 저장.

스킨을 변경하기 전에 가장 먼저 해야 할 일은 현재 사용 중인 스킨을 백업하는 것입니다. 스킨 변경 후 문제가 발생하면 변경 전 스킨으로 돌아가야 하기 때문에 백업이 필요합니다.

스킨을 백업하려면, 블로그 관리자 > 꾸미기 > 스킨 변경을 클릭합니다. 상단에 사용 중인 스킨을 확인할 수 있으며, [보관]을 클릭하면 됩니다.

2. [Ctrl] + [F]를 사용할 때.

먼저 코드 탭의 빈 곳을 클릭한 후 [Ctrl] + [F]를 사용하여 검색할 코드를 입력해야 합니다.

728x90

---

카테고리 꾸미기 미리보기

☑

---

1. '카테고리' 폰트 크기 키우기

☑

기본 카테고리 글씨는 다소 작고 얇아 답답해 보일 수 있습니다. 폰트 크기와 두께를 조절해 눈에 확 띄게 만들어 줍니다.

카테고리 폰트 수정 전   ▶   카테고리 폰트 수정 후

---

 

1. '블로그 관리자 홈'에서 [꾸미기] > [스킨 편집] > [html 편집] > [CSS] 탭으로 들어갑니다.

---

 

2. 코드 창을 클릭하고 [Ctrl] + [F]를 눌러 아래 코드를 검색합니다.

.sidebar .category ul li {

---

 

3. 검색된 코드 영역을 아래의 복사한 코드로 덮어쓰기(수정) 후, [적용]을 눌러 저장해 줍니다.

.sidebar .category ul li {
  padding: 0;
  font-size: 1em; /* 0.875em */
  font-weight: 600;
}

폰트 크기를 0.875em에서 1em으로 변경

---

---

2. 마우스 오버 효과 & 하위 카테고리 구분선 추가

☑

카테고리 목록의 링크 색상, 밑줄, 폰트 크기 수정은 CSS 탭에서 .sidebar .category ul li a:hover { 코드와 .sidebar .category ul li ul li { 코드를 각각 찾아 수정해 주면 됩니다.

카테고리에 마우스를 올렸을 때(Hover) 밑줄 없이 깔끔하게 색상만 변경되는 효과와, 하위 카테고리 간 구분을 돕는 점선을 추가해 보겠습니다.

목록 라인 및 폰트 크기  수정 전   ▶   목록 라인 및 폰트 크기 수정 후

---

① 마우스 호버 효과 (밑줄 제거 및 색상 변경)

1. CSS 탭에서 [Ctrl] + [F]를 이용해 .sidebar .category ul li a:hover { 를 검색합니다.

.sidebar .category ul li a:hover {

---

 

2. 검색된 기존 코드를 아래 코드로 변경하여 덮어쓴 후 [적용]을 눌러 '저장'합니다.

.sidebar .category ul li a:hover {
	text-decoration: none; /*링크 밑줄 제거 추가 */
	color: #fe5183 /* 링크 색상 변경 */
}

---

② 하위 카테고리 목록 상단 점선 및 폰트 크기 조절

1. CSS 탭에서 [Ctrl] + [F]를 이용해 .sidebar .category ul li ul li { 를 검색합니다.

.sidebar .category ul li ul li {

---

 

2. 검색된 기존 코드를 아래 코드로 변경하여 덮어쓴 후 [적용]을 눌러 '저장'합니다.

.sidebar .category ul li ul li {
  padding: 6px 0 7px;
  font-weight: 400;
  font-size: 0.95em; /* 1em 카테고리 목록*/
  border-top:1px dotted #ddd; /* 카테고리 밑줄 추가 */  
}

카테고리 목록 상단에 점선의 라인 넣기 및 폰트 조정 (1em > 0.95em)

---

---

3. 카테고리 박스 테두리/라인 영역 디자인 (선택 적용)

☑

보통 카테고리 목록의 링크 색상 및 밑줄과 폰트 크기 수정 후 마무리 해도 되지만 조금 더 깔끔한 구분을 위해 '카테고리 박스'의 상, 하단에 라인을 넣어줍니다.

카테고리 목록의 상, 하단 구분선은 CSS탭에서 .sidebar .category {의 코드를 수정하면 됩니다.

① 깔끔한 상하 라인 스타일 (상단 실선 + 하단 점선)

단정하고 정돈된 구분선을 원할 때 추천하는 기본 스타일입니다.

카테고리 박스 상, 하단에 라인을 넣기 전   ▶   카테고리 박스 상, 하단에 라인을 넣은 후

---

 

1. CSS  탭에서 [Ctrl] + [F]를 이용해 .sidebar .category {를 검색합니다.

.sidebar .category {

---

 

2. 검색된 기존 코드를 아래 코드로 변경하여 덮어쓴 후  [적용]을 눌러 '저장'합니다.

/* 카테고리 목록 박스 */
.sidebar .category {
  margin-bottom: 36px;
  padding: 5px 0px 0px 0px; /* 내부 여백 상, 좌 하, 우 */
  border-top: #ddd 1px solid; /* 상단 실선 추가 */
  border-bottom: #ddd 1px dotted; /* 하단 점선 추가 */
}

---

---

② 모서리가 둥근 테두리 상자 스타일

카테고리를 사이드바에서 하나의 단독 카드로 돋보이게 만들고 싶을 때 추천합니다.

카테고리 박스에 테두리를 넣기 전 ▶ 카테고리 박스에 테두리를 넣은 후

---

 

1. CSS  탭에서 [Ctrl] + [F]를 이용해 .sidebar .category {를 검색합니다.

.sidebar .category {

---

 

2. 검색된 기존 코드를 아래 코드로 변경하여 덮어쓴 후  [적용]을 눌러 '저장'합니다.

/* 카테고리 목록 박스 */
.sidebar .category {
  margin-bottom: 36px;
  padding: 10px 10px 5px 10px; /* 내부 여백 상, 좌 하, 우 */
  border: 4px solid #bbb; /* 전체 테두리*/
  border-radius: 10px; /* 모서리 라운드 */
}

테두리의 두께는 원하는 두께로 조절하세요.

---

---

4. '최근글, 인기글' 타이틀 폰트 및 디자인 수정

☑

카테고리 폰트를 키우고 나면 상대적으로 '최근글'이나 '인기글' 타이틀 폰트가 작아 보여 부조화스럽습니다. 카테고리와 조화를 이루도록 타이틀 스타일을 일치시켜 줍니다.

ⓙ '최근글, 인기글' 타이틀 폰트 수정

최근글과 인기글 폰트 수정 전  ▶  최근글과 인기글 폰트 수정 후

---

 

최근글과 인기글의 폰트 크기 변경도 CSS 탭에서 아래처럼 .sidebar h2 {의 코드를 수정하면 됩니다.

1. CSS  탭에서 [Ctrl] + [F]를 이용해 .sidebar h2 {를 검색합니다.

.sidebar h2 {

---

 

2. 검색된 기존 코드를 아래 코드로 변경하여 덮어쓴 후  [적용]을 눌러 '저장'합니다.

.sidebar h2 {
  margin-bottom: 7px;
  font-weight: 500;
  font-size: 1em; /* 0.875em */
  color: #555;
}

---

---

'최근글, 인기글' 타이틀에 상, 하단 밑줄 만들기

최근글과 인기글의 타이틀 상하단에 밑줄을 추가하여 카테고리 메뉴와 통일감을 주면서 확실히 구분되도록 변경하겠습니다.

최근글과 인기글 밑줄 수정 전 ▶ 최근글과 인기글 밑줄 수정 후

---

 

최근글과 인기글의 밑줄 추가도 CSS 탭에서 아래처럼 .sidebar h2 {의 코드를 수정하면 됩니다.

1. CSS  탭에서 [Ctrl] + [F]를 이용해 .sidebar h2 {를 검색합니다.

.sidebar h2 {

---

 

2. 검색된 기존 코드를 아래 코드로 변경하여 덮어쓴 후  [적용]을 눌러 '저장'합니다.

.sidebar h2 {
  margin-bottom: 7px;
  font-weight: 600;
  font-size: 1em; /*0.875em*/
  color: #555;
  /*코드추가*/
  padding: 9px 0 9px; /* 타이틀 상하 여백 */
  border-top: 2px solid #bbb; /* 상단 밑줄 */		
  border-bottom: 1px dotted #bbb; /* 하단 점선 */
}

 

---

5. 전체 방문자(카운터) 영역의 애매한 여백과 선 지우기

☑

북클럽 스킨에 '전체 방문자수(카운터)'를 사이드바에 추가하면, 타이틀 위에 뜬금없이 짧은 밑줄과 애매한 공백이 생겨 레이아웃의 통일감을 해칩니다. 이 불필요한 가로선을 숨겨서 레이아웃을 정돈합니다.

여백 삭제 전 ▶ 여백 삭제 후

---

 

여백과 짧은 밑줄 삭제는 CSS탭에서 아래처럼 .sidebar .count h2:before { 코드를 주석 /* ... */으로 묶어 비활성화합니다

1. CSS  탭에서 [Ctrl] + [F]를 이용해 .sidebar .count h2:before { 를 검색합니다.

.sidebar .count h2:before {

 

2. 검색된 기존 코드를 아래 코드로 변경하여 덮어쓴 후  [적용]을 눌러 '저장'합니다.

/*
.sidebar .count h2:before {
  content: "";
  display: block;
  width: 17px;
  height: 1px;
  margin-bottom: 18px;
  background-color: #555;
}
*/

---

728x90

---

마치며

☑

지금까지 티스토리 북클럽 스킨의 사이드바와 카테고리를 CSS 코드로 알맞게 꾸미는 방법들을 알아보았습니다.

북클럽 스킨은 기본기가 탄탄하고 깔끔하여 많은 분들이 애용하시는 훌륭한 스킨이지만, 이렇게 아주 약간의 CSS 가미만으로도 훨씬 세련되고 나만의 개성이 가득 묻어나는 블로그를 완성할 수 있습니다. 폰트의 크기, 마우스 호버 시의 색상 포인트, 테두리 박스 형태 등 작은 디테일 하나가 블로그 방문자에게 훨씬 더 전문적이고 편안한 사용자 경험(UX)을 선사하기도 합니다.

오늘 가이드에서 소개해 드린 포인트 색상 코드나 테두리 굵기 수치는 고정된 정답이 아닙니다. 여러분 블로그의 메인 테마 색상에 맞추어 자유롭게 변경하며 세상에 하나뿐인 나만의 예쁜 사이드바를 디자인해 보시기 바랍니다.

혹시 글을 따라 적용해 보시다가 어려운 부분이 생기거나, 레이아웃에 어색한 점이 발생해 해결이 안 되신다면 주저 말고 아래 댓글로 편하게 질문 남겨주세요!

---

관련글

☑

티스토리 블로그 최근글, 인기글 분리하기 | 북클럽 스킨

티스토리 블로그 최근글, 인기글 분리하기 | 북클럽 스킨

티스토리 꾸미기 | 북클럽 스킨 카테고리의 '분류 전체보기' 변경 및 삭제하기

티스토리 꾸미기 | 북클럽 스킨 카테고리의 '분류 전체보기' 변경 및 삭제하기

여러분의 공감과 댓글은 큰 힘이 됩니다.✦ 가람과 함께하는 이야기 ✦