12. 스킨 옵션 - 사이드바1

사이드바는 크게 사이드바1과 사이드바2로 구성됩니다. 이 글은 사이드바1에 관련된 설정을 소개합니다. 스킨 옵션을 통해 사이드바1을 설정하면 글을 기준으로 우측에 사이드바1이 배치됩니다.

설정하기

사이드바1 관련 기능은 '블로그관리 > 꾸미기 > 스킨 편집'의 스킨 옵션을 통해 쉽게 설정 가능합니다. 지원하는 기능은 사이드바1의 사용여부 설정 및 하위 카테고리가 많을 경우 드롭다운 형태로 표현할 수 있는 기능을 지원합니다. 지원하는 위젯은 블로그 정보, 공지사항, 카테고리, 최근 댓글, 방문자 수, 최근 글, 인기 글, 블로그 메뉴 그리고 랜덤 태그입니다. 사이드바1에서 사용 가능한 위젯은 사이드바2에서도 동일하게 지원합니다.

사용 여부

사이드바1를 사용하기 위해서는 사용 여부를 설정해야 합니다. 기본적으로 탕비수다 이마고 스킨은 원 페이지 모드입니다. 사용 여부를 설정후 '블로그 관리 > 꾸미기 > 사이드바'에서 원하는 위젯을 사이드바1 영역에 놓거나 빼면서 노출 여부를 설정할 수 있습니다.

드롭다운 카테고리

하위 카테고리가 많을 경우 사이드바에서 제대로 표현하기 힘든 경우가 있습니다. 즉 많은 카테고리가 출력되면서 길게 늘어지는 경향이 있어요. 이런 부분을 해소하려면 상위 카테고리만 기본적으로 출력되고 이후 펼침 버튼을 통해 하위 카테고리를 보여주면 좋겠죠.

사이드바1이 정의된 곳

108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<s_if_var_first-sidebar-use>
<style>
  /* 사이드바 모드 너비 */
  .row { max-width: 1252px }
  .pagetitle-wrapper .maxlimit { max-width: 1152px; margin-left: auto; margin-right: auto }
  #tt-body-page #main, #tt-body-guestbook #main { max-width: 1252px; margin-left: auto; margin-right: auto }
  #tt-body-page .holder, #tt-body-guestbook .holder { max-width: 852px; float: left; margin-left: auto; margin-right: auto; padding-right: 15px; border-right: 2px dotted #ededed }
  .article-desc { max-width: 852px; margin-left: auto; margin-right: auto }
  .comport { max-width: 852px }
  #tt-body-page .sidebar-first-wrapper, #tt-body-guestbook .sidebar-first-wrapper { max-width: 300px; float: right; display: block; padding-left: 15px }
  @media only screen and (max-width: 1251px) {
    #tt-body-page #pagetitle { max-width: 852px; margin-left: auto; margin-right: auto }
    .holder { float: none !important; padding-right: 0 !important; border-right-width: 0 !important }
    .sidebar-first-wrapper { display: none !important }
  }
</style>
</s_if_var_first-sidebar-use>
cs

사이드바1의 사용 여부를 설정하면 활성화되는 영역입니다. 사이드바1를 설정하면 다소 복잡한 여러 영역들의 가로 폭이 설정됩니다. 뿐만 아니라 미디어 쿼리가 활성화되며 가로 폭 한계에 도달하면 사이드바1이 숨김 상태로 변경됩니다.

이미지 맵

롤랑존

이미지를 활용해 다양한 기능을 제공하는 티스토리 반응형 스킨

    '설명서' 카테고리의 다른 글

    글에 남긴 여러분의 의견은 0개 입니다.

    *

    *