スマートフォン用の表示で見る

はてなダイアリーガイド「CSSセレクタ - アンテナ型モジュール」

はてなダイアリーガイド「CSSセレクタ - アンテナ型モジュール」

アンテナ型(なにかの最新情報をリスト表示するタイプ)のモジュールのセレクタです。ここではantennaモジュールで説明しますが、sectionモジュールhoturlモジュールなどもほぼ同じ構造です。一部違うので図の注意書きを読んでください。

モジュールの設置方法については、ヘルプ - antennaモジュールからご覧ください。かんたんデザイン設定で作った方はぜひ一度。

モジュール用のタグに「template="hatena-module"」が入っているとき(かんたんデザイン設定で作った場合は入っています)と、入っていないときでは、構造がぜんぜん違います。入っている方がデザインをかっちり作り込めるでしょう。

template属性あり

  • 【注意】モジュール用のタグに「template="hatena-module"」が入っているときは、各モジュールでセレクタの違いがあります。この図では"hatena-antenna"となっている部分が、「sectionモジュール」なら"hatena-section"、「hoteanモジュール」なら"hatena-hotean"といった具合です。
    • ただし例外として、commentモジュールとtrackbackモジュールは共に"hatena-recentcomment"を使います。なお同じセレクタになってしまうため、commentモジュールとtrackbackモジュールでデザインを変えるには工夫が必要です。
  • 【補足】日時とタイトルの間は基本的に改行しません(改行させる指定はこちら)。この図で改行しているのは、時刻が長くて幅いっぱいだから。

template属性なし

  • 【補足】モジュール用のタグに「template="hatena-module"」が入っていないときは、同型のモジュールは項目部分を除きすべて同じ構造です。
  • 【補足】antennaモジュールとrssモジュールの場合、日時とタイトルの間に改行タグが入っているので、必ず改行します。しかしcommentモジュールとtrackbackモジュールの場合、日付と名前の間に改行タグは入っていないので、基本的に改行しません[]。

HTML構造概略

以下の概略はantennaモジュールの場合です。モジュールによって若干異なります。

template属性あり

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

template属性なし

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

div.hatena-module

モジュール全体。このセレクタに関するなにか小技情報などがあればここに載せてください。

[戻る▲]

div.hatena-moduletitle

モジュールのタイトル。一部のモジュールを除き関連ページへのリンクが付いています。

[戻る▲]

div.hatena-modulebody

モジュールのリスト全体を包括しています。

[戻る▲]

div.hatena-modulebody ul(ul.hatena-antenna)

モジュールのリスト。

「日記の中に他にもいくつかモジュールがあるけど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;
}

[戻る▲]

div.hatena-modulebody li(ul.hatena-antenna li)

モジュールの各項目。

「日記の中に他にもいくつかモジュールがあるけど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』の方には別の指定をします。

[戻る▲]

div.hatena-modulebody li a(ul.hatena-antenna li a)

更新されたページへのリンク。モジュールごとに見栄えを変える場合は

日記の中にいくつもモジュールがあって、それらすべてに指定する場合は

を使います。

「template="hatena-module"」のantennaモジュールでリンク部分を改行する

ブロック要素は前後が改行されるのを利用する方法です。

ul.hatena-antenna li a {display: block;}

[戻る▲]


p.recentitem

モジュールのタイトル。

[戻る▲]

div.recentsubtitles

モジュールの項目全体を包括しています。

[戻る▲]

div.recentsubtitles strong

モジュールの項目行頭の「数字」。

[戻る▲]

div.recentsubtitles (まんま)

ここはdiv.recentsubtitlesのまんまです。更新日時の部分だけを変えたい時はこの「div.recentsubtitles」を使い、「div.recentsubtitles strong」「div.recentsubtitles a」のほうには別の指定をします。

[戻る▲]

div.recentsubtitles a

更新されたページへのリンク。

  • div.recentsubtitles a

[戻る▲]