ページング（画像を使う）

※ページング（線の色や背景や形を変える） ＣＳＳを修正しています !important が抜けていました
記事一覧とかのページで色が変わらない場合がありましたm(_ _)m

今度はページングを画像を使ってやってみます

注意！　↓どちらの場合も同じ画像に変わります


なので・・1ページ1記事表示でしたら　[<前の記事] [次の記事>]

1ページ3とか5記事表示でしたら [<前ページ] [次ページ>]　とした方が良いかも・・です

はじめにこのような画像を作ります


　　　 　

　　　

　　　 　

　　　

これらの画像は　ButtonMake 　で簡単に作ることが出来ます
↑上の画像はButtonMekeで作りましたのでお持ち帰りは不可です




ＣＳＳの最後に・・・


/*ページング*/
.pagingPrev, .pagingPrev:visited, .pagingPrev:focus{/*次へ*/
background-image:url(次への画像のＵＲＬ);
}
.pagingPrev:hover{/*次へマウスオーバー時*/
background-image:url(次への画像のＵＲＬ);
}
.pagingNext, .pagingNext:visited, .pagingNext:focus{/*前へ*/
background-image:url(前への画像のＵＲＬ);
}
.pagingNext:hover{/*前へマウスオーバー時*/
background-image:url(前への画像のＵＲＬ);
}
.skinSimpleBtn, .skinSimpleBtn:visited, .skinSimpleBtn:hover, .skinSimpleBtn:focus {
width:100px;/*画像の横*/
height:20px;/*画像の縦*/
top:2px;/*表示位置を下げるＡ*/
border:none;
background-repeat:no-repeat;
background-color:transparent;
text-indent:-9999px;
padding:0;
border-radius:0;
}
/*ページング記事一覧*/
.pagingList{
color:#000000;/*文字色*/
}
.pagingList;hover{/*記事一覧マウスオーバー時*/
color:#cccccc;/*文字色*/
text-decoration:none;/*りんくの下線を消す*/
}
.pagingPrev {/*次への位置*/
right: 300px;/*Ｂ*/
}
.pagingNext {/*前への位置*/
left: 300px;/*Ｃ*/
}