はてなリング

面白そうだったので、はてなリングを設置してみた。
　

• はてなリングのバナーを貼り付ける(ringモジュール) / はてなダイアリーのヘルプ
• リングロゴが横に並べられるようになりました / はてなリング日記
• はてなリングアイコン、ロゴを並べる方法 / スナックレッド[別館]の日記。〜Awareness of My Ignorance〜
• リングロゴを横に並べるときのTIPS / id_mohri daiarii
• エウレカセブンを見ようと思ってた人の日記。/ zenshinの日記
• はてなリングロゴを小さくして横に並べるTips / Yunyの鉄は、熱いうちに鍛て。

　
上記の記事を参考に、リングロゴ(画像)を横並びにして、サイズを指定して、
尚且つナビゲーションが開く位置も指定してみた。
　

• HTML(ページのヘッダ or ページのフッタ)

<div id="hatena-ring-window-box"><div id="hatena-ring-window"> </div></div> <hatena name="ring" rid="リング名" sid="個別のID" mode="thumbnail"> <hatena name="ring" rid="リング名" sid="個別のID" mode="thumbnail"> <hatena name="ring" rid="リング名" sid="個別のID" mode="thumbnail"> <br clear=left><br> <div id="hatena-ring-window-place"> </div>

• CSS(スタイルシート)

span#hatena-ring-個別のID img{ width:○○px; height:○○px; float:left; } div#hatena-rings { position : relative; width : 150px ; text-align : center; } div#hatena-ring-window-box { position : absolute; bottom : 0px; right : 0px; width : 200px ; height : 3em ; } div#hatena-ring-window-place { clear : both ; height : 3em ; }

　
なんか見た目的には同盟バナー貼ったみたいで楽しいかも。