スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
web拍手 by FC2

Mr.ポンバシのブログ改造術part25-1


こんばんは!! Mr.ポンバシです(-^□^-)

Mr.ポンバシのブログ


今日は久々にブログ改造術の記事を書こうと思います。


ここ最近記事の更新率が低下しているどころか、改造術の記事をまったく書いていませんでしたからね(;´∀`)


ということで早速ですが内容のほうに移ろうと思います。


今日紹介するのは、メッセージでリクエストを頂きました、


"ページナンバーナビの改造方法"です!








ページナンバーナビとは何かというと、トップページ

Mr.ポンバシのブログ


この部分と、各記事ページ

Mr.ポンバシのブログ


この赤く囲っているような部分のことを指します。







これらを改造して、

Mr.ポンバシのブログ


Mr.ポンバシのブログ


このように改造する方法を説明いたします。






  1. まず、大きさの同じ画像を用意します。


    大きさについては、横幅は100px以内にしておいたほうがいいと思います。(縦幅は特に制限はありません)



  2. 次の記述をCSSの一番最後に追記してください

    /*ページナンバーナビ*/
    .articlePaging,.topPaging{
    position:relative;
    margin:0px 10px 110px 10px;/*赤字の部分は画像の縦幅と同じ値*/
    width:560px;/*⑧*/
    text-align:center;
    }

    .topPaging a.firstPage{/*①*/
    position:absolute;
    top:0px;
    left:0px;
    background:url(画像のURL);
    background-position:top center;
    background-repeat:no-repeat;
    display:block;
    width:100px;/*画像の横*/
    height:90px;/*画像の縦*/
    text-indent:-9000px;
    }

    .articlePaging a.previousPage,.topPaging a.previousPage{/*②,⑤*/
    position:absolute;
    top:0px;
    left:100px;/*⑨*/
    background:url(画像のURL);
    background-position:top center;
    background-repeat:no-repeat;
    display:block;
    width:100px;/*画像の横*/
    height:95px;/*画像の縦*/
    text-indent:-9000px;
    }

    .articlePaging a.nextPage,.topPaging a.nextPage{/*③,⑦*/
    position:absolute;
    top:0px;
    right:100px;/*⑩*/
    background:url(画像のURL);
    background-position:top center;
    background-repeat:no-repeat;
    display:block;
    width:100px;/*画像の横*/
    height:104px;/*画像の縦*/
    text-indent:-9000px;
    }

    .topPaging a.lastPage{/*④*/
    position:absolute;
    top:0px;
    right:0px;
    background:url(画像のURL);
    background-position:top center;
    background-repeat:no-repeat;
    display:block;
    width:100px;/*画像の横*/
    height:112px;/*画像の縦*/
    text-indent:-9000px;
    }

    .articlePaging a{/*⑥*/
    position:absolute;
    top:0px;
    right:225px;/*⑪*/
    background:url(画像のURL);
    background-position:top center;
    background-repeat:no-repeat;
    display:block;
    width:100px;/*画像の横*/
    height:119px;/*画像の縦*/
    text-indent:-9000px;
    }


    各番号が何を表しているかは、下の画像を参考にしてください。

    Mr.ポンバシのブログ


    Mr.ポンバシのブログ


    Mr.ポンバシのブログ


    Mr.ポンバシのブログ



以上で終わりです!


画像に使っているのは記事上のページナンバーナビだけで、記事下にも同様のものがありますが、上記の記述を書き込むことにより、両方とも改造することが可能ですのでご安心ください。


何か記述の誤り等がありましたら、コメントもしくはメッセージをください。


Mr.ポンバシのブログ


現在Rewriteの攻略も最後のルートの最中です!


今日中にはすべてのルートの攻略が終わると思います!


近いうちにレビューも書きますので楽しみにしておいてください(*´ω`*)


レビューの前に簡単な感想を次の記事で書くつもりです( ^ω^)


では(´∀`*)ノシ
スポンサーサイト
web拍手 by FC2

コメントの投稿

非公開コメント

1 ■無題

すげーーーー((((((ノ゚⊿゚)ノ
でも最近時間がなくて・・・どーしよー


てか画像の上にマウスを乗せるとかわいいきゃらが(´∀`)
これもすごいですw

2 ■無題

おおおーーーーヽ(*'0'*)ツ



今度、やってみます!!
・・・でも、最近時間がorz

3 ■久しぶりの

おぉ久々の改造ですね( ̄▽+ ̄*)

こんどブログ改造するときに参考にさせてもらいますかね!!


Rewrite最後のルートですか!!自分もですよ!
お互い頑張りましょう。

4 ■無題

おぉ!
時間が空いたらやってみようと思います^^

5 ■無題

ほう、こんなところも変えれるんですね!!

だがブログ弄る時間がないという…。

俺、この試験と課題が終ったらRewriteやるんだ……

6 ■無題

ありがとうございます!!!

さっそく使わせていただきまする!!!o(^▽^)o

7 ■無題

小鳥√って鬱なんだが……。
正確には鬱な時間が長すぎる

8 ■無題

久々のブログ改造ですね。

そういうことまでできてしまうとは・・・・!!!!

9 ■無題

こんなことまでできるようになるんですね~
REWRITE頑張ってください(^-^)

10 ■無題

おぉ!すごい!!
時間あるときに前回とかのブログ改造とかと合わせて使わせていただきます!
プロフィール

ポンバシ

はじめまして!Mr.ポンバシです。
呼び名は「ポンバシ」「ポンさん」などなどです ^ ^
2次元をこよなく愛しており、エロゲ、ギャルゲ、アニメ、ラノベなんでも話を振ってください。
コメントしてくれると天に昇る勢いで喜びますww


アクセスランキング
[ジャンルランキング]
ゲーム
9078位
アクセスランキングを見る>>

[サブジャンルランキング]
PCゲーム
1291位
アクセスランキングを見る>>

アクセスカウンター

カテゴリ

最新コメント

全記事表示リンク

全ての記事を表示する


月別アーカイブ

OHPバナー
紅い瞳に映るセカイ 応援中!!

「魔女こいにっき」応援中

恋がさくころ桜どき

すたじお緑茶『南十字星恋歌』応援中!

検索フォーム
RSSリンクの表示
リンク
ブロとも申請フォーム

この人とブロともになる

QRコード
QR
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。