Tistory Toc 추가하는 방법

Tistory Toc 추가하는 방법

종강도 했겠다 블로그를 조금 꾸며보고 싶어서 TOC를 추가하기로 했다
tistory-table-of-contents를 참고해서 만들었는데 메뉴얼도 잘되어 있고, 적용하기 찹 쉽다

내 메인 테마가 Tistory의 #1 테마인데 TOC 기준이 되는 테마가 딱 #1이어서 매우 굳이었다

내 입맛에 맞도록 수정해보자

처음 TOC를 설정하면, TOC가 왼쪽 상단에 적용 된 것을 볼 수 있다
일단 TOC를 오른쪽 상단에 위치시키고, 글씨 색도 Blue 계열로 바꾸고 싶었다

내 요구사항은 CSS만 변경하면 쉽게 적용 할 수 있는 것들이었다

TOC 위치 변경방법

/* custom card style */

.toc-app-common {
  display: inline-block;
  padding: 0.6rem 1.25rem 1.25rem 1.25rem;
}

.toc-app-basic {
  position: fixed;
  right: 0; /* set ToC to right edge of the screen */
  top: 50%; /* vertically move ToC to the middle of the screen */
  transform: translateY(-50%); /* correct alignment to exactly middle */
}

.toc-app-bottom {
  position: absolute;
}

글씨색 변경하는 방법

.toc-active,
.toc-common:hover {
  color: #000080; /* Navy blue */
}

.toc-parent-active {
  color: #4682b4;
}

부족한 점이나 잘못 된 점을 알려주시면 시정하겠습니다 :>