티스토리가 직접 만든 두 번째 반응형 웹스킨 '#2'를 내놓았다. 이번 스킨은 심플하면서도 깔끔할 뿐만 아니라 글자체도 가독성이 높아 좋다. 무엇보다 티스토리에서 직접 만들어서 그런지 티스토리를 사용할 때 꼭 플러그인해서 써왔던 'SNS 글보내기','카테고리 글 더 보기' 기능도 예쁘게 구현되어 있어 편리하다. 그래서 본인도 봄을 맞아 티스토리 반응형 웹스킨 '#2'를 제 블로그에 적용해 보았다
그런데 티스토리 반응형 웹스킨 '#2'을 적용해 사용해 보니 몇가지 버그가 있었다. 그중 가장 먼저 눈에 뛰는 것은 ① [관리]-[사이드바] 설정 가보시면 아시겠지만 사이드바 메뉴의 이름이 없다는 것이다. 그냥 (이름없음 1), (이름없음 2), (이름없음 3), (이름없음 4), (이름없음 5), (이름없음 6), (이름없음 7)로만 표기되어 사이드바 메뉴들을 구분하기 힘들다 ② 또한 사이드바 선택메뉴에 공지사항 메뉴도 없었다.
그래서 [HTML/CSS]-[HTML]로 들어가 HTML 코드를 다음과 같이 수정했더니 버그가 수정되었다.
<div class="wrap_etc"> ☜ 대체해야 할 위치
<div class="col_aside left_side">
<s_sidebar>
<s_sidebar_element> <!-- 공지사항 -->
<div class="box_aside">
<strong class="tit_aside">Notice</strong>
<ul class="list_board">
<s_rct_notice>
<s_rct_notice_rep>
<li><a href="" class="link_board"></a></li>
</s_rct_notice_rep>
</s_rct_notice>
</ul>
</div>
</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>
</div>
<div class="col_aside right_side">
<s_sidebar>
<s_sidebar_element><!-- 캘린더 --> ☜ 새로 추가
<div class="box_aside box_calendar">
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 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 | 31 |
</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://jsksoft.tistory.com/tag" class="link_more">more</a>
</div>
</s_sidebar_element>
<s_sidebar_element><!-- Archives --> ☜ 새로 추가
<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>
</div>
사이드바 수정.txt이렇게 HTML 코드를 수정하고 나니 아래와 같이 사이드바 메뉴가 수정보완되었다. 이제 사이드바 메뉴를 쉽게 추가하거나 제거할 수 있고 위치변경도 가능하다.
