アメブロ向上企画書ーCSSでカスタマイズ、オリジナルなスキンに挑戦！ -323ページ目

ブログ画像一覧を見る

このブログをフォローする

<< 前のページへ最新 | 321 | 322 | 323 | 324 | 325 | 最初次のページへ >>

CSS ページ・ナンバー・ナビゲーション2

サイドのメニュータイトルの画像が出来ていませんので・・・・

先にこちらを・・・・・　こんなお遊びはいかがでしょうか？

2 ということで・・・

1 は・・・・？2007/12/03　CSS ページ・ナンバー・ナビゲーション

今度は前ページ・次ページを画像にしちゃいます

見本ページはhttp://ameblo.jp/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;
}