別バージョンのカウンター
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; }
となります。
また、他のパターンもおいおい追加してこうかなと思っています。