많은 분들이 쓰고 계시는 Plain스킨 메뉴 수정하는 법을 알아 보도록 합시다. ^^


1. 오른쪽 메뉴 삭제하기

로그인 했을 때 보여지는 티스토리메뉴와 겹쳐진다는 문의를 많이 들은 오른쪽 메뉴를 삭제해 보도록 하겠습니다. skin.html을 열어 아래 부분을 찾습니다.

skin.html
<div id="menu" class="clearfix">
  <a href="[##_blog_link_##]" title="처음으로" class="blog"><span>Blog</span></a>
  <a href="[##_blog_link_##]notice" title="공지" class="notice">Notice</a>
  <a href="[##_taglog_link_##]" title="태그" class="tag">Tag Log</a>
  <a href="[##_localog_link_##]" title="지역로그" class="localog">Location Log</a>
  <a href="[##_blog_link_##]media" title="미디어로그" class="media">Media Log</a>
  <a href="[##_guestbook_link_##]" title="방명록" class="guestbook">Guestbook</a>
  <a href="[##_owner_url_##]" title="관리자" class="admin">Admin</a>
  <a href="[##_owner_url_##]/entry/post" title="글쓰기" class="write">Write</a>
  <a href="#content" title="본문으로" class="skip">Skip to Content</a>
</div><!--//menu-->

주황색으로 표시된 부분을 삭제 하시면 됩니다. 쉽죠? :D


2. 오른쪽 메뉴를 왼쪽으로 옮기기

style.css를 열어 아래부분을 찾습니다.

style.css
#menu a.admin, #menu a.write, #menu a.skip{  float:right;}

float:right라고 되어 있는 부분을 float:left로 수정합니다.


3. 메뉴 추가하기

카테고리에 있는 항목을 메뉴바에 추가해 보겠습니다.

Plain테스트 스킨에 있는 티스토리 항목을 메뉴바에 추가해 보겠습니다.

사이드바 카테고리 항목에서 원하는 카테고리를 클릭합니다.

주소창에 나온 주소를 클릭해서 복사합니다.

다음 skin.html을 열어서 아래 항목을 찾습니다.

skin.html
<div id="menu" class="clearfix">
  <a href="[##_blog_link_##]" title="처음으로" class="blog"><span>Blog</span></a>
  <a href="[##_blog_link_##]notice" title="공지" class="notice">Notice</a>
  <a href="[##_taglog_link_##]" title="태그" class="tag">Tag Log</a>
  <a href="[##_localog_link_##]" title="지역로그" class="localog">Location Log</a>
  <a href="[##_blog_link_##]media" title="미디어로그" class="media">Media Log</a>
  <a href="[##_guestbook_link_##]" title="방명록" class="guestbook">Guestbook</a>
  <a href="[##_owner_url_##]" title="관리자" class="admin">Admin</a>
  <a href="[##_owner_url_##]/entry/post" title="글쓰기" class="write">Write</a>
  <a href="#content" title="본문으로" class="skip">Skip to Content</a>
</div><!--//menu-->

원하는 위치에 아래 코드를 넣습니다.

<a href="http://plainskin.tistory.com/category/티스토리">티스토리(메뉴이름)</a>

(주황색으로 표시된 부분은 앞에서 복사한 주소입니다.)


선택메뉴 배경색상 변경하기

style.css를 열어 아래 부분을 찾습니다.

style.css
body#tt-body-page #menu a.blog, body#tt-body-category #menu a.blog, body#tt-body-notice #menu a.notice, body#tt-body-tag #menu a.tag, body#tt-body-location #menu a.localog, body#tt-body-media #menu a.media, body#tt-body-guestbook #menu a.guestbook{
  font-weight:bold;
  background-color:#f7f7f7;
}

주황색으로 된 부분을 원하는 색상코드로 변경해 줍니다. :D

Posted by 더모발

댓글을 달아 주세요