티스토리 카테고리 메뉴 강조 방법

티스토리 블로그를 운영하면서 느낀 점 중 하나는

네이버 블로그에 비해 꾸미는 과정이 쉽지 않다는 것이다.

 

네이버는 클릭 몇 번이면 레이아웃이나 디자인을 바꿀 수 있지만,

티스토리는 HTML이나 CSS를 직접 수정해야 하는 경우가 많아서 처음에는 진입장벽이 꽤 높게 느껴졌다.

 

 

특히 카테고리 메뉴에서 현재 선택된 메뉴(active)가 눈에 잘 보이지 않는 문제가 있었다.

이 상태로는 사용자가 현재 위치를 인식하기 어렵고, 카테고리 클릭률에도 영향을 줄 수 있다.

 

그래서 티스토리 카테고리 강조 방법을 찾아보다가 HTML 수정 없이 CSS만으로 해결할 수 있는 방법을 적용해 봤다.

 

티스토리 카테고리 메뉴 강조 결과

 

블로그 관리 → 꾸미기 → 스킨 편집  → HTML편집  → CSS

 

반응형

아래 코드를 CSS에 추가하면 된다.

 

.category li.on > a,
.category li.active > a,
.category li.current > a,
.category li.selected > a {
font-weight: 700 !important;
border-bottom: 2px solid #000 !important;
}

 

CSS 맨 밑에 이렇게 추가함

↓ ↓ ↓ ↓ ↓

 

이 코드는 티스토리에서 자동으로 부여되는 on, active current, selected 클래스를 활용해 현재 선택된 카테고리에 스타일을 적용하는 방식이다.

 

적용 후에는 선택된 메뉴에 밑줄이 생기고 글씨가 강조되면서 카테고리 가독성이 훨씬 좋아졌다.

 

처음에는 HTML을 수정해야 하는 줄 알았지만 티스토리는 이미 구조가 만들어져 있기 때문에 CSS만 잘 활용해도 충분히 원하는 디자인을 구현할 수 있다.

 

티스토리는 분명 네이버보다 어렵게 느껴질 수 있지만 그만큼 자유도가 높고, 원하는 방향으로 블로그를 커스터마이징 할 수 있다는 장점이자 번거로운 단점이 있다.

 

카테고리 강조처럼 작은 변화 하나만으로도 블로그 완성도와 사용자 경험이 크게 달라지기 때문에 기본적인 CSS 수정은 꼭 한 번 시도해 보는 것을 추천한다.