티스토리 탑메뉴 변경하기, 메뉴 이미지의 url

티스토리 블로그의 탑메뉴를 변경할려면 무엇을 바꾸어야 할까?

일단 스킨 메뉴의 HTML/CSS 편집으로 들어가서 스킨을 바꿔 바야 할텐데.

그 다음 부터가 막막하다. 어느 부분이 탑메뉴에 관계된 것일까?

skin.html 에서 내려가다 보니

<div id="container">
<div class="header">
<h1><a href="https://wwwad.tistory.com/">인터넷애드드림과 꿈꾸는자</a></h1>
 <div class="blogMenu">
   <ul>
    <li class="tab_home"><a href="https://wwwad.tistory.com/">블로그홈</a></li>
    <li class="tab_medialog"><a href="https://wwwad.tistory.com/media">미디어로그</a></li>
    <li class="tab_localog"><a href="https://wwwad.tistory.com/location">지역로그</a></li>
    <li class="tab_taglog"><a href="https://wwwad.tistory.com/tag">태그</a></li>
    <li class="tab_guestbook"><a href="https://wwwad.tistory.com/guestbook">방명록</a></li>
   </ul>
   </div>
   </div>

이런 부분이 보인다.
요 부분이구나 하고 추가하고 싶은 메뉴를 추가해도 어라 메뉴가 보이지 않네.

그럼 메뉴에 관계된 부분을 뒤져봐야 겟구나.
관계된 것들은 container, header, blogMenu 이 부분이네.

메뉴를 추가했음에도 불구하고 나오지 않는다면 width를 정해준 부분이 있겠구나.

style.css 부분을 이제는 뒤져보자
관계된 부분을 함 적어면서 정리해 보면
#container { background:white;  clear:both; background:url(images/bgBoxLine.gif) 201px 0 repeat-y white; }

/* ***** Header ******/

.blogMenu { height:20px; margin-left:4px; margin-top:1px; overflow:hidden;}
.blogMenu a { color:#ccc; padding:16px 0 0 0; height:0; overflow:hidden; display: block; float:left;}
.blogMenu .desc  { margin-top:-4px;  font:0.9em dotum; letter-spacing:-1px; display:none;}

.blogMenu li { float:left;}
.blogMenu .tab_home a { background:url(images/menu_01.gif); width:59px;}
.blogMenu .tab_medialog a  { background:url(images/menu_02.gif); width:74px;}
.blogMenu .tab_localog a  { background:url(images/menu_03.gif); width:90px;}
.blogMenu .tab_taglog a  { background:url(images/menu_04.gif); width:73px;}
.blogMenu .tab_guestbook a  { background:url(images/menu_05.gif); width:68px;}

또 죽 내려가다 보니
.header .blogMenu { margin:0 auto; width:370px;}

이중 메뉴의 width에 관계된 부분은
.header .blogMenu { margin:0 auto; width:370px;} 이 부분이구나
여기서 width를 좀 넓혀서 변경한 후 추가한 메뉴가 나오는지 보자

아! 이제 나오는 구나 역시 이 부분이었네.

메뉴가 나오도록 하였으니 이제는 원하는 메뉴가 표시되도록 해야지.

예를 들어 "인터넷광고" 란 메뉴를 추가한다면

추가할 메뉴의 이미지를 만든 후 스킨/직접올리기로 들어가서 작성한 이미지를
menu_06.gif로 올린다.

skin.html 의 blogMenu 부분에
<li class="tab_iad"><a href="">인터넷광고</a></li>

style.css 부분에
.blogMenu .tab_guestbook a  { background:url(images/menu_06.gif); width:68px;}

를 추가한다.

이미 올려져 있는 메뉴 이미지를 가져와서 수정할려면 이미지의 url을 알아야 할텐데.
이미지 url은  사이드바 하단에 있는 rss feed 의 url을 참고하여 추적해 보면 된다.

rss feed 의 속성을 보니 url 이
http://cfs.tistory.com/custom/blog/19/197249/skin/images/rss.gif 였다.

이것으로 기존 메뉴의 url을 유추해 보면 menu1의 url은

http://cfs.tistory.com/custom/blog/19/197249/skin/images/menu_01.gif


주소창에 url을 입력하고 보니 정확하게 blog top 이미지를 볼 수 있었다.