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;という指定を入れてみたのですが、結果は全く同じでした。
また以前と同じようにここを画像にしようかと思っています。

コメントする

ページの先頭に戻る