別バージョンのカウンター

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%;
}





PVモジュール

<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;
}



となります。




また、他のパターンもおいおい追加してこうかなと思っています。