ガイドグループ世話人の日記

はてなダイアリーガイド

はてなダイアリーガイドの草稿置き場です。この日記へリンクはどこでもご自由にどうぞ。ガイドを作るガイドグループ参加もお気軽に*。グループに入らなくても、ガイドははてなダイアリー市民なら誰でも作成・編集できるものですのでよろしくどうぞ。

※MacOS9でInternetExplorerをお使いの方は、この日記にコメントを書き込もうとすると文字化けすることがあります。対処方法はこちらをご覧ください。

 | 

1906-01-13はてなダイアリーガイド「CSSセレクタ - アンテ

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

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

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

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

template属性あり

  • 【注意】モジュール用のタグに「template="hatena-module"」が入っているときは、各モジュールでセレクタの違いがあります。この図では"hatena-antenna"となっている部分が、「sectionモジュール」なら"hatena-section"、「hoteanモジュール」なら"hatena-hotean"といった具合です。
  • 【補足】時刻とページタイトルは基本的に改行しません。この図で改行しているのは、時刻が長くて幅いっぱいだから。

template属性なし

  • 【補足】モジュール用のタグに「template="hatena-module"」が入っていないときは、同型のモジュールはすべて同じ構造です。
  • 【補足】時刻とタイトルの間には改行タグが入っているので、必ず改行します。

div.hatena-module

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

[戻る▲]

div.hatena-moduletitle

モジュールのタイトル。なにかいい情報があればここに載せてください。

[戻る▲]

div.hatena-modulebody

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

[戻る▲]

div.hatena-modulebody ul

sectionモジュールなら『div.hatena-section ul』、hoteanモジュールなら『div.hatena-hotean ul』という具合に変わります。モジュールごとに見栄えを変えたい時に。

そうでなくて、すべてのモジュールで番号なしリストになっている部分を一括で変えたい時は『div.hatena-modulebody ul』を使います。

[戻る▲]

div.hatena-modulebody li

sectionモジュールなら『div.hatena-section li』、hoteanモジュールなら『div.hatena-hotean li』という具合に変わります。モジュールごとに見栄えを変えたい時に。

そうでなくて、すべてのモジュールで番号なしリスト内のリスト行を一括で変えたい時は『div.hatena-modulebody ul li』を使います。

[戻る▲]

div.hatena-modulebody li a

モジュールごとに見栄えを変える場合は

  • ul.hatena-antenna li a
    • ul.hatena-antenna li a:link
    • ul.hatena-antenna li a:visited
    • ul.hatena-antenna li a:hover
    • ul.hatena-antenna li a:active

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

  • div.hatena-modulebody li a
    • div.hatena-modulebody li a:link
    • div.hatena-modulebody li a:visited
    • div.hatena-modulebody li a:hover
    • div.hatena-modulebody li a:active

を使います。

[戻る▲]

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
    • div.recentsubtitles a:link
    • div.recentsubtitles a:visited
    • div.recentsubtitles a:hover
    • div.recentsubtitles a:active

[戻る▲]

HTML構造概略

すいません書いてません。

 | 

ホームページ制作