본문 바로가기

티스토리 Book Club 스킨 수정: 폴더 형식의 카테고리를 사이드바에 표시하기

2019.09.06 댓글 0

최근 공개된 티스토리 스킨인 Book Club의 사이드바에 "카테고리" 위젯을 표시하면 리스트 형식의 카테고리로 표시됩니다.

티스토리 스킨 카테고리 보기

위의 그림과 같이 표시되는데요. 카테고리를 폴더 형식으로 표시하고 싶은 경우가 있을 수 있습니다. 이 경우 티스토리 스킨 가이드에서 '카테고리' 부분을 체크해보면 다음과 같이 카테고리 형식으로 두 가지 치환자를 지원합니다.

[##_category_##] : 폴더 형식의 카테고리
[##_category_list_##] : 리스트 형식의 카테고리


따라서 티스토리 HTML 소스에서 리스트 형식의 카테고리 치환자를 폴더 형식의 카테고리 치환자로 바꾸어 주면 폴더 형식으로 카테고리가 표시됩니다.

※ 티스토리 스킨을 수정할 때에는 티스토리 스킨 가이드를 먼저 체크하는 것이 좋습니다.

티스토리에 로그인한 후에 왼쪽 메뉴에서 꾸미기 > 스킨 편집을 선택하고 "html 편집"을 클릭하여 HTML 편집 화면을 엽니다.

티스토리 스킨 편집

그러면 HTML 편집 화면이 표시됩니다. Ctrl+F를 클릭하여 '[##_category_list_##]'를 검색합니다. 그러면 다음과 비슷한 코드를 찾을 수 있습니다.

<div class="sidebar-1">
      <s_sidebar>
       <s_sidebar_element>
        <!-- 카테고리 -->
        <nav class="category">
         [##_category_list_##]
        </nav>
       </s_sidebar_element>
       </s_sidebar>
     </div>

위의 HTML 코드에서 "[##_category_list_##]"를 "[##_category_##]"로 바꾸고 저장하도록 합니다. 이제 브라우저에서 블로그를 확인해보면 사이드바에 표시된 카테고리가 '폴더 형식'(트리 형식)으로 표시되는 것을 확인할 수 있을 것입니다.

티스토리 스킨 편집 - 카테고리

글자 크기는 CSS로 조정이 가능합니다.

예시:

/* 사이드바 카테고리 위젯의 글자 크기 및 마우스 포인터 변경 */
.branch3 div {    cursor: pointer; font-size: 0.9em;}
.branch3 #text_0 {    font-size: 1.3em;}

마우스 커서가 포인터(Pointer)로 변경되고 글자 크기가 지정된 대로 변경됩니다. 위의 코드는 하나의 예시일 뿐이고 적절히 수정하도록 합니다.

참고:

※일부 글에 제휴 링크가 포함될 수 있습니다.

댓글0