[티스토리] 사이드바(sidebar) 변경

티스토리/커스터마이징

[티스토리] 사이드바(sidebar) 변경

happygram 2018. 11. 17. 19:47

현재 저의 티스토리(tistory) 블로그는 반응형 스킨을 사용하고 있습니다.

스킨명은 '티스토리의 두번째 반응형 스킨' 이라고 되어 있습니다.

크기 변경

해당 스킨을 사용하면서 불편했던 점이 있었는데, 바로 사이드바(sidebar)의 크기가 너무 컸던 점입니다.

관리자 메뉴에서 살펴보니, '사이드바1', '사이드바2' 이렇게 되어 있었고, '사이드바2' 부분을 삭제하고 싶었으나, 관리자 메뉴에서는 삭제할 수 있는 부분을 제공하지 않았습니다.

그래서 직접 수정하기로 생각하고, '스킨 편집' 으로 들어가서 '사이드바2' 부분을 편집 하였습니다.

HTML

<div class="col_aside right_side">
    <s_sidebar>
        <s_sidebar_element>
            <!-- 달력 -->
            <div class="box_aside box_calendar">
                
  «   2024/04   »
  
      일
      월
      화
      수
      목
      금
      토
    

  
       
      1
      2
      3
      4
      5
      6
    

      7
      8
      9
      10
      11
      12
      13
    

      14
      15
      16
      17
      18
      19
      20
    

      21
      22
      23
      24
      25
      26
      27
    

      28
      29
      30
       
       
       
       
    

            </div>
        </s_sidebar_element>
 
        <s_sidebar_element>
            <!-- 태그 클라우드 -->
            <div class="box_aside box_tag">
                <strong class="tit_aside">Tags</strong>
                <ul class="list_tag">
                    <s_random_tags>
                        <li><a href="" class="link_tag "></a></li>
                    </s_random_tags>
                </ul>
                <a href="https://happygram.tistory.com/tag" class="link_more">more</a>
            </div>
        </s_sidebar_element>
 
        <s_sidebar_element>
            <!-- 글 보관함 -->
            <div class="box_aside box_archive">
                <strong class="tit_aside">Archives</strong>
                <ul class="list_keep">
                    <s_archive_rep>
                        <li><a href="" class="link_keep"></a> ()</li>
                    </s_archive_rep>
                </ul>
            </div>
        </s_sidebar_element>
 
        <s_sidebar_element>
            <!-- 방문자수 -->
            <div class="box_aside box_visitor">
                <dl class="list_visitor">
                    <dt>Today</dt>
                    <dd></dd>
                </dl>
                <dl class="list_total">
                    <dt>Total</dt>
                    <dd></dd>
                </dl>
            </div>
        </s_sidebar_element>
    </s_sidebar>
</div>
Colored by Color Scripter
cs

<div> 태그 중 'class' 속성에 'right_side' 부분이 보였고, 실제로 그 부분이 '사이드바2' 영역 이었습니다.

과감히 해당 부분을 전체 삭제 하였습니다.

해당 부분을 삭제하고, 새로고침 한 후 확인 하였으나, 전체 크기는 줄지 않았고, 해당 부분만 사라진 상태입니다.

그래서 CSS 부분도 변경을 진행 하였습니다.

CSS

.wrap_skin.navi_on {padding-left:660px}
cs

.navi_on .wrap_sub{width:660px}
cs

기존에는 '960px' 라고 되어 있는 부분을 '660px' 로 변경 하였습니다.

기존 사이드바를 감싸는 전체 영역이 3개의 열로 되어 있는 부분을 고려하여 약 2/3 사이즈로 변경 하였습니다. (600~700px 정도면 적당)

새로고침 후 적용하였더니, 다음과 같이 예쁘게 변경된 것을 확인 하였습니다.

Tablet

Mobile

카테고리 글 갯수, 새로운 글 표시

사이드바 사이즈는 원하는 크기로 변경이 되었지만, 카테고리 글 갯수, 새로운 글 표시에 대한 문제가 있었습니다.

티스토리(tistory) 공식 사용 방법 중 '치환자' 와 관련된 것이 아닌 지 살펴 보았지만, 해당 스킨에서는 '

분류 전체보기 (38)

' 치환자를 그대로 사용하여, 카테고리를 구성하고 있었습니다.

티스토리 치환자 사용 방법 참조 URL

https://tistory.github.io/document-tistory-skin/sidebar/category.html

그래서 브라우저 '개발자 도구' 기능을 이용하여, 직접 카테고리의 소스를 살펴 보았습니다.

실제로 갯수가 표시되는 부분을 보니까 CSS 속성 중 'display:none;' 으로 되어 있는 것을 확인 하였습니다.

CSS 변경을 위해서, 관리자 메뉴 중 '스킨 편집' 을 이용하여, CSS 를 다음과 같이 변경 하였습니다.

.tt_category li a img { display:inline }
cs

기존에는 'display:none' 으로 되어 있는 것을, 'display:inline' 으로 변경 하였습니다.

해당 속성을 변경하여, 다음처럼 원하는 대로 '갯수', '새로운 글 표시' 를 확인 하였습니다.

현재글[티스토리] 사이드바(sidebar) 변경

행복한 프로그램