[티스토리 스킨] 카테고리 메뉴 디자인 수정하기

티스토리 카테고리를 내 맘대로 수정하고 싶을 때 수정 가이드를 기록합니다.

 

전제

아래와 같이 id를 header-category로 지정하여 HTML을 작성하였음을 가정합니다.

<nav id="header-category">
	여기에 카테고리 리스트 치환자
</nav>

 

'분류 전체보기' 가리기

특정 카테고리가 아닌 '분류 전체보기' 링크를 안보이게 하고 싶은 경우 아래와 같이 스타일을 지정해 주세요.

#header-category .tt_category .link_tit {
  display: none;
}

 

'서브 카테고리' 가리기

티스토리 카테고리는 '주 카테고리' 와 '서브 카테고리'로 구성됩니다. 아래와 같이 '서브 카테고리'만 가릴 수 있습니다.

#header-category .tt_category .category_list .sub_category_list{
  display: none;
}

 

새 글 이미지 조절하기

#header-category .tt_category .link_tit, .link_item {
    align-items: center;
}

#header-category .tt_category img {
  width: 12px;
  height: 12px;
}

 

예제

아래는 카테고리를 자유롭게 스타일링하여 스킨에 맞게 수정한 예제 코드입니다. tailwindCSS를 함께 사용하였습니다.

CSS

/* 해더 카테고리 */
#header-category .tt_category .link_tit {
  display: none;
}

#header-category .tt_category li {
  margin-bottom: 0;
  margin-right: 18px;
}

#header-category .tt_category .category_list .sub_category_list{
  display: none;
}

#header-category .tt_category .category_list {
  display: flex;
  overflow: auto;
  white-space: nowrap;
}

#header-category .tt_category .category_list .link_item{
  display: flex;
  font-size: 0.875rem;
  padding-bottom: 10px;
  color: #6b7280;
  }

#header-category .tt_category .category_list .link_item:hover{
  color: #2563eb;
}

 

HTML

  <!-- 카테고리 -->
  <div class="px-4 pt-4 container mx-auto max-w-screen-lg">
    <nav id="header-category">
      여기에 카테고리 리스트 치환자
    </nav>
  </div>

 

결과

그럴 듯하게 완성 되었습니다.