え〜っと、まず表題に偽りありです。
しなもんページャは作れませんでした ＿|￣|○
カウンターを作っただけです。
元ネタはこちらから
本当は元ネタの通り archiveページ や日記の上下にある「< 前の3日分」といった部分（ページャ）に装飾をしたかったのですが、どうも巧いやり方が思いつかなかったので、とりあえずカウンターで表現しました。
画像を使ったカウンターもそうですが、画像を使わずテキストのカウンター、またPVモジュールにも対応しています。ちなみに、このPVモジュールは g:rikuo:id:rikuo に設置しています。
表示のズレがありましたので、修正しました（最終更新 2006/07/13）
設定方法としては、はてなカウンターで corgi_white を選択してもらって
そしてスタイルシートに
span.hatena-counter{
height: 71px;
font-size: 71px;
font-family:serif;
background: url(http://rikuo.g.hatena.ne.jp/files/rikuo/8cd8481ed6a16d2c.gif) no-repeat left 100%;
padding: 0 0 0 26px;
margin: 0;
vertical-align: text-top;
line-height: 1;
}
span.hatena-counter span.hatena-counter{
background: none;
padding: 0;
font-size: 100%;
}
span.hatena-counter a{
height: 71px;
font-size: 71px;
background: url(http://rikuo.g.hatena.ne.jp/files/rikuo/0356a263cbd3afda.gif) no-repeat right 100%;
padding: 0 55px 0 0;
margin: 0;
vertical-align: text-top;
}
span.hatena-counter img{
margin: 40px 0 0 0;
_margin: 47px 0 0 0;
padding: 0;
vertical-align: text-top;
border: 0;
}
と追加してください。
また画像はこのリンクでもいいですが、ご自分のフォトライフ・サーバーなどに自由に転載して構いません。
画像を使わず、テキストでのカウンターでは
span.hatena-counter{
display: block;
background: url(http://rikuo.g.hatena.ne.jp/files/rikuo/0356a263cbd3afda.gif) no-repeat right 100%;
padding: 0 55px 0 0;
margin: 0;
}
span.hatena-counter a{
display: block;
background: url(http://rikuo.g.hatena.ne.jp/files/rikuo/d8fe488d5ac34233.gif) no-repeat left 100%;
padding: 45px 0 12px 26px;
font-size: 16px;
margin: 0;
vertical-align: text-bottom;
}
span.hatena-counter span.hatena-counter{
background: none;
padding: 0;
font-size: 100%;
}となります。
尚、テキストでカウンターを表示させた場合、Javascriptオフでは表示されませんが、これは はてなカウンターの仕様なので*1ご了承下さい。
PVモジュールの場合では
<div class=mycounter> <hatena name="pv" template="hatena-module"> </div>
モジュールの前後に任意のタグで囲み
div.mycounter{
background: url(http://rikuo.g.hatena.ne.jp/files/rikuo/0356a263cbd3afda.gif) no-repeat right 100%;
padding: 0 55px 0 0;
margin: 0;
}
div.mycounter span.hatena-counter{
height: auto;
display: block;
background: url(http://rikuo.g.hatena.ne.jp/files/rikuo/d8fe488d5ac34233.gif) no-repeat left 100%;
padding: 45px 0 12px 26px;
font-size: 16px;
margin: 0;
vertical-align: text-bottom;
}
と設定して下さい。
あんまり胴長になるとちょっとカッコ悪いので、桁数や幅などは適宜 調節した方がいいですね。それに会長も「そんなに胴長くないよ」と仰ってますし。
また IE6、Firefox、Operaで表示確認は行いました。
ですが表示幅が狭過ぎたり、Javascriptがオフではキレイに表示されません。もちろんそれらでは表示は崩れますがカウンターそのものはちゃんと表示されます。
[どうぞご利用ください。]
ただ id:jkondoさんの日記にもありますが、将来的にカウンターの前後に画像を用意できる機能が実装されたらもっと簡単にできるかもしれませんけれども。
追記：カウンターについてはグループキーワード layout:rikuo:counter でまとめました。
