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

はてなダイアリーガイド

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

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

 | 

1906-01-06はてなダイアリーのセレクタ探し(書きかけ

この草稿ははてなダイアリーガイド「CSSセレクタ」としてキーワード化しました。

ガイドトップへ・ ガイドトップ ・ 目次 ・ 索引

(セレクタ探しトップに戻る

はてなダイアリーのセレクタ探し - アンテナ型モジュール

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

モジュールの設置方法については、ヘルプ - 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

[戻る▲]

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

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

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

[戻る▲]

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

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

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

[戻る▲]

ul.hatena-antenna li a(div.hatena-modulebody ul 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 ul li a
    • div.hatena-modulebody ul li a:link
    • div.hatena-modulebody ul li a:visited
    • div.hatena-modulebody ul li a:hover
    • div.hatena-modulebody ul li a:active

[戻る▲]

p.recentitem

[戻る▲]

div.recentsubtitles

[戻る▲]

div.recentsubtitles strong

[戻る▲]

div.recentsubtitles

ここはdiv.recentsubtitlesのまんまです。

[戻る▲]

div.recentsubtitles a

  • div.recentsubtitles a
    • div.recentsubtitles a:link
    • div.recentsubtitles a:visited
    • div.recentsubtitles a:hover
    • div.recentsubtitles a:active

[戻る▲]

 | 

ホームページ制作