ページナビゲーション css

Serene Bachプラグイン「ページナビゲーション展開」にはとてもお世話になっています。

Serene Bachテンプレート屋さんで、色々なナビゲーション部分のデザインが出ていますが、ここだけ抜き出して、きれいに装飾する小技cssをご紹介。

  • マウスのあてれる範囲を少しでも広く
  • ページングリンク部分はボタンぽく
  • 現在いるページが分かりやすく

ページナビゲーション 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:1

Jura 2007年6月 7日 18:38

はじめましてこんにちは
ページナビゲーションは私も以前からお世話になっていたのですが
自分で使ってみてどのページを見ているのか判りにくいなとおもっていたので
このCSS非常に助かります。

早速使わせていただきました、ありがとうございました

Comment Form

Trackbacks:2

TrackBack URL for this entry
http://www.otogawa.com/cms/mt-tb.cgi/139
Listed below are links to weblogs that reference
ページナビゲーション css from px*blog
CSSのメリット スタイルシートで作業効率アップ from CSSのメリット スタイルシートで作業効率アップ 2007-06-23 (土) 20:02
CSSは、主にウェブページの修飾の指定をするための言語で、W3Cによる勧告の一つです。このCSSは、HTML文書の中に組み込むこともできますし、HTML文書と独立させて使うこともできます。
色々導入・カスタマイズ.その3 from Az ::clivia:: 2008-01-15 (火) 02:46
ブログ公開から少しずつ日が経つにつれて「アレもコレも」と弄くりまわして「あーでもないこーでもない」と旦那の休みも終わり通常の生活に戻ったのをいいことに独りごとをブツブツ言いながらパソコンの前にいる人...