アンテナ型(なにかの最新情報をリスト表示するタイプ)のモジュールのセレクタです。ここではantennaモジュールで説明しますが、sectionモジュールやhoturlモジュールなどもほぼ同じ構造です。一部違うので図の注意書きを読んでください。
モジュールの設置方法については、ヘルプ - antennaモジュールからご覧ください。かんたんデザイン設定で作った方はぜひ一度。
モジュール用のタグに「template="hatena-module"」が入っているとき(かんたんデザイン設定で作った場合は入っています)と、入っていないときでは、構造がぜんぜん違います。入っている方がデザインをかっちり作り込めるでしょう。
以下の概略はantennaモジュールの場合です。モジュールによって若干異なります。
<div class="hatena-module"> <div class="hatena-moduletitle"><a>アンテナのタイトル</a></div> <div class="hatena-modulebody"> <ul class="hatena-antenna"> <li>日時 <a>タイトル</a> <li>日時 <a>タイトル</a> <li>日時 <a>タイトル</a> </ul> </div> </div>
<p class="recentitem"><a>アンテナのタイトル</a></p> <div class="recentsubtitles"> <strong>1</strong>. 日時<br> <a>タイトル</a><br> <strong>2</strong>. 日時<br> <a>タイトル</a><br> <strong>3</strong>. 日時<br> <a>タイトル</a><br> </div>
モジュール全体。このセレクタに関するなにか小技情報などがあればここに載せてください。
[戻る▲]
モジュールのタイトル。一部のモジュールを除き関連ページへのリンクが付いています。
[戻る▲]
モジュールのリスト全体を包括しています。
[戻る▲]
モジュールのリスト。
「日記の中に他にもいくつかモジュールがあるけどantennaモジュールのリストだけを変えたい」というときは、『ul.hatena-antenna』を使います。sectionモジュールなら『ul.hatena-section』、hoteanモジュールなら『ul.hatena-hotean』という具合に変わります。モジュールごとに見栄えを変えたい時に。
そうではなく、すべてのモジュールのリストになっている部分に一括で設定したい時は『div.hatena-modulebody ul』を使います。
通常は各項目の頭に何も表示されませんが、「template属性なし」のように番号を付けたい場合は
div.hatena-modulebody ul.hatena-antenna { display: list-item; list-style: decimal inside; }
あるいはリストらしく黒丸「・」を付けたい場合は
div.hatena-modulebody ul.hatena-antenna { display: list-item; list-style: disc inside; }
[戻る▲]
モジュールの各項目。
「日記の中に他にもいくつかモジュールがあるけどantennaモジュールのリストだけを変えたい」というときは、『ul.hatena-antenna li』を使います。sectionモジュールなら『ul.hatena-section li』、hoteanモジュールなら『ul.hatena-hotean li』という具合に変わります。モジュールごとに見栄えを変えたい時に。
そうではなく、すべてのモジュールのリスト内の項目に一括で設定したい時は『div.hatena-modulebody li』を使います。
また、更新日時の部分だけを変えたい時はこの『div.hatena-modulebody li』を使い、『div.hatena-modulebody li a』の方には別の指定をします。
[戻る▲]
更新されたページへのリンク。モジュールごとに見栄えを変える場合は
日記の中にいくつもモジュールがあって、それらすべてに指定する場合は
を使います。
ブロック要素は前後が改行されるのを利用する方法です。
ul.hatena-antenna li a {display: block;}
[戻る▲]
モジュールのタイトル。
[戻る▲]
モジュールの項目全体を包括しています。
[戻る▲]
モジュールの項目行頭の「数字」。
[戻る▲]
ここはdiv.recentsubtitlesのまんまです。更新日時の部分だけを変えたい時はこの「div.recentsubtitles」を使い、「div.recentsubtitles strong」「div.recentsubtitles a」のほうには別の指定をします。
[戻る▲]
更新されたページへのリンク。
[戻る▲]