블로그 스킨 중 메뉴를 마음데로 변경 할 수 있는 방법입니다.
제가 사용한 기본 스킨은 Life In Mono(Light) 입니다.
잘 안되시는 부분은 언제든지 물어보세요^^

① 메뉴 이미지 만들기


자신이 변경하고 싶은 메뉴 이미지를 만드시는것이 가장 좋은 방법입니다.
만약, 직접 만들수있는 환경이 안되신다면 티비의 세상구경님의 메뉴 이미지를 사용하셔도 됩니다.^^
티비의 세상구경님 블로그에도 메뉴 색깔 바꾸는 방법의 포스팅이 있으니 편하신 방법을 사용하시면 되겠죠~!!!

티비의 세상구경님의 글 보러가기

제가 하는 방법은 조금은 다른 방법입니다.
먼저, 제가 준비한 이미지는 기본 이미지와 마우스 오버했을때의 색상 변경을 위해 2가지 이미지를 하나의 파일에 모두 만들어서 저장을 했습니다.

이미지를 직접 구하시거나 만드셨다면 파일 업로드를 하시면 준비는 끝!!!

② 메뉴 HTML 변경하기

<div id="blogMenu">
        <ul>
          <!-- 블로그 사용 환경 (설치형/티스토리)에 맞게 아래 주석으로 처리된 메뉴를 활성화 시키시기 바랍니다. -->
            <li class="tab_home"><a href="[##_blog_link_##]" title="Home">Home</a></li>
            <li class="tab_tag"><a href="[##_taglog_link_##]" title="Tag">Tag</a></li>
            <li class="tab_media"><a href="[##_blog_link_##]media" title="MediaLog">MediaLog</a></li>
            <li class="tab_location"><a href="[##_localog_link_##]" title="LocationLog">LocationLog</a></li>
            <!-- <li class="tab_key"><a href="[##_keylog_link_##]" title="KeyLog">KeyLog</a></li> -->
            <li class="tab_guestbook"><a href="[##_guestbook_link_##]" title="Guestbook">Guestbook</a></li>
            <li class="tab_admin"><a href="[##_owner_url_##]" title="Admin">Admin</a></li>
            <li class="tab_write"><a href="[##_owner_url_##]/entry/post" title="Write">Write</a></li>
            </ul>
</div>

위의 코드는 Life In Mono의 기본 메뉴 HTML입니다.
자신이 원하는 메뉴만 남겨두고 삭제하시면 됩니다.
저는 Home, Tag, MediaLog, Guestbook만 필요하기 때문에 나머지는 삭제했습니다.^^

적용 한 HTML 보기


③ 메뉴 CSS 수정하기

#blogMenu {clear:both;height:38px;background:url(images/메뉴이미지파일명) no-repeat; }
#blogMenu ul li {float:left; }
#blogMenu a {display:block;height:38px;text-indent:-1000px;overflow:hidden;cursor:pointer;background:url(images/메뉴이미지파일명) no-repeat;}
#blogMenu .tab_home a {width:117px; background-position:0 0;}
#blogMenu .tab_home a:hover, #tt-body-page .tab_home a {background-position:0 -50px;}
#blogMenu .tab_tag a {width:78px; background-position:-117px 0; }
#blogMenu .tab_tag a:hover, #tt-body-tag .tab_tag a {background-position:-117px -50px;}
#blogMenu .tab_media a {width:136px;  background-position:-195px 0; }
#blogMenu .tab_media a:hover, #tt-body-media .tab_media a {background-position:-195px -50px;}
#blogMenu .tab_guestbook a {width:97px; background-position:-331px 0; }
#blogMenu .tab_guestbook a:hover, #tt-body-guestbook .tab_guestbook a {background-position:-331px -50px;}

※ #blogMenu .home a:hover, #tt-body-page .home a 는 무엇을까?
각 메뉴마다 조금씩 다른 이름으로 css 추가가 되었습니다.
그 이유는 해당 메뉴에 마우스 오버를 할 경우에 색상이 바뀌게 되죠 ^^
그리고, 각 메뉴로 이동할 경우 현재 메뉴의 색상도 바뀌게 되는것을 보실 수 있습니다.

CSS는 수정할 부분이 좀 많죠^^
위의 CSS는 제가 적용한 메뉴만 적용되어있습니다.

전체 메뉴 class 보기


조금 더 이해가 쉽게 될 수 있도록 이미지로 한번 만들어 보았습니다.
(더 어려워지셨나요? ㅠㅠ)


신고
Posted by 별군

댓글을 달아 주세요

  1. 저는 css 일일이 수정하는게 복잡하고 싫어서 싹다 밀어버리고 롤오버로 해버렸는데요 ^^;
    내용을 보니 별군님이 훨씬 더 깔끔해보이세요!! 요즘 스킨 다시 조금씩 수정중인데요~
    메뉴부분 수정할때 별군님 포스팅 처럼 바꿔야겠는데요~ 잘 배우고 갑니다 ^^

    2010.07.21 10:39 신고 [ ADDR : EDIT/ DEL : REPLY ]
    • CSS 수정이 가장 복잡한것 같아요;;;
      처음 바꾸시는 분들에게는 티비님 처럼 바꾸는게 더 효과적이겠죠 ^^

      2010.07.21 11:03 신고 [ ADDR : EDIT/ DEL ]
  2. 저도 한번 해봐야겠군요. 좋은 정보 감사합니다.^^

    2010.07.21 12:35 신고 [ ADDR : EDIT/ DEL : REPLY ]
  3. 스킨 정말 예쁘네요:)
    전 괜히 멀쩡한 스킨에 추가좀 해보겠다고 설치다가 스킨 다 말아먹고
    겨우겨우 복구했는데.. 스킨에 손대기는 너무 어려운 것 같습니다 ㅠ_ㅠ

    2010.07.21 19:45 신고 [ ADDR : EDIT/ DEL : REPLY ]
    • 감사합니다^^
      저도 테스트 블로그 하나 만들어서 먼저 만들어보고 적용해요;;ㅋ

      2010.07.21 20:21 신고 [ ADDR : EDIT/ DEL ]
  4. 안녕하세요. 문의좀 드리고자 합니다. 제가 메뉴를 이미지파일로 넣고 싶은데요. 먼저 메뉴설정 가서 제목부터 바꿨더니 말씀해주시는 그런 html이 아니라 다른 설정이 되어있어요. 그리고 스킨도 처음에는 basic2008이었는데 님의 글을 보면서 Life in Mono(Light)로 바꾸었거든요. html을 중간에 그냥 삽입..해서 만들 수 있나요?? 서치바도 지운 상태라서요. 간단히 올리자면...

    skin.html 은

    <!-- 블로그메뉴 -->
    <div id="blogMenu"></div>

    이게 다구요.(서치바는 제가 안 쓰려고 지웠어요)

    Style.css 또한
    ++++길어서 죄송. 이래야 아실 것 같아서.ㅠㅠ++++
    /* 블로그메뉴 */
    #blogMenu {float:right; margin:0 0 3px 5px;}
    #blogMenu ul li {
    float:left;
    background:url(images/menu_div.gif) no-repeat 0 3px;
    }

    #blogMenu li.first {
    background:none;
    }



    #blogMenu a {
    height:16px;
    color:#707070;
    font-family:arial;
    font-size:12px;
    padding:0 10px;
    }

    #blogMenu a:hover {
    color:#333;
    text-decoration:none;
    ++++++++++++++
    이게 다 입니다.
    몇시간째 끙끙대는..ㅠㅠ 불쌍한 저를 도와주세요. 그럼..

    2011.01.06 10:25 신고 [ ADDR : EDIT/ DEL : REPLY ]
  5. 이넬

    으구..위에분이랑 저랑 같은 상황이네요..ㅠ 도움부탁드릴께요 저도 몇시간 끙끙대고 잡고있어요 ㅠㅠ

    2011.01.06 23:23 신고 [ ADDR : EDIT/ DEL : REPLY ]


티스토리 툴바