[ブログデザインのカスタマイズ記録] 「1 | 2 | 3 | 4 | 5 |」だけを消してみた

（これは私はこうやった、というメモ程度の内容です。いつものようにけっこう７めんどうなことをしているので関係なければ読まなくてもいいような内容です)

「次のページへ」とか「最初から」は画像表示になるのに、1.2.3.4.5.がどうにもうまくできない。

.....というわけで、

1 | 2 | 3 | 4 | 5 | 次ページ>>

の、

1 | 2 | 3 | 4 | 5 |

だけ消しちゃいました。

消したらもとが旧カスタム可能ベーシックなのになにげに新デザインっぽくなった、かもしれない。

.page{text-indent:-9999px;}

.page a{display:none;}
.page a:hover{display:none;}
.page .now{display:none;}

まずはこれくらい思いっきりやっておけば、それ系の表示は消えます。

ただこれだと「次のページへ」とかも消えてしまうので、

ちょっといい感じになるよう書き換えてみた。

.page{
height:150px;

background-image:url(http://stat001.ameba.jp/user_images/20120521/22/ayanatsuki440/87/27/p/o0100010011986205472.png );

background-repeat:repeat;/*繰り返す*/

background-position:right bottom;/*配置*/

border:3px ridge #202020;

}
/*ページナビ画像化*/

.page{position:relative;
}

.page a.firstPage, .page a.previousPage,
.page a.nextPage, .page a.lastPage{

position:absolute;

display:block;

text-indent:-9999px;

}

.page a.firstPage{/* 最新 */

width:135px;
height:135px;
left:15px;
bottom:0px;
background:url(「最初から」の画像) no-repeat;

border:none;
}
.page a.previousPage{ /* 前ページ */
}
width:135px;
height:135px;
left:165px;
bottom:0px;
background:url(「前のページへ」の画像) no-repeat;

border:none;
}
.page a.nextPage{ /* 次ページ */
width:135px;
height:135px;
right:165px;
bottom:0px;
background:url(「次のページへ」の画像) no-repeat;

border:none;
}
.page a.lastPage{ /* 最初 */

width:135px;
height:135px;
right:15px;
bottom:0px;
background:url(「最初から」の画像) no-repeat;

border:none;
}

あとは4つのクラスについて:hoverの記述を加え、

.readerMainLink{display:none;}で読者云々の部分も消せばそれなりの表示になりました。

X∞