2004-01-24

【元記事：sectionモジュールのスタイルいじり：d:id:manpukuya:20040124:p3

】

sectionモジュールへの反響について、d:id:danjou:20040123さんは、「リリース直後からすごい反響でめちゃくちゃうれしいです」「（要望の）すべてに対応できるかはちょっとわかりませんが、がんばります」とのことで頼もしい。よろしくお願いいたします。

さて、現状のsectionモジュールで各項目に番号をふれないかと考えて、下のようなスタイルシートを書いてみた。

2004/01/27追記：sectionモジュールを番号つきリストで表示する方法は、「<hatena name="section" template="list">」などと書くことによって実装されました（キーワード「sectionモジュール」を参照してください）。以下は、あえて「template="list"」と書かずに、番号つきリストとして表示する方法の解説としてご覧ください。

sectionモジュールを入れる部分は「<div id="section"><hatena name="section" …></div>」としておき、sectionモジュールをほかのモジュールと区別している。

#section div.recentsubtitles a{
display:list-item;       /*それぞれの見出しをリストとして表示するよう指定*/
list-style-type:decimal; /*リストの先頭のマーカーを数字に指定*/
}
#section div.recentsubtitles br
{display:none;} /*br要素を非表示にすることで、1行ごとの余分な改行を抑止*/

しかし、数字は表示されない。Operaで確認しても表示結果は同じだから、IEだけのことではなさそうだ。

id:iserさんのところでは、sectionモジュールがちゃんとリストとして表示されている。スタイルシートを覗かせていただいた限りでは、自分の知らないスペシャルな技が使われているというわけでもなさそう。

自分のスタイルシートでは、どこかほかの指定にバッティングしているのだろうか。うー、わからない。番号つきのリスト化は、いったん保留にしよう。

以下は追記です

id:iserさんが、さっそくご自分のスタイルシートを解説してくださいました。なるほど、私のはリストのマーカーが領域の左にあふれ出てしまっていたのですね。勉強になりました。

私はmarginを細かく調整するのはやめて、「list-style-position:inside;」ですませることにしました。「list-style-position」プロパティと「list-style-type」プロパティは「list-style」というプロパティにまとめて書けますので、「list-style:inside decimal;」ということになります。

つまり、以下のように指定しました。

#section div.recentsubtitles a{
display:list-item;         /*それぞれの見出しをリストとして表示するよう指定*/
list-style:inside decimal; /*リストの先頭のマーカーを、領域の内側に、数字で表示するよう指定*/
}
#section div.recentsubtitles br
{display:none;} /*br要素を非表示にすることで、1行ごとの余分な改行を抑止*/