« IE6でCSSで設定したレイアウトが崩れる | トップページ | ココログのカスタムCSSの編集~プルダウンメニューの作成~ »

2008年2月 8日 (金)

ココログのカスタムCSSの編集~カーソルを重ねると色が変わるメニューの作成~

ココログのカスタムCSSの編集~メニューの作成~で作ったメニューに背景を付け、マウスカーソルを重ねると色が変わるようにしてみます。
↓こんな感じのメニューを作ることができます。「ブログのサブタイトル」にHTMLを書いてブログトップに配置します。

カスタムCSSの編集

  • 次のようにカスタムCSSを書きます。
  • div.mymenu{
      position:absolute;
      top:80px; left:20px;
      padding:0px; margin:0px;
    }
    div.mymenu a{
      display:block; float:left;
      width:85px; height:19px;
      padding:0px; margin-right:1px;
      background: url("http://shirabemono.cocolog-nifty.com/blog/img/menu.gif");
      line-height:19px; vertical-align:middle;
      text-align:center;
      text-decoration:none;
    }
    div.mymenu a:hover{
      position:relative;
      background-position:0px -19px;
    }
    div.mymenu a:link { color: white }       /* unvisited link */
    div.mymenu a:visited { color: white }   /* visited links */
    div.mymenu a:active { color: white }    /* active links */
  • "div.mymenu"は、このメニューの外枠になります。位置を設定しています。
  • "div.mymenu a"は、"div.mymenu"枠内の"a"(アンカータグ)の設定です。ここで、アンカー文字列に背景画像や幅・高さ、文字列の位置などを指定します。
    • "display:block; float:left;"は、アンカータグをブロックとして扱い、左寄せして配置する指定です。この指定によって、HTMLでアンカータグを続けて書いたとき、左から順に横並びに配置されることになります。
    • "width:85px; height:19px;"は、アンカータグの幅と高さ設定です。あとに指定する背景画像の大きさに合わせています。
    • "padding:0px; margin-right:1px;"で、右に1ピクセルあけながら横に並べていきます。
    • "line-height:19px; vertical-align:middle;"は、アンカー文字列領域の高さ指定と、高さ方向の真ん中に文字を配置する指定です。
    • "text-align:center;"は、横方向の真ん中に文字列を配置する指定です。
    • "text-decoration:none;"は、下線などテキストの装飾をなくす指定です。
  • "div.mymenu a:hover"は、マウスカーソルがアンカーに重なったときの指定です。":hover"というのがマウスが重なったときの指定であることを意味しています。実はアンカーの背景画像として次のものを使っています。

    85x38ピクセルの画像ですが、枠の大きさを85x19ピクセルに指定しているため、通常は上半分しか表示されません。マウスカーソルが重なったとき、背景画像を上に19ピクセルずらすことによって、色が変わったように見せています。
    "position:relative;"は、相対座標指定にする設定です。
    "background-position:0px -19px;"が、背景画像を19ピクセル上にずらす指定です。

HTMLの編集

    <div class="mymenu">
    <a href="http://shirabemono.cocolog-nifty.com/blog/">T O P</a>
    <a href="http://shirabemono.cocolog-nifty.com/blog/cat8169838/index.html">ココログ<small>関連</small></a>
    <a href="http://www.cocolog-nifty.com/login/">ログイン</a>
    </div>
  • "mymenu"クラスの"div"タグでアンカーを囲むだけです。アンカーを続けて書くと横に並んで表示されます。

« IE6でCSSで設定したレイアウトが崩れる | トップページ | ココログのカスタムCSSの編集~プルダウンメニューの作成~ »

コメント

コメントを書く

(ウェブ上には掲載しません)

トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/506297/40040807

この記事へのトラックバック一覧です: ココログのカスタムCSSの編集~カーソルを重ねると色が変わるメニューの作成~:

« IE6でCSSで設定したレイアウトが崩れる | トップページ | ココログのカスタムCSSの編集~プルダウンメニューの作成~ »