一覧ページのページナビ（前ページ・次のページ）を画像にする

★　一覧ページのページナビ（前ページ・次のページ）を画像にする


★　注意点

　①　フォーカスは、Tabキー又は、Shift+Tabキーでフォーカス移動を
　　　したときの状態です。

　②　この記事のＣＳＳでは、一覧ページのみが変わります。
　　　記事部分を変えたい場合は下記を参照


　　　●　ページナビ（前ページ・次のページ）を画像にする


　③　ロールオーバーしたくない場合は、ロールオーバしない画像と
　　ロールオーバー画像を同じにすればＯＫです


　④　使用画像例（100px × 25px)









◆　ページナビを画像にする（一覧ページ）


①　ページナビの画像化

/* ------------------------------------------------------- */
/* 前ページを画像に（一覧のページ）　　　　　　　　　　　　*/
/* ------------------------------------------------------- */
.listPagePaging .pagingPrev{
background-image:url(画像のＵＲＬ);
background-repeat:no-repeat;
background-position:right center;
background-color:transparent;
border:none;
width:75px;/* 幅（調整要) */
text-indent:-8000px;
}
.listPagePaging .pagingPrev:hover,
.listPagePaging .pagingPrev:focus{/* カーソルを乗せた時（ロールオーバー） 及び フォーカス時 */
background-image:url(画像のＵＲＬ);
background-repeat:no-repeat;
background-position:right center;
background-color:transparent;
border:none;
width:75px;/* 幅（調整要) */
}
/* ------------------------------------------------------- */
/* 次ページを画像に（一覧のページ）　　　　　　　　　　　　*/
/* ------------------------------------------------------- */
.listPagePaging .pagingNext{
background-image:url(画像のＵＲＬ);
background-repeat:no-repeat;
background-position:right center;
background-color:transparent;
border:none;
width:75px;/* 幅（調整要) */
text-indent:-8000px;
}
.listPagePaging .pagingNext:hover,
.listPagePaging .pagingNext:focus{/* カーソルを乗せた時（ロールオーバー） 及び フォーカス時 */
background-image:url(画像のＵＲＬ);
background-repeat:no-repeat;
background-position:right center;
background-color:transparent;
border:none;
width:75px;/* 幅（調整要) */
}