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

はてなダイアリーガイド

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

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

 | 

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

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

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

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

はてなダイアリーのセレクタ探し - 日記1日分のブロック要素


はてなダイアリーのセレクタ探し - 日記1日分の中身

div.day

[戻る▲]

div.body

[戻る▲]

div.comment

[戻る▲]

h2(.day h2)

[戻る▲]

div.section

[戻る▲]

h3(.day h3)

[戻る▲]

div.section p

[戻る▲]

div.footnote

[戻る▲]

div.footnote p

[戻る▲]

div.caption

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

div.caption {
	border-bottom: none;
}

色を変えたいときは

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

[戻る▲]

div.commentshort

[戻る▲]

div.commentshort p

[戻る▲]

.date(span.date)

[戻る▲]

.title(span.title)

[戻る▲]

h2 a

本人にしか見えない所ですが…。このセレクタだと日付もリンクなので影響受けます。

[戻る▲]

.photo(img.photo)

[戻る▲]

.sanchor(span.sanchor,h3 .sanchor)

小見出し行頭の■。

他の画像に置き換える場合は

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

など。(完璧にこせきさんのソースだ。まずいかな。)

[戻る▲]

.sectioncategory

[戻る▲]

h3(.day h3,.body h3,.section h3)

小見出し小見出しの中のリンクの指定は

[戻る▲]

.timestamp(span.timestamp,h3 .timestamp)

[戻る▲]


div.section p a

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

[戻る▲]

.section ol(ol)

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

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

[戻る▲]

.section ul(ul)

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

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

[戻る▲]

.section dl(dl)

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

div.section dl dt
div.section dl dd

[戻る▲]

blockquote(div.section blockquote)

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

[戻る▲]

cite(blockquote cite,div.section site)

引用元。はてなダイアリーの入力支援による形だとblockquote内にcite要素が入って変だと言う指摘あり(直す気はないらしい)。リンクになっている場合は

[戻る▲]

.asin(img.asin)

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

[戻る▲]

pre(div.section pre)

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

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

[戻る▲]

.caption a

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

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

[戻る▲]

.canchor(span.canchor)

コメントの前につく「#」。これを他のマーク画像などで表現したい場合は

span.canchor {
 作例探してます。
}

[戻る▲]

.commentator(span.commentator)

コメントした人の名前

[戻る▲]

span.commentator a

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

[戻る▲]

 | 

ホームページ制作