🎨티스토리 사이드바 카테고리 디자인 개선

티스토리 블로그의 사이드바 카테고리가 너무 평범하거나 가독성이 떨어진다면, 이번 CSS 커스터마이징으로 카테고리 제목과 소제목을 구분하고 더 보기 좋게 만들어 보세요!

---

1. 카테고리 소제목 강조 (link_item)

카테고리 최상단 제목(예: "OpenCV", "AWS" 등)을 두껍고 선명하게 스타일링합니다.

#aside .link_item {
  font-size: 17px;
  font-weight: 800;
  color: #111;               /* 더 진한 텍스트 색상 */
  display: block;
  margin-top: 12px;
  padding-bottom: 4px;
  border-bottom: 1px solid #ccc;
}

 

 

• 굵은 폰트 + 아랫줄로 구분감 UP
• 배경색이 베이지톤일 경우 텍스트 색은 #111 또는 #000 계열 추천

2. 서브카테고리 스타일 (link_sub_item)

하위 소제목은 상대적으로 작고 덜 강조되도록 처리합니다.

#aside .link_sub_item {
  font-size: 15px;
  color: #333;
  font-weight: 500;
  padding-left: 10px;
  display: block;
}

#aside .link_sub_item:hover {
  color: #c0392b;             /* 마우스 오버 시 포인트 색상 */
}

 

 

 

 

3. 카테고리 숫자(글 수) 흐리게 처리

너무 눈에 띄지 않도록 글 수 표시 숫자는 흐릿하게

#aside .c_cnt {
  color: #888;
  font-weight: normal;
  font-size: 13px;
  margin-left: 4px;
}

💡 적용 방법

1. 관리 > 꾸미기 > HTML 편집 > CSS 편집 메뉴 진입
2. CSS 코드의 맨 아래쪽 또는 사이드바 관련 부분 근처에 위 코드들 붙여넣기
3. 저장 후 블로그 새로고침!