hatana.cssの全セレクタを訳してみる。
ここはhatena.cssでやっているのですが、今よりもっとわからない頃から色々追加と変更をくり返しています。そんなことをしてるうちに「何をつけたしたか」「何を削っても大丈夫なのか」忘れてしまい、hatena独自の要素もあってなにがなにやら。
というわけでど忘れ対策を進行中。備忘録なのでアルファベット順。「どこに適用されているのか」も、わかる分だけ書いていきます。←普通に日記を書いていても適用範囲が「ない」要素が、けっこうあるようです。
なにぶんHTMLもろくに理解できておらず、誤りもあろうかと思いますので、ご指摘が頂ければさいわいです。
a………渡文／リンクすべて
a {}
a.keyword………鍵句／はてなダイアリーキーワード
a.keyword { color: black; text-decoration: none; border-bottom: 1px solid gray }
body………本文／ヘッダとフッタ以外
body { color: black; background-color: #ffffff; margin: 0px; padding: 0px }
div.adminmenu………管理メニュー部分（administration menu）／どこだろう。
div.adminmenu { font-size: 90%; text-align: right; margin: 2% 5% 0% 0% }
div.body………本文部分／ヘッダとフッタ以外
div.body {font-size: 90%; border: #5279e7 1px solid; margin-top: 0px; margin-bottom:
0px; padding: 3px 10px 3px 10px; line-height: 1.5;}
div.body blockquote………本文部分の囲い
div.body blockquote { color: #333333; background-color: #ffffff; margin: 1% 2%; padding: 8px; border: solid 1px #5279e7 }
div.body dl………本文部分の説明用一覧
div.body dl { margin-left: 2em }
div.body dd………本文部分の説明用一覧の説明文
div.body dd { margin-bottom: 0.5em; margin-left: 1em }
div.body dt………本文部分の説明用一覧の見出し
div.body dt { font-weight: bold; margin-bottom: 0.2em }
div.button………ボタン部分／ボタンフォームがある場合か。
div.button { display: block }
div.calendar………カレンダー部分／おとなり日記も
div.calendar { font-size: 90%; text-align: left; margin: 1% 5% 0; padding: 1% }
div.caption………標題部分／[コメントを書く]、リンク元
div.caption { margin: 8px 0 0; border-bottom: 1px solid #5279e7 }
div.comment………コメント部分／コメントに関する部分
div.comment { font-size: 90%; line-height: 1.5 }
div.comment form………コメント部分の送信表現
div.comment form { margin-top: 0em }
div.comment p………コメント部分の段落
div.comment p { text-indent: 0em; margin-left: 0em }
div.commentator………コメントの名前部分
div.commentator { line-height: 1.5em; font-weight: bold;}
div.commentbody………コメントの文章部分
div.commentbody { line-height: 1.2em; margin: 0.5em }
div.commentbody p………コメントの文章部分の段落
div.commentbody p { margin: 0.5em;}
div.commentshort………コメントの一部分／commentator（名前）とcanchor（#）
div.commentshort { margin-bottom: 10px }
div.commentshort p………コメントの一部分の段落
div.commentshort p { line-height: 1.2em; margin: 0.2em 0 }
div.field { margin-right: 2em; display: inline }
div.day………日記部分／日記、コメントを含む
div.day { margin: 0% 5%; padding: 4px }
div.day p………日記部分の段落
div.day p { margin-bottom: 0.5%; margin-top: 0.5%; text-indent: 1em}
div.day span.canchor………日記部分のツッコミ釘／コメントについている『#』
div.day span.canchor { color: black;}
div.day span.sanchor………日記部分の小見出し釘／小見出しの四角マーク
div.day span.sanchor { color: #5279e7;}
div.footer………頁足／フッタ、『Copyright (C) 2003 hatena. All Rights Reserved.』
div.footer { color: #cccccc; font-size: 80%; text-align: center; margin: 5px }
div.form………入力形式部分
div.form { font-size: 90%; line-height: 1.5; text-align: center; margin: 1% 5%; padding: 1% }
div.form form………入力形式部分の入力形式
div.form form { width: 100% }
div.form form { margin: 0em;}
div.intro………導入部／どこだろう。なさそう。
div.intro { margin: 2% 5% }
div.section………記事部分／h3（小見出し）から次のh3の手前まで
div.section { margin-top: 2%; margin-bottom: 2% }
div.section p………記事部分の段落
div.section p { padding-top: 0.2%; padding-bottom: 0.2%;}
div.referer………渡頁元・参照元部分／リンク元に関する部分
div.referer { font-size: 90%; border-top: #5279e7 1px solid; border-bottom: #5279e7 1px solid; text-align: right; line-height: 1.5;}
div.refererlist………渡頁元・参照元一覧部分／リンク元のリスト
div.refererlist { font-size: 90%; margin: 0px; padding: 0px;}
div.refererlist ul………渡頁元・参照元一覧の一覧／[referred]と、訪問数のついている行
div.refererlist ul { background-color: #edf1fd; padding: 5px; margin: 0; list-style-type: circle; list-style-position: inside;}
div.refererlist ul ul………渡頁元・参照元一覧の一覧／リンク元のURIがない、[Bookmark]などの行
div.refererlist ul ul { background-color: #edf1fd; padding: 0; margin: 0 0 0 5%; list-style-type: disc; list-style-position: inside;}
div.day.update div.comment………／使われてない様子。
div.day.update div.comment { text-align: center }
div.main………主部／bodyのサイドバー以外
div.main { margin-left: 18% }
div.recentsubtitles………側部一覧部分／サイドバーのアンテナで捕足したページのタイトルなど
div.recentsubtitles { font-size: 10pt; margin-top: 0px; margin-bottom: 1em; margin-left: 0em }
div.section blockquote p………記事部分の囲いの段落
div.section blockquote p { margin-left: 0em; text-indent: 0em}
div.sidebar………側部／サイドバー全体
div.sidebar { margin-left: 5%; position: absolute; top: 120px; left: 0px; width: 15% }
div.textarea………文字入力部分／あれ、どこだろ。ありそうでない。
div.textarea { text-align: center; vertical-align: top; display: block }
em………強調表現文（emphasized text）／文中でemを使った時
em { background-color: #ffffff; color: #2c2400; font-style: italic; font-weight: normal}
form.comment input………コメント入力形式の入力部分
form.comment input { background-color: #ffffff; color: #06040F;}
form.comment textarea………コメント入力形式の文字入力部分
form.comment textarea { display: block; background-color: #ffffff; color: #06040F; width: 30em; height: 5em; margin-left: auto; margin-right: auto;}
form.update………入力形式の更新部分／クラス.updateって見つからないな
form.update { padding-top: 0.5em; padding-bottom: 0.5em;}
form.update input form.update textarea, form.commentstat input………／ないかも
form.update input, form.update textarea, form.commentstat input { background-color: #ffffff; color: #06040F;}
form.update div.field.title input………／ないかも
form.update div.field.title input { margin-left: 0.5em;}
form.update div.textarea………／ないかも
form.update div.textarea { display: block; margin-top: 1em; text-align: center;}
form.update div.field.title………／ないかも
form.update div.field.title { margin-top: 1em; display: block }
form.update span.checkbox.hidediary………／これ全部ないのかな
form.update span.checkbox.hidediary { margin-left: 1em }
form.update span.field………／対応しそうな所に影響が出ない。やっぱりないのか。
form.update span.field { margin-right: 0.5em; margin-left: 0em; display: inline }
form.update textarea ………／ないな。
form.update textarea { display: block; margin-bottom: 1em; width: 35em; height: 15em; margin-left: auto; margin-right: auto;}
結論。tDiaryの更新フォーム用だと思われます。
h1………大見出し／ダイアリーのタイトル
h1 { font-weight: bold; font-size: 16pt; text-align: left; margin: 10px 5%; padding: 4px; border-bottom: 1px dotted #adb2ff }
h2………中見出し／日記の表題
h2 { font-size: 100%; background-color: #5279e7; padding: 3px 0px 2px 10px; margin: 5px 0 0 0;}
h2 span.date………日記の表題の日付
h2 span.date { color: #ffffff; font-size: 100%; font-style: normal; margin-left: 2px; margin-right: 2px;}
h2 span.title………日記の表題の題名
h2 span.title { color: #ffffff; font-size: 100%; font-style: normal}
h3………小見出し／記事の見出し
h3 { font-weight: bold; font-size: 120%; margin-top: 2%; margin-bottom: 0.1% }
h3 span.timestamp………記事更新時刻
h3 span.timestamp { font-weight: normal; font-size: 80% }
.headline………標題／
.headline { font-size: 90%; background-color: #ffee99; text-align: left; margin: 0% 10%; padding: 2% }
背景色が■こんなのないよな。使われてなさそう。
.hide………隠し文字／フォーム送信など？それとも下書き機能か
.hide { color: #000000; background-color: #ffffff }
hr………横罫線／横罫線を書いた時
hr {}
hr.sep………分割罫線／日記同士を隔てる罫線の設定らしい
hr.sep { display: none }
img.photo………写真画像／日記に登録した画像
img.photo { float: right; margin: 10px; border: 0 }
input.field………入力形式・入力欄／日記編集画面の入力欄など全般
input.field { color: #06040f; background-color: #ffffff; text-indent: 0em; border: solid 1px #5279e7 }
input.select………入力形式・選択形式／ないみたい
input.select { text-indent: 0em ! important;}
p.message………伝言段落／『ご指定のページが見つかりません。URLをもう一度お確かめ下さい。』
p.message { color: red; background-color: #ffffff; font-size: 100%; padding-top: 8px; padding-right: 8px; padding-bottom: 8px; padding-left: 8px; text-align: center;}
pre………整形文／preを使った時
pre { background-color: #e7ebff; padding: 8px;}
p.recentitem………新項目段落／サイドバーの項目
p.recentitem { font-size: 10pt; text-align: center; margin-top: 0px; margin-bottom: 2px; padding: 1px; border-style: solid; border-width: 0px 0px 1px 0px; border-color: #adb2ff }
.sfooter………「s」ってなんだろう／ないにゃ
.sfooter {}
span.adminmenu………管理メニュー文字列／なさげ
span.adminmenu {}
span.commentator………コメントの名前文字列
span.commentator {}
span.highlight………注目表示文字列／検索結果
span.highlight { color: black; background-color: yellow }
strong………強調文／strongを使った時
strong { color: #2c2400; font-style: italic; font-weight: bold; background-color: #ffffff }
strong { color: #2c2400; background-color: #ffffff; font-style: italic; font-weight: bold}
あれ、ふたつある。中身は同じか。
textarea………文字入力区／複数行の入力エリア全般
textarea { width: 40em; height: 50%; font-size: 90%; color: #06040F; background-color: #ffffff; border: 1px solid #5279e7; text-indent: 0em ! important;}
td.sidebar………横の表のマス目／ないと思う。
td.sidebar { width: 120px; padding: 10px 0px 0px 0px; vertical-align: top;}
td.main………主部の表のマス目／ないと思う。テーブルを作ると適用される？
td.main { width: 100%; align: center; padding: 0px; vertical-align: top;}
table.calendar………カレンダー表／ない。色指定がはてなカラーなので、計画はあったのかも。
table.calendar { font-size: 0.8em; line-height: 100%; border-width: 1px; border-color: #5279e7; border-style: solid; background-color: transparent; margin: 3%;}
table.calendar td………カレンダー表のマス目／ない。
table.calendar td { margin: 3px; text-align: right; padding: 3px; margin: 3px;}
table.calendar td.calendar-prev-month, table.calendar td.calendar-current-month, table.calendar td.calendar-next-month………カレンダー表マス、前の月、表示中の月、次の月／ない。
table.calendar td.calendar-prev-month, table.calendar td.calendar-current-month, table.calendar td.calendar-next-month { text-align: center;}
