in between days

表参道で働くシニアのブログ

リングロゴを横に並べるときのTIPS

はてなリング日記 - リングロゴが横に並べられるようになりました

に従って複数ロゴを並べてみたら、こんなんなってしまいました。

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のなかのモジュールごとに違ったスタイルにするためのクラスとかが無い。これが何の意図で無いのかよくわかんないんだけど*2ringモジュールだけほかと違うのはイヤ〜ンというひともいるかもしれない。

そういう場合は「ページのフッタ」欄にこう追加するとよいんじゃないでしょうか。

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

てゆかこのダイアリーはそんなんにしてみました。振った山椒 フッタ参照。

*1:これはなんの数字なんだろう? オレは“55”なんだけど

*2:逆にcalendarモジュールではわざわざ付加されれて、その意図もわからない、ってしつこなオレも