日記の細かい部分や文章部分のセレクタです(元画像)。
<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>
日記1日分の全体。なんかいい情報があったらここに載せてください。
[戻る▲]
div.sectionとdiv.comment(コメント表示時)とdiv.refererlist(トラックバック表示時)をひとまとめにしている。
[戻る▲]
コメント表示時のコメント部分全体。なんかいい情報があったらここに載せてください。
[戻る▲]
その日のタイトル。
[戻る▲]
見出しから、次の見出しまでがdiv.sectionになる。.sectionは日記本文内の要素を指定する時に、よく使われるクラス。
[戻る▲]
見出し。詳細な構造は下の方の図になります。
「**」や「***」で作る小見出し(はてなダイアリーのヘルプ - 小見出しをつける(小見出し記法、小々見出し記法))のセレクタはh4(div.section h4)、h5(div.section h5)になります。
[戻る▲]
日記本文内の、ひとつの段落。
はてなダイアリーは編集画面で改行すると、自動的にpタグが挿入されて前後が段落になる。便利だが、brタグでサイト作りをしていた人や、1行ごとに改行する書き方の人には違和感を持たれやすい。いちいちpタグの自動挿入を止めて*、brタグを手書きしていけばいいのだが、かなり面倒くさい。そこで、ようは「改行しても隙間が空かない」ようになればいいという場合は、スタイルシートで解決できる。以下の通り。(はてなダイアリーTipsスタイルシートでデザイン編【段落の前後のすき間をなくす方法】より)
div.section p{ margin-top:0; margin-bottom:0; padding-top:0; padding-bottom:0; }
[戻る▲]
脚注(ヘルプ - 脚注をつける)の部分。なんかいい情報があったらここに載せてください。
[戻る▲]
脚注の一段落。
[戻る▲]
[コメントを書く]の行。トラックバックを表示しているときはトラックバック用URLもdiv.captionなので注意。
Hatenaテーマなどで、[コメントを書く]の下の線を消したいときは
div.comment div.caption { border-bottom: none; }
色を変えたいときは
div.comment div.caption { border-bottom: #色コード 1px solid; }
[戻る▲]
コメント自体の部分。
ここを非表示にして、コメントページ(コメントを投稿する画面)だけにコメントを表示させることが出来る。(ネタ元はid:chepookaさんのid:chepooka:20041212#comment)
div.commentshort{ display: none; } form div.commentshort{ display: block; }
のように書くと日記ページとのHTML構造の差により、コメントページだけにコメントが表示される。ちなみにトラックバックやリンク元は、管理ツール画面「日記の設定 > コメント・トラックバック設定」で日記ページに表示させるかどうかが選択できる。
[戻る▲]
一個のコメントの段落。なんかいい情報があったらここに載せてください。
[戻る▲]
トラックバックに関する表示。コメント画面や編集画面のトラックバックや、リンク元もdiv.refererlistになっている。
[戻る▲]
トラックバック用URL。コメントを表示しているときは[コメントを書く]の行もdiv.captionなので注意。
[戻る▲]
トラックバック部分。リストの行頭に「・」などのマーカーが表示されていて、消したいときは
div.refererlist ul { list-style-type: none; }
「・」以外のものを表示することもできます(参考リンク:とほほのスタイルシート入門 - list-style-type)。
[戻る▲]
一個のトラックバック。リンク状態によって分けるなら
など。
[戻る▲]
日記の日付。リンクアンカーになっている。リンク状態によって分けるなら
[戻る▲]
この「編集」は、その日記の作者本人がログインしているときにしか表示されないので、一般の人には見えない。リンク状態によって分けるなら
[戻る▲]
[戻る▲]
日記に登録した画像。
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より)
[戻る▲]
見出し行頭の「■」。リンクアンカーになっているのでリンク状態によって分けるなら
ブログモードでは「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さんのソースです。)
[戻る▲]
カテゴリーのリンク。
[戻る▲]
見出し。
見出しの中のリンクは
見出しの中のキーワードリンクは
「**」や「***」で作る小見出し(ヘルプ - 小見出し)のセレクタはh4(div.section h4)、h5(div.section h5)になります。
[戻る▲]
「*t*」で表示するタイムスタンプ。
[戻る▲]
id:Yuichirou:20050309/さんの記述を参照。
のような色別のバリエーションが「はてなダイアリー画像一覧」に掲載されている。(id:sasadaさん提供ではてなダイアリー共有フォルダに登録済み)
[戻る▲]
キーワードリンク。リンク状態によって変えるなら
「はてなグループ」へのキーワードリンクはクラスが「.okeyword」になる。「はてなグループ」の日記がはてなダイアリーのキーワードにリンクしたときも「.okeyword」になる。
[戻る▲]
日記本文中のリンク文字列。
[戻る▲]
引用ブロック。引用ブロック内のリンクは「blockquote a」、キーワードは「blockquote a.keyword」など。
[戻る▲]
引用元。はてなダイアリーの入力支援による形だとblockquote内にcite要素が入って変だと言う指摘があるけれど、そうなっている。リンクになっている場合は
[戻る▲]
アマゾン書影ののための省略記法(ASIN:XXXXXXXXXX:image)を使ったときの画像。
asin/isbn 記法の詳細モードで生成される部分についてはまだ書いてません。asin/isbn 記法の詳細モード発表日のはてなダイアリー日記をご参考にどうぞ。
[戻る▲]
整形ブロック。整形ブロック内のリンクは「pre a」(pre a:link〜)、キーワードは「pre a.keyword」など。
(脱線ですが『はてなダイアリーの歌』は、おかげさまで曲になりました。)
[戻る▲]
リンクになってる「コメントを書く」の部分。
[コメントを書く]全体は→div.caption
[戻る▲]
コメントの前につく「#」。
[戻る▲]
コメントした人の名前。
[戻る▲]
コメントした人の名前がリンクのとき。
[戻る▲]
ブログモード時の『Permalink | コメント(0) | トラックバック(0)』の部分。
例えばHatenaテーマと同じようにするなら(文字を小さく、右ぞろえにして、上に間を少し開ける)、
div.section p.sectionfooter { font-size:90%;/*←数字は好みで調整*/ text-align: right; margin-top: 1em;/*←数字は好みで調整*/ }
のように。
のように。(これ以上細かいクラス分けは無い)
セレクタは例えば「p.sectionfooter img.icon」。リンク状態で分けるなら
のように。
[戻る▲]