今回は、もともとの目的やった、Googleで検索したときに、ページ下部にある・・・ページャーっていうんですか、アレを作ります。
まぁ、まったくおんなじやと、Googleさんに怒られそうなので、雰囲気だけパクります。
Googleフォントを手に入れる
1）っといっても、実際Googleに使われてるロゴはCatullっていう有料のフォントなので、下記のページよりロゴを作成してください。
[参考サイト]
2）今回は、ワシの名前「Rappan」で作成しました。気に入った色にならないときは、気に入った4色になるまでいじってみるといいです。
画像を分割する
1）まずはロゴがそのままでは大きいので、Photoshop等で小さくします。高さ110pxを40pxにしました。
2）いよいよ画像の分割です。Rappanの場合「p」はリンクのページと現在のページの2色使います。「Ra」と「an」は、1パターンづつです。そうそう「p」の下には画像のようにページの数字が入るのでその分、全体下に伸ばして分割してください。（赤枠が数字の入る部分）
3）用意したのは左から、前に戻る「before.gif」、左端のロゴ「left.gif」、リンクページ「link_background.gif」、現在ページ「background.gif」、右端のロゴ「right.gif」、次に進む「next.gif」の6点です。
そしてロゴのガタガタ感をなくす為に、全部のロゴは画像の高さを同じにしておきます。（わかりやすいようにバックはピンクの色をつけてあります。）
4）そしてそれらをUPしておきます。うちの場合はimageフォルダにUPしました。
プラグインPageBute.plをいじる
PageBute.plを開き、190行191行を下記のように書き換えます。
my $page_link_format = '<li><a href="%%URL%%" class="%%CLASS_NAME%%">%%LINK_NAME%%</a></li>';
my $page_static_fromat = '<li class="current_page">%%LINK_NAME%%</li>';
メインページのソース書き換え
前回記述した<div>タグの部分のみ、下記に書き換えます。書き換えることによって、実際ページャーが表示されたページには、<span>タグが混ざらないソースとなるワケです。
<div class="content-nav">
<ul>
<mt:ifPageBefore>
<$mt:PageBefore delim="前へ"$>
</mt:ifPageBefore>
<li class="left"></li>
<$mt:pageLists delim=""$>
<li class="right"></li>
<mt:ifPageNext>
<$mt:PageNext delim="次へ"$>
</mt:ifPageNext>
</ul>
</div>
スタイルシートに記述する
下記のように記述します。ページの数字や文字は、画像の上から38pxの位置にくるようにしました。
div.content-nav{
margin:0 0 0 80px;
}
div.content-nav ul{
margin: 0;
padding: 0;
}
div.content-nav ul li{
list-style-type: none;
float: left;
margin-right: 2px;
font-size: 12px;
}
div.content-nav li.left{
display: block;
background-image: url(image/left.gif);
width: 40px;
height: 54px;
}
div.content-nav li.right{
display: block;
background-image: url(image/right.gif);
width: 35px;
height: 54px;
}
div.content-nav li a.link_before{
display: block;
background-image: url(image/before.gif);
width: 35px;
height: 16px;
text-align: center;
padding: 38px 0px 0px 0px;
}
div.content-nav li a.link_next{
display: block;
background-image: url(image/next.gif);
width: 35px;
height: 16px;
text-align: center;
padding: 38px 0px 0px 0px;
}
div.content-nav li.current_page{
display: block;
background-image: url(image/link_background.gif);
width: 17px;
height: 16px;
color: #ff6600;
text-align: center;
padding: 38px 0px 0px 0px;
}
div.content-nav li a.link_page{
display: block;
background-image: url(image/background.gif);
width: 17px;
height: 16px;
color: #1a1a19;
text-align: center;
padding: 38px 0px 0px 0px;
}
再構築して出来上がり。
どうです？なかなかいいでしょ？パクりですけど。
