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

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

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

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

(2004年9月25日作図)

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

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

HTMLの概略

<div class="day">
 <h2><a><span class="date">日付</span></a><span class="title">1日のタイトル</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

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

[戻る▲]

div.body

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

[戻る▲]

div.comment

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

[戻る▲]

h2(div.day h2)

その日のタイトル。

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

[戻る▲]

div.section

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

[戻る▲]

h3(.day h3)

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

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

  • このエントリーを含むブックマーク……h3 img.icon
  • リンクの状態によって変える場合……h3 a img.icon

小見出し

「**」や「***」で作る小見出しはてなダイアリーのヘルプ - 小見出しをつける(小見出し記法、小々見出し記法))のセレクタはh4(div.section h4)、h5(div.section h5)になります。

[戻る▲]

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

コメント自体の部分。

ここを非表示にして、コメントページ(コメントを投稿する画面)だけにコメントを表示させることが出来る。(ネタ元は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

など。

[戻る▲]

span.date(.date)

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

[戻る▲]

span.title(.title)

日記タイトル。

[戻る▲]

h2.edit(.edit)

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

[戻る▲]

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

[戻る▲]

img.photo(.photo)

日記に登録した画像。

枠線を消したい場合

img.photo {
 border: none;
}

日記の枠から画像がはみ出ないようにする

画像の高さより短い文章を書くと、画像が日記の枠からはみ出てしまうことがあります(画像にfloatを使っているとき)。そこで以下のようにします。

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

div.section{
  _height:1%;
}

div.sectionの後にcontentで内容生成し、それをブロック化してclearでfloatを解除しています。WinIEはcontent未対応なので、height:1%を指定してボックスの高さを広げます。(「写真のはみ出し解除法」id:hkn:20040920#1095620727より)

[戻る▲]

span.sanchor(.sanchor,h3 .sanchor)

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

「■」を消したい時

ブログモードでは「Permalink」が表示されるので「■」は必要ないという場合もあるでしょう。

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

など。(これは小見出し用アイコンを公開されていたid:kosekiさんのソースです。)

[戻る▲]

a.sectioncategory

カテゴリーのリンク。

[戻る▲]

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

見出し。

見出しの中のリンクは

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

小見出し

「**」や「***」で作る小見出しヘルプ - 小見出し)のセレクタはh4(div.section h4)、h5(div.section h5)になります。

[戻る▲]

span.timestamp(.timestamp、h3 .timestamp)

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

[戻る▲]

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

  • このエントリーを含むブックマーク……h3 img.icon
  • リンクの状態によって変える場合……h3 img.icon a
  • 日記タイトルやその日のタイトル横のアイコンも一緒に指定するとき……img.icon(img.icon a)

「このエントリーを含むブックマークアイコンを差し替える

id:Yuichirou:20050309/さんの記述を参照。

このエントリーを含むブックマーク - 緑アイコンのような色別のバリエーションが「はてなダイアリー画像一覧」に掲載されている。(id:sasadaさん提供ではてなダイアリー共有フォルダに登録済み)

[戻る▲]

a.keyword(.keyword)

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

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

[戻る▲]

div.section p a(div.section a)

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

[戻る▲]

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要素が入って変だと言う指摘があるけれど、そうなっている。リンクになっている場合は

[戻る▲]

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

[戻る▲]

span.canchor(.canchor)

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

[戻る▲]

span.commentator(.commentator)

コメントした人の名前。

[戻る▲]

a 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;/*←数字は好みで調整*/
}

のように。

『Permalink』『コメント(0)』『トラックバック(0)』のリンク部分

  • p.sectionfooter a
    • p.sectionfooter a:link
    • p.sectionfooter a:visited
    • p.sectionfooter a:hover
    • p.sectionfooter a:active

のように。(これ以上細かいクラス分けは無い)

このエントリーを含むブックマークのようなアイコンを表示している場合

セレクタは例えば「p.sectionfooter img.icon」。リンク状態で分けるなら

  • p.sectionfooter a img.icon
    • p.sectionfooter a:link img.icon
    • p.sectionfooter a:visited img.icon
    • p.sectionfooter a:hover img.icon
    • p.sectionfooter a:active img.icon

のように。

[戻る▲]

目次