CSS ページ・ナンバー・ナビゲーション2
サイドのメニュータイトルの画像が出来ていませんので・・・・
先にこちらを・・・・・ こんなお遊びはいかがでしょうか？
2 ということで・・・
1 は・・・・？2007/12/03 CSS ページ・ナンバー・ナビゲーション
今度は前ページ・次ページを画像にしちゃいます
見本ページはhttp://hama-sush-jp.pro/exlink001/
ここのサイトも替えちゃいました・・・クリップの画像ですがどうでしょう？
<< と <前のページ と 次のページ> と >> の4つの画像を用意します
（33px×20px） 
(46px×20px) 
/*ページナンバーナビ*/
.topPaging{
margin: 0px auto 10px auto;/*注1*/
width:360px;/*全体の幅注2*/
position:relative;
text-align:center;
}
.topPaging a.firstPage{/*最初のページへ*/
background:url(画像のURL) top center no-repeat;
display:block;
width:33px;/*画像の横*/
height:20px;/*画像の縦*/
text-indent:-9000px;
position:absolute;
top:0px;
left:0px;/*左からの位置注2*/
}
.topPaging a.previousPage{/*前のページへ*/
background:url(画像のURL) top center no-repeat;
display:block;
width:46px;/*画像の横*/
height:20px;/*画像の縦*/
text-indent:-9000px;
position:absolute;
top:0px;
left:45px;/*左からの位置注2*/
}
.topPaging a.nextPage{/*次のページへ*/
background:url(画像のURL) top center no-repeat;
display:block;
width:46px;/*画像の横*/
height:20px;/*画像の縦*/
text-indent:-9000px;
position:absolute;
top:0px;
right:45px;/*右からの位置注2*/
}
.topPaging a.lastPage{/*最後のページへ*/
background:url(画像のURL) top center no-repeat;
display:block;
width:33px;/*画像の横*/
height:20px;/*画像の縦*/
text-indent:-9000px;
position:absolute;
top:0px;
right:0px;/*右からの位置注2*/
}
注1 の位置関係 （ margin: 上 右 下 左 ）
注2 の位置関係
※多く記事を書かれていてページ数が３桁の方は古い記事を表示しているときでも
前のページへ、次のページへ がページナンバーに重ならないよう確認下さい
/*ページナンバーナビ*/
.articlePaging,
.topPaging{
margin: 0px auto 10px auto;/*注1*/
width:360px;/*全体の幅注2*/
position:relative;
text-align:center;
}
.articlePaging a.previousPage,
.topPaging a.previousPage{/*前のページへ*/
background:url(画像のURL) top center no-repeat;
display:block;
width:46px;/*画像の横*/
height:20px;/*画像の縦*/
text-indent:-9000px;
position:absolute;
top:0px;
left:45px;/*左からの位置注2*/
}
.articlePaging a.previousPage,
.topPaging a.nextPage{/*次のページへ*/
background:url(画像のURL) top center no-repeat;
display:block;
width:46px;/*画像の横*/
height:20px;/*画像の縦*/
text-indent:-9000px;
position:absolute;
top:0px;
right:45px;/*右からの位置注2*/
}
↑前のページと次のページの頭に赤字部分を加えてください
※前の記事・次の記事、みたいに別の画像を作っても面白いです
※表示する記事数が1の方は「前のページ」ではなく「前の記事」とかにしても
このサイトの場合、テキストはそのままで
この2つの画像を背景において、テキストの位置を画像に合わせています
.articlePaging{
margin: auto;
width:400px;
position:relative;
text-align:center;
}
.articlePaging a.previousPage{/*前の記事へ*/
background:url(画像のURL) top center no-repeat;
display:block;
width:159px;/*画像の横*/
height:20px;/*画像の縦*/
position:absolute;
top:0px;
left:0px;
text-indent:-30px;
}
.articlePaging a.nextPage{/*次の記事へ*/
background:url(画像のURL) top center no-repeat;
display:block;
width:159px;/*画像の横*/
height:20px;/*画像の縦*/
position:absolute;
top:0px;
right:0px;
text-indent: 30px;
}
