ページナビゲーション css
- Category : blog > serene bach / 2007.06.06 Wed 23:30
- permalink
- comment:1 1181209104
- trackback:2 1200332803
Serene Bachプラグイン「ページナビゲーション展開」にはとてもお世話になっています。
Serene Bachテンプレート屋さんで、色々なナビゲーション部分のデザインが出ていますが、ここだけ抜き出して、きれいに装飾する小技cssをご紹介。
Serene Bachテンプレート屋さんで、色々なナビゲーション部分のデザインが出ていますが、ここだけ抜き出して、きれいに装飾する小技cssをご紹介。
- マウスのあてれる範囲を少しでも広く
- ページングリンク部分はボタンぽく
- 現在いるページが分かりやすく
■CSS
div.page {
color: #666;
font-size : 10px;
font-family: verdana, osaka, sans-serif;
text-align: center;
margin: 10px auto;
padding: 8px 20px;
}
div.page a {
padding: 2px 3px;
text-decoration: none;
}
div.page a:link,
div.page a:visited {
color:#4F92EB;
background-color: #f7f7f7;
border: solid 1px #dedede;
}
/* マウスあてたとき */
div.page a:hover {
color: #333;
border: solid 1px #ddd;
}
/* 現在いる場所 */
div.page .page_now {
padding: 2px 3px;
border: solid 1px #fff;
font-weight: bold;
}
Comments
ページナビゲーションは私も以前からお世話になっていたのですが
自分で使ってみてどのページを見ているのか判りにくいなとおもっていたので
このCSS非常に助かります。
早速使わせていただきました、ありがとうございました