はてなダイアリーガイド「CSSセレクタ - 日記１日分」

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

日記１日分の大まかな構造です（元画像）。

（2004年9月25日作図）

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

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

• （2004年9月25日作図）
• 追加項目：日記タイトル（h2）のアイコンについてはこちら。見出し（h3）のアイコンについてはこちら。
• 追加項目：ブログモード時の『Permalink | コメント(0) | トラックバック(0)』

HTMLの概略

<div class="day">
 <h2><a><span class="date">日付</span></a><span class="title">１日のタイトル</span> <a>編集</a></h2>
 <div class="body">
  <div class="section">
   <h3><a><span class="sanchor">■</span></a> 見出し</h3>
   <p>日記の文章</p>
   <p>日記の文章</p>
  </div>
  <div class="section">
   <h3><a><span class="sanchor">■</span></a> 見出し</h3>
   <p>日記の文章</p>
   <p>日記の文章</p>
  </div>
 </div>
 <div class="comment">
  <div class="caption">[<a>コメントを書く</a>]</div>
  <div class="commentshort">
   <p><span class="canchor">#</span> <span class="commentator">ゲスト</span> 『コメント。』</p>
   <p><span class="canchor">#</span> <a><span class="commentator">ユーザー</span></a> 『コメント。』</p>
  </div>
 </div>
 <div class="refererlist">
  <div class="caption">トラックバック - http://d.hatena.ne.jp/username/xxxxxxxxtrackback</div>
  <ul>
   <li><a>トラックバック元URL</a></li>
   <li><a>トラックバック元URL</a></li>
  </ul>
 </div>
</div>

div.day

日記１日分の全体。なんかいい情報があったらここに載せてください。
[戻る▲]

div.body

div.sectionとdiv.comment（コメント表示時）とdiv.refererlist（トラックバック表示時）をひとまとめにしている。
[戻る▲]

div.comment

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

h2（div.day h2）

その日のタイトル。

div.section

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

h3（.day h3）

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

div.section p

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

はてなダイアリーは編集画面で改行すると、自動的にpタグが挿入されて前後が段落になる。便利だが、brタグでサイト作りをしていた人や、１行ごとに改行する書き方の人には違和感を持たれやすい。いちいち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

コメント自体の部分。
ここを非表示にして、コメントページ（コメントを投稿する画面）だけにコメントを表示させることが出来る。（ネタ元はid:chepookaさんのid:chepooka:20041212#comment）

div.commentshort{
 display: none;
}

form div.commentshort{
 display: block;
}

のように書くと日記ページとのHTML構造の差により、コメントページだけにコメントが表示される。ちなみにトラックバックやリンク元は、管理ツール画面「日記の設定 > コメント・トラックバック設定」で日記ページに表示させるかどうかが選択できる。

[戻る▲]

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）

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

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

[戻る▲]

span.title（.title）

日記タイトル。

[戻る▲]

h2.edit（.edit）

この「編集」は、その日記の作者本人がログインしているときにしか表示されないので、一般の人には見えない。リンク状態によって分けるなら

• h2 a.edit
  • h2 a.edit:link
  • h2 a.edit:visited
  • h2 a.edit:hover
  • h2 a.edit:active

[戻る▲]

（図なし）はてなブックマークのアイコンつきの場合

• ……h2 img.icon
• リンクの状態によって変える場合……h2 a img.icon
  • h2 a:link img.icon
  • h2 a:visited img.icon
  • h2 a:hover img.icon
  • h2 a:active img.icon

[戻る▲]

img.photo（.photo）

日記に登録した画像。

img.photo {
 border: none;
}

div.section:after{
  content:"";
  display:block;
  clear:both;
}

div.section{
  _height:1%;
}

span.sanchor（.sanchor,h3 .sanchor）

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

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

span.sanchor {
 display: none;
}

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

a.sectioncategory

カテゴリーのリンク。

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

[戻る▲]

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

span.timestamp（.timestamp、h3 .timestamp）

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

（図なし）はてなブックマークのアイコンつきの場合

• ……h3 img.icon
• リンクの状態によって変える場合……h3 img.icon a
  • h3 a:link img.icon
  • h3 a:visited img.icon
  • h3 a:hover img.icon
  • h3 a:active img.icon
• 日記タイトルやその日のタイトル横のアイコンも一緒に指定するとき……img.icon（img.icon a）

a.keyword（.keyword）

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

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

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

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

[戻る▲]

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）

コメントした人の名前。
[戻る▲]

a span.commentator

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

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

[戻る▲]

p.sectionfooter（div.section p.sectionfooter）

ブログモード時の『Permalink | コメント(0) | トラックバック(0)』の部分。
例えばHatenaテーマと同じようにするなら（文字を小さく、右ぞろえにして、上に間を少し開ける）、

div.section p.sectionfooter { 
  font-size:90%;/*←数字は好みで調整*/
  text-align: right;
  margin-top: 1em;/*←数字は好みで調整*/
}

のように。