しなもんページャ作ったった
え〜っと、まず表題に偽りありです。
しなもんページャは作れませんでした _| ̄|○
カウンターを作っただけです。
元ネタはこちらから
本当は元ネタの通り 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 でまとめました。
別バージョンのカウンター
1つだけでは面白くないので、もう一つ作ってみました。
表示のズレがありましたので、修正しました(最終更新 2006/07/13)
こちらの設定は
span.hatena-counter{ height: 61px; font-size: 61px; font-family:serif; background: url(http://rikuo.g.hatena.ne.jp/files/rikuo/636f8da6f13dbbfc.gif) no-repeat left 100%; padding: 0 0 0 42px; 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: 61px; font-size: 61px; background: url(http://rikuo.g.hatena.ne.jp/files/rikuo/56f839c541cec520.gif) no-repeat right 100%; padding: 0 22px 0 0; margin: 0; vertical-align: text-top; } span.hatena-counter img{ margin: 30px 0 0 0; _margin: 37px 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/56f839c541cec520.gif) no-repeat right 100%; padding: 0 22px 0 0; margin: 0; } span.hatena-counter a{ height:auto; display:block; background: url(http://rikuo.g.hatena.ne.jp/files/rikuo/cce7d8646b01844f.gif) no-repeat left 100%; padding: 35px 0 10px 42px; font-size: 16px; margin: 0; vertical-align: text-bottom; } span.hatena-counter span.hatena-counter{ background: none; padding: 0; font-size: 100%; }
<div class=mycounter> <hatena name="pv" template="hatena-module"> </div>
div.mycounter{ background: url(http://rikuo.g.hatena.ne.jp/files/rikuo/56f839c541cec520.gif) no-repeat right 100%; padding: 0 22px 0 0; margin: 0; } div.mycounter span.hatena-counter{ height:auto; display:block; background: url(http://rikuo.g.hatena.ne.jp/files/rikuo/cce7d8646b01844f.gif) no-repeat left 100%; padding: 35px 0 10px 42px; font-size: 16px; margin: 0; vertical-align: text-bottom; }
となります。
また、他のパターンもおいおい追加してこうかなと思っています。
任意のカウンター画像を使う場合
上のパターンですと corgi_white を使ったカウンターにしていますが、それ以外の画像を使うということも出来ます。
例えば id:fou さんが制作された dots_black で しなもんカウンターにするには、
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{ height: auto; display: block; background: url(http://rikuo.g.hatena.ne.jp/files/rikuo/d8fe488d5ac34233.gif) no-repeat left 100%; padding: 45px 0 8px 26px; font-size: 16px; margin: 0; vertical-align: text-bottom; } span.hatena-counter img{ border: 0; } span.hatena-counter span.hatena-counter{ background: none; padding: 0; font-size: 100%; }
とすることで、表示できます。
![](http://rikuo.g.hatena.ne.jp/files/rikuo/59b480bd7af6c738.gif)
もちろん他のカウンター画像でも利用できます、また表示位置などは適宜 変更して下さい。
スケルトンなカウンター
セクシーな透け透け画像です(違う)。
これは、特に決まった画像を用意していないので、好きなカウンター画像を設定できます。ここでは上でも紹介した dots_black に設定しました。
設定方法については、はてなグループキーワードに書いたのでそちらを参考にして下さい。
><