はてなリングロゴが気に入らないので改造した

はてなリングのロゴは画像ではなく、Htmlで書かれている。これが幅を180px固定で指定されているため、サイドバーなどに設置しにくい。また、スタイルがHtmlで直接指定されているため、周りと色などが合わず気になった。スタイルを上書きしようと、コードを確認しようと思ったが、JavaScriptで動的にソースが吐かれるようになっているためソースを確認しにくい。

あまりにも気に入らなかったので、一般的なはてなモジュールのHtmlに合わせて改造したのが以下である。

<div class="hatena-module" id="hatena-ring">
	<div class="hatena-moduletitle">
		<a href="http://RINGNAME.ring.hatena.ne.jp/">?Ring RINGNAME</a>

	</div>
	<div class="hatena-modulebody">
		<div id="hatena-ring-window-RINGNAME">
			<ul>
				<li><a href="http://RINGNAME.ring.hatena.ne.jp/go?type=prev&sid=SID"><img alt="prev" src="http://ring.hatena.ne.jp/images/prev.gif">prev</a></li>
				<li><a href="http://RINGNAME.ring.hatena.ne.jp/go?type=random&sid=SID"><img alt="random" src="http://ring.hatena.ne.jp/images/random.gif">random</a></li>
				<li><a href="http://RINGNAME.ring.hatena.ne.jp/go?type=next&sid=SID"><img alt="next" src="http://ring.hatena.ne.jp/images/next.gif">next</a></li>

			</ul>
		</div>
	</div>
</div>

RINGNAMEはリング名、SIDはのアイコンをクリックして出るlogosourceのページを参照した。

のロゴ画像、および、の画像は必要性を感じなかったので省略した。"Hatena Ring"は個人的な好みで"?Ring"に記述を変えてある。div#hatena-ring-window-RINGNAMEは一応元のコードに合わせて加えたが、いらないかもしれない。

一応、IDを振ったので後からスタイルを書いて、通常のロゴスタイル風に変えることも可能である。

#hatena-ring{
	border:1px solid #666;
	width:180px;
	background: #1841CE;
	z-index:2000;
}
#hatena-ring a img{
	border:0;
}
#hatena-ring .hatena-moduletitle{
	background: #1841CE;
	padding:0;margin:0;
	text-indent:20px;
	background:url(http://ring.hatena.ne.jp/images/icon_home.gif) no-repeat no-repeat left center;
	text-align:left;
	border:none;
	font-size:12px;
	width:auto;
	font-family:"MS ゴシック",sans-serif;
}

#hatena-ring .hatena-moduletitle a{
	color:white;
	text-decoration:none;
	font-weight:bold;
}

#hatena-ring .hatena-modulebody{
	text-align:center;
	background:#FFF;
}

#hatena-ring-window-RINGNAME ul{
	pading:0;
	margin:0;
}

#hatena-ring-window-RINGNAME li{
	display:inline;
	font-size:10px;
	font-family:"MS ゴシック",sans-serif;
}

#hatena-ring-window-RINGNAME li a{
	padding:2px 5px;
	color:#000;
	text-decoration:none;
}