タグ「メニュー」 の検索結果(1/1)

2009年4月 1日

メニューを画像に

サイドバーのメニューを画像にしました。
Movable Typeアップグレード前の記事「メニューの画像化」に書いた方法と基本的に同じです。
用意した画像は下のような画像1枚だけです。
navi.gifまた、修正したのは、ウィジェット「リンク」とテンプレート「スタイルシート(オリジナル)」の2つです。
ウィジェット「リンク」のddタグの部分は、以下のとおりです。

<dd class="side">

<ul id="navigation">

<li id="navi01"><a href="http://kim.art.coocan.jp/my_blog/blog.html">ブログ記事</a></li>

<li id="navi02"><a href="http://kim.art.coocan.jp/my_blog/gallery.html">携帯写真ギャラリー</a></li>

<li id="navi03"><a href="http://kim.art.coocan.jp/my_blog/link.html">リンク集</a></li>

<li id="navi04"><a href="http://kim.art.coocan.jp/my_blog/profile.html">プロフィール</a></li>

<li id="navi05"><a href="mailto:shoji.s.kimura@nifty.ne.jp">E-mail</a></li>

</ul>

</dd>

次に、スタイルシート(オリジナル)の内容は以下のとおりです。
/*リンクを画像にする*/
ul#navigation{
      list-style: none;
      text-indent: -9999px;/*テキスト非表示*/
}

ul#navigation li{
      width: 153px;
      height: 24px;
}

ul#navigation li a{
      display: block;
      width: auto;
      height: 24px;
      margin: 0;
      padding: 0;
      text-decoration: none;
      background: url(http://kim.art.coocan.jp/my_blog/images/navi.gif) no-repeat;
} 

ul#navigation li#navi02 a{background-position: 0 -24px;} 
ul#navigation li#navi03 a{background-position: 0 -48px;} 
ul#navigation li#navi04 a{background-position: 0 -72px;} 
ul#navigation li#navi05 a{background-position: 0 -96px;} 
ul#navigation li#navi01 a:hover{background-position: -153px 0;}
ul#navigation li#navi02 a:hover{background-position: -153px -24px;}
ul#navigation li#navi03 a:hover{background-position: -153px -48px;} 
ul#navigation li#navi04 a:hover{background-position: -153px -72px;} 
ul#navigation li#navi05 a:hover{background-position: -153px -96px;} 

2009年2月11日

リンクをメニューボタン風にする

左のサイドバーのLinks(menu)からはブログ記事と3つのウェブページにリンクしているのですが、ここをメニューボタン風に変えてみました。
まずこの部分に"menu"という名前を付け、ウィジェットテンプレートの「リンク」を編集して、<ul id="menu">とします。
次にテンプレート「スタイルシート(オリジナル)」に以下のように記述します。

/*リンクをメニューボタン風にカスタマイズ*/
ul#menu {
      border-top: #666 1px solid;
      border-right: #666 1px solid;
      border-left: #666 1px solid;
}
ul#menu li a {
      display: block;
      background-image: none;
      background-color: #bfd7cd;
      padding: 3px 8px;
      border-bottom: #666 1px solid;
}
ul#menu li a:hover {
      display: block;
      text-decoration: none;
      background-image: none;
      background-color: #ff3;
      padding: 3px 8px;
      border-bottom: #666 1px solid;
}

テキストの周りを線で囲み、背景色を敷き、かつブロックレベル要素にすることでボタンらしき外観にし、マウスオーバーで背景色と文字色を変える、という単純な仕掛けです。
しかし、またもやWin版IE6で躓いてしまいました。他のブラウザではイメージどおりの結果になったものの、IE6だけはボタンとボタンの間にすき間ができてしまうのです。
a要素への上下のpaddingの指定がいけないのかと考え、上記スタイルシートからその部分を削除して、その代わりにline-height: 2.0;という指定を入れてみたのですが、結果は全く同じでした。
また以前と同じようにここを画像にしようかと思っています。
ページの先頭に戻る