hatenaモジュールの「template="list"」属性によって、各モジュールに生成されるクラス名

【元記事:hatenaモジュールの「template="list"」属性によって、各モジュールに生成されるクラス名:d:id:manpukuya:20040126:1075042800

d:id:hatenadiary:20040126#1075122255にあるように、sectionモジュールを始めとする各種hatenaモジュールに、新たな属性を指定できるようになった。

モジュールに「template="list"」という属性を指定することで、<ul>〜</ul>タグ(ul要素)が生成される。面白いのは、モジュールごとに異なるクラス名がわりふられることだ。こういう方式にはメリットとデメリットがある。必要に応じて、この属性を使うか、それとも従来通りの表示方法を維持するかを選べばよいだろう。

モジュールごとのクラス名は、以下の通り。

2004年7月1日追記:これらのクラス名や出力されるHTMLは、2004年7月末日をもって変更されます。詳しくはd:id:hatenadiary:20040701#1088665611をご参照下さい。

アンテナ(「hatena name="antenna"」)
.hatena_antenna
最新キーワード(「hatena name="keyword"」)
.hatena_keyword
注目キーワード(「hatena name="hotkeyword"」)
.hatena_hotkeyword
最新質問(「hatena name="question"」)
.hatena_question
最新タイトル(「hatena name="section"」)
.hatena_section
注目URL(「hatena name="hoturl"」)
.hatena_hoturl
注目ISBN/ASIN(「hatena name="hotasin"」)
.hatena_hotasin

さて、これまでアンテナやキーワードのモジュールは、「1. 2. 3.…」という、番号つきリストで表示されていた。「template="list"」の指定によって生成されるタグは「<ul>〜</ul>」という、箇条書きのタグだ。

アンテナを「<hatena name="antenna" template="list">」としている場合、アンテナは箇条書きで表示される。これを番号つきリストで表示するには、スタイルシートを「.hatena_antenna{list-style-type:decimal;}」などとすればよい。これで、「1. 2. 3. …」という番号つきリストになる。

この「list-style-type」プロパティには、たくさんの値を指定できる。CSSの仕様書を見ると、list-style-typeプロパティの属性はとてもたくさんある。このうち、おもな値を紹介しておこう。

list-style-type:disc
黒丸
list-style-type:circle
白丸
list-style-type:square
四角
list-style-type:decimal
「1. 2. 3.…」という10進数
list-style-type:lower-roman
「i. ii. iii. iv. v.…」という、小文字のローマ数字
list-style-type:upper-roman
「I. II. III. IV. V.…」という、大文字のローマ数字
list-style-type:none
リストの先頭のマーカーを表示しない

リストの実体から考えると、生成されるHTMLはどちらかといえばul要素(箇条書き)よりも、ol要素(番号つきリスト)のほうがよかったような気もするが、それはそれ。さて、いろいろといじってみようかな。