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

はてなダイアリーガイド

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

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

 | 

1906-01-09はてなダイアリーガイド「CSSセレクタ - 日記1

日記1日分の構造とセレクタ

日記1日分の大まかな構造です(元画像)。

(2004年9月25日作図)

日記1日分の詳細構造とセレクタ

日記の細かい部分や文章部分のセレクタです(元画像)。

(2004年9月25日作図)

div.day

日記1日分の全体。なんかいい情報があったらここに載せてください。

[戻る▲]

div.body

div.sectionとdiv.comment(コメント表示時)とdiv.refererlist(トラックバック表示時)をひとまとめにしている。

[戻る▲]

div.comment

コメント表示時のコメント部分全体。なんかいい情報があったらここに載せてください。

[戻る▲]

h2(div.day h2)

日記1日分の見出し。

[戻る▲]

div.section

小見出しから、次の小見出しまでがdiv.sectionになる。.sectionは日記本文内の要素を指定する時に、よく使われるクラス。

[戻る▲]

h3(.day h3)

小見出し。詳細な構造は下の方の図になります。

[戻る▲]

div.section p

日記本文内の、ひとつの段落。

はてなダイアリーは編集画面で改行すると、自動的にpタグが挿入されて前後が段落になる。便利だが、brタグでサイト作りをしていた人や、1行ごとに改行する書き方の人には違和感を持たれやすい。いちいちpタグの自動挿入を止めて*、brタグを手書きしていけばいいのだが、かなり面倒くさい。そこで、ようは「改行しても隙間が空かない」ようになればいいという場合は、スタイルシートで解決できる。以下の通り。(はてなダイアリーTipsスタイルシートでデザイン編【段落の前後のすき間をなくす方法】より)

div.section p{
 margin-top:0;
 margin-bottom:0;
 padding-top:0;
 padding-bottom:0;
}

[戻る▲]

div.footnote

脚注(ヘルプ - 脚注をつける)の部分。なんかいい情報があったらここに載せてください。

[戻る▲]

div.footnote p

脚注の一段落。

[戻る▲]

div.caption(div.comment div.caption)

[コメントを書く]の行。トラックバックを表示しているときはトラックバック用URLもdiv.captionなので注意。

Hatenaテーマなどで、[コメントを書く]の下の線を消したいときは

div.comment div.caption {
 border-bottom: none;
}

色を変えたいときは

div.comment div.caption {
 border-bottom: #色コード 1px solid;
}

[戻る▲]

div.commentshort

コメント自体の部分。なんかいい情報があったらここに載せてください。

[戻る▲]

div.commentshort p

一個のコメントの段落。なんかいい情報があったらここに載せてください。

[戻る▲]

div.refererlist

トラックバックに関する表示。コメント画面や編集画面のトラックバックや、リンク元もdiv.refererlistになっている。

[戻る▲]

div.caption(div.comment div.caption)

トラックバック用URL。コメントを表示しているときは[コメントを書く]の行もdiv.captionなので注意。

[戻る▲]

div.refererlist ul

トラックバック部分。リストの行頭に「・」などのマーカーが表示されていて、消したいときは

div.refererlist ul {
 list-style-type: none;
}

「・」以外のものを表示することもできます(参考リンク:とほほのスタイルシート入門 - list-style-type)。

[戻る▲]

div.refererlist li

一個のトラックバック。リンク状態によって分けるなら

  • div.refererlist li
    • div.refererlist li a:link
    • div.refererlist li a:visited
    • div.refererlist li a:hover
    • div.refererlist li a:active

など。

[戻る▲]

span.date(.date)

日記の日付。リンクアンカーになっている。リンク状態によって分けるなら

  • span.date a
    • span.date a:link
    • span.date a:visited
    • span.date a:hover
    • span.date a:active

[戻る▲]

span.title(.title)

日記タイトル。リンクアンカーになっている。リンク状態によって分けるなら

  • span.title a
    • span.title a:link
    • span.title a:visited
    • span.title a:hover
    • span.title a:active

[戻る▲]

h2 a

この「編集」リンクはその日記の作者本人にしか見えない。このセレクタだと日付やタイトルもリンクなので影響受けます。

[戻る▲]

img.photo(.photo)

日記に登録した画像。枠線を消したい場合は

img.photo {
 border: none;
}

[戻る▲]

span.sanchor(.sanchor,h3 .sanchor)

小見出し行頭の「■」。リンクアンカーになっているのでリンク状態によって分けるなら

  • span.sanchor a
    • span.sanchor a:link
    • span.sanchor a:visited
    • span.sanchor a:hover
    • span.sanchor a:active

「■」を他の文字に置き換えることは難しいけれど、「■」を消して、背景に画像を配置することで他の物に差し替えたように見せられます。

div.day span.sanchor {
 background-image: url("http://d.hatena.ne.jp/images/diary/koseki/1900-12-01.gif");
 background-position: bottom right;
 background-repeat: no-repeat;
 padding: 20px 22px 5px 0px;
 color: #FFFFFF;
 background-color: transparent;
 font-size: 1px;
}

など。これはid:kosekiさんのソースです。小見出し用アイコンを公開してらっしゃるので紹介しても怒られないだろうと思って転載しました。

[戻る▲]

a.sectioncategory

カテゴリーのリンク。

  • a.sectioncategory
    • a:link .sectioncategory
    • a:visited .sectioncategory
    • a:hover .sectioncategory
    • a:active .sectioncategory

[戻る▲]

h3(.day h3、.body h3、.section h3)

小見出し。

小見出しの中のリンクは

  • h3 a
    • h3 a:link
    • h3 a:visited
    • h3 a:hover
    • h3 a:active

小見出しの中のキーワードリンクは

  • h3 a .keyword
    • h3 a:link .keyword
    • h3 a:visited .keyword
    • h3 a:hover .keyword
    • h3 a:active .keyword

[戻る▲]

span.timestamp(.timestamp、h3 .timestamp)

「*t*」で表示するタイムスタンプ。

[戻る▲]

a.keyword(.keyword)

キーワードリンク。リンク状態によって変えるなら

  • a.keyword
    • a:link .keyword
    • a:visited .keyword
    • a:hover .keyword
    • a:active .keyword

「はてなグループ」へのキーワードリンクはクラスが「.okeyword」になる。「はてなグループ」の日記がはてなダイアリーのキーワードにリンクしたときも「.okeyword」になる。

  • a.okeyword
    • a:link .okeyword
    • a:visited .okeyword
    • a:hover .okeyword
    • a:active .okeyword

[戻る▲]

div.section p a(div.section a)

日記本文中のリンク文字列。

  • div.section p a
    • div.section p a:link
    • div.section p a:visited
    • div.section p a:hover
    • div.section p a:active

[戻る▲]

div.section ol(ol)

本文中の番号つきリスト。それぞれの行を指定する場合は

  1. div.section ol li
    1. div.section ol li li

[戻る▲]

div.section ul(ul)

本文中の番号なしリスト。それぞれの行を指定する場合は

  • div.section ul li
    • div.section ul li li

[戻る▲]

div.section dl(dl)

本文中の定義リスト。それぞれの行を指定する場合は

div.section dl dt
div.section dl dd

[戻る▲]

blockquote(div.section blockquote)

引用ブロック。引用ブロック内のリンクは「blockquote a」、キーワードは「blockquote a.keyword」など。

[戻る▲]

cite(blockquote cite、div.section site)

引用元。はてなダイアリーの入力支援による形だとblockquote内にcite要素が入って変だと言う指摘があるけれど、そうなっている。リンクになっている場合は

  • cite a
    • cite a:link
    • cite a:visited
    • cite a:hover
    • cite a:active

[戻る▲]

img.asin

アマゾン書影ののための省略記法(ASIN:XXXXXXXXXX:image)を使ったときの画像。

asin/isbn 記法の詳細モードで生成される部分についてはまだ書いてません。asin/isbn 記法の詳細モード発表日のはてなダイアリー日記をご参考にどうぞ。

[戻る▲]

pre(div.section pre)

整形ブロック。整形ブロック内のリンクは「pre a」(pre a:link〜)、キーワードは「pre a.keyword」など。

(脱線ですが『はてなダイアリーの歌』は、おかげさまで曲をいただけました。)

[戻る▲]

div.caption a

リンクになってる「コメントを書く」の部分。

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

[コメントを書く]全体は→div.caption

[戻る▲]

span.canchor(.canchor)

コメントの前につく「#」。

[戻る▲]

span.commentator(.commentator)

コメントした人の名前。

[戻る▲]

span.commentator a

コメントした人の名前がリンクのとき。

  • span.commentator a
    • span.commentator a:link
    • span.commentator a:visited
    • span.commentator a:hover
    • span.commentator a:active

[戻る▲]

HTML構造概略

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

 | 

ホームページ制作