tistory 메뉴 사이드바 수정(반응형 #2 스킨)

1 반응형 #2 스킨

반응현 #2 스킨에는 메뉴를 확인할 수 있는 사이드 바가 있다.

2 크기 줄이기: CSS 수정

CSS 헤더 서식이 있는 부분의 사이즈를 변경한다

변경 전

.wrap_skin.navi_on {padding-left:960px}

.navi_on .wrap_sub{width:960px}

변경 후

.wrap_skin.navi_on {padding-left:640px}

.navi_on .wrap_sub{width:640px}

수정 결과 이미지

3 사이드 바의 요소 변경하기(요소 삭제, 위치 변경): html 변경

사이드 바의 요소는
<div class="col_aside left_side">에는 세줄일 때는 중간 요소가, 2줄로 축소한 후에는 왼쪽 요소.
<div class="col_aside right_side">에는 오른쪽 요소들이 관리되고 있다.
left_side와 right_side의 태그를 right_side로 합치고 사용하지 않는 요소들을 지워준다

<div class="col_aside left_side">

<div class="col_aside right_side">

수정 후 코드

<div class="col_aside right_side">
    <s_sidebar>
        <s_sidebar_element>
            <!-- 공지사항 -->
            <s_rct_notice>
                <div class="box_aside"><strong class="tit_aside">Notice</strong>
                    <ul class="list_board">
                        <s_rct_notice_rep>
                            <li><a href="" class="link_board"></a>
                            </li>
                        </s_rct_notice_rep>
                    </ul>
                </div>
            </s_rct_notice>
        </s_sidebar_element>
        <s_sidebar_element>
            <!-- 최근에 올라온 글 -->
            <div class="box_aside"><strong class="tit_aside">Recent Posts</strong>
                <ul class="list_board">
                    <s_rctps_rep>
                        <li><a href="" class="link_board"></a></li>
                    </s_rctps_rep>
                </ul>
            </div>
        </s_sidebar_element>
        <s_sidebar_element>
            <!-- 최근에 달린 댓글 -->
            <div class="box_aside"><strong class="tit_aside">Recent Comments</strong>
                <ul class="list_board">
                    <s_rctrp_rep>
                        <li><a href="" class="link_board"></a></li>
                    </s_rctrp_rep>
                </ul>
            </div>
        </s_sidebar_element>
        <s_sidebar_element>
            <!-- 링크 -->
            <div class="box_aside"><strong class="tit_aside">Link</strong>
                <ul class="list_board">
                    <s_link_rep>
                        <li><a href="" class="link_board" target="_blank"></a></li>
                    </s_link_rep>
                </ul>
            </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://insightous.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>

4 사이드 바 게시글 수 표시: CSS 변경

변경 전

.tt_category li a img { display:none }

변경 후

.tt_category li a img { /* display:none */ }

또는

.tt_category li a img { }

 

---

참고

- https://lus-ty.com/409

- https://muksteem.tistory.com/13