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

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




２０１３年７月２１日現在、記事下のページナビ部分に修正が
入ったようなので、ページナビを画像にしている方は下記を参照
してください。

http://ameblo.jp/new-blue-777/entry-11577369459.html





●　概要

　①　記事を指定したページの場合は、下記の様になりますが、

　　　記事名　　記事一覧　　記事名

　　　この記事のＣＳＳを使った場合、下記の様になってしまいますので
　　　注意してください。（記事名がなくなる）

　　　前ページ画像　　記事一覧　　次ページ画像

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

　③　この記事のＣＳＳでは、一覧ページのページナビも変わります。
　　　一覧のページナビのみ変えたい場合は下記です。

　　　●　記事作成中


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


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








ボタン画像作成は、下記を利用
http://box.aflat.com/buttonmaker/




◆　ページナビを画像にする


①　ページナビの画像化

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