はてなリング日記 - リングロゴが横に並べられるようになりました
に従って複数ロゴを並べてみたら、こんなんなってしまいました。
templateが無指定だとインライン要素になるので、その前後にたまたま別のインライン要素（この場合はcounterモジュール）があると改行されないでくっついて表示されてしまうんですね。
だから、この表示をするときには全体がブロック要素になるようにpタグとかdivタグでくくってやる必要がある。見かけ上template="hatena-module"のときと互換を持たせたいならばdiv class="hatena-module"でくくるといいだろう。
それから、サンプルにあるmode="thumbnail"は、アイコンが同じサイズでなくていいなら不要。代わりに謎のパラメータsidは必須みたいなので忘れちゃダメみたい*1。
ということで、実際に「ページのフッタ」欄にはこんな感じで書き入れるとよさげ。
<div class="hatena-module"> <div class="hatena-modulebody"> <hatena name="ring" rid="ringname1" sid="xx"> <hatena name="ring" rid="ringname2" sid="xx"> </div></div>
応用というか疑問というか
ところで、ringモジュールのhatena-moduleテンプレートが吐き出すHTMLはちょっとほかと違ってる。hatena-moduleテンプレートにすると、ふつうなら「モジュールタイトル」が付く。例えばprofileモジュールならこんなHTMLを吐く。
<div class="hatena-module">
<div class="hatena-moduletitle">profile</div>
<div class="hatena-modulebody">
<div class="hatena-profile">
(プロフィール本体は省略)
</div>
</div>
</div>だけどringモジュールではhatena-moduletitleクラスとかhatena-modulebodyのなかのモジュールごとに違ったスタイルにするためのクラスとかが無い。これが何の意図で無いのかよくわかんないんだけど*2、ringモジュールだけほかと違うのはイヤ〜ンというひともいるかもしれない。
そういう場合は「ページのフッタ」欄にこう追加するとよいんじゃないでしょうか。
<div class="hatena-module"> <div class="hatena-moduletitle">rings</div> <div class="hatena-modulebody"> <div class="hatena-ring"> <hatena name="ring" rid="ringname1" sid="xx"> <hatena name="ring" rid="ringname2" sid="xx"> </div></div></div>
てゆかこのダイアリーはそんなんにしてみました。振った山椒 フッタ参照。
