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要素(番号つきリスト)のほうがよかったような気もするが、それはそれ。さて、いろいろといじってみようかな。