ヘッダ構造からしてダイアリーと全く違うので大変苦労する。下手に弄るよりデフォルトスタイルの一部をちょっと弄る程度に止めた方が良いかもしれない。
参考までに、大まかな構造とスタイル指定の指針を示す。
大幅改定。
ブックマークの自動挿入スタイル
はてなブックマークははてなダイアリーと違いスタイルが埋め込みではなく外部読み込み形式（http://b.hatena.ne.jp/ユーザーID/style?mode=user）となっている*1。これを見ると、ユーザー指定スタイル以外にかなりのスタイルがデフォルトで埋め込まれていることが解る。
以下に埋め込み部分全文を示す。
body {
color: #000;
margin: 0px;
padding: 0px;
}
img {
border: 0px;
}
p.message {
text-align: center;
background: #f0f0ff;
margin-left: 100px;
margin-right: 100px;
padding: 10px;
border: 1px solid #c0c0ff;
font-size: 90%;
}
ul.message {
font-size: 90%;
}
div#banner {
background: #000000;
padding: 0px;
margin: 0px;
border-bottom: 1px solid #515151;
}
div#banner h1 {
margin: 0;
padding: 0;
font-size: 100%;
}
div#bannersub {
color: #515151;
background: #B5B5B5;
border-bottom: 1px solid #515151;
}
div#bannersub td {
font-size: 80%;
color: #515151;
text-align: center;
}
div#bannersub td a {
color: #515151;
text-decoration: none;
}
div#bannersub table {
width: 100%;
}
form.searchform {
position: absolute;
text-align: left;
top: 14px;
left: 300px;
margin: 0;
padding: 0;
white-space: nowrap;
}
form.searchform input {
vertical-align: bottom;
}
form.searchform input.searchword {
font-size: 8pt;
width: 120px;
padding: 0;
}
form.searchform input.searchbutton {
padding: 0;
margin: 0;
border: none;
}
img.logo {
position: absolute;
text-align: right;
top: 0;
right: 0;
}
imgと.messageに対する指定を除けば、自動挿入スタイルはすべてはてなヘッダー用のスタイルである。これらはユーザー指定スタイルより前に挿入されるため上書き可能であるが、よほど特殊なことをしたいのでない限り、この辺りは弄る必要がない。
特にはてなロゴ周りの背景色はbodyに対する色指定で成立しているので、これを書き換えるとヘッダーの表示がおかしくなる。本文の背景は必ずdiv.bodyで指定のこと。
ブックマークのタイトル周り
デフォルトスタイルではブックマークのタイトル横に情報が一列に並ぶが、構造上はh2及び番号無しリストであるので、スタイル無指定では縦に並んでしまう。
- div.header
ここはh2にfloat:left、ul.bookmarkにlist-style-type:none、ul.bookmark liにはdisplay: inlineが適当だろう。
ユーザー別検索フォーム
- form.hatena-usersearch
- input.hatena-usersearch（テキスト入力欄）
- input.hatena-usersearch（検索ボタン）
特に解説の必要はないだろう。
なお、ここから下がdiv.main内となる。
ページ送り
タグリストの前とブックマークリストの後にそれぞれ、「1 2 3..10 次の100件＞」などというページ送りリンクが来る。
- div.pager
- p
- a
- p
現在のページのみaでマークアップされないだけの、単なる文字列である。少々スタイルを弄り難い構造。
取り敢えずdiv.pagerにtext-align:rightなどとするのが無難か。
タグリスト
タグリストは以下の構造を持つ。
- div.taglist
- h3
- ul.taglist
- li
- a
- li
liとaはタグリストの数に合わせて増える。
aにはタグの使用時期に合わせtag-later、tag-latestまたはtag-earliestクラスが付加されている。これはタグを付けた時期に応じて文字色を変えるためのものだろう。つまり色変化はユーザーが任意に指定可能である。
使用頻度に応じた文字サイズはaにポイント指定で埋め込んであるので、変更は不可能*2。
ブックマークリスト
ここが最も複雑な部分である。ブックマークリストは二重の定義リストから成る。
ブックマークリスト全体はdl.bookmarklistでくくられ、その中にdt.bookmarkとしてブックマークしたサイトのタイトルとURLが、ddに各種メタデータとコメントが並ぶ。
- dl.bookmarklist
- dt.bookmark
- dd
- dl（メタデータ記述用定義リスト）
- dd.comment（コメント）
ブックマークのメタデータ
各メタデータはclass無指定のdlの中に同一クラス名を持つdtとddの組み合わせで記述されているので、構造は凡例だけを示しclass名を列記する。
各メタデータはほぼ同一の構造を持つ。
- dt.クラス名
- img（項目ごとのアイコン）
- span.label（項目名）
- dd.クラス名（メタデータ）
それぞれのクラス名は以下の通り。
- domain
- ドメイン名
- category
- カテゴリー
- users
- ブックマークしているユーザー数。3人以上の項目にはemが、10人以上ではstrongが付加される。
- timestamp
- 登録日。この項目のみddを3個持ち、それぞれ登録日、編集アイコン、削除アイコンとなっている。
span.labelはアイコンで補完されており、テキストとして表示する理由は殆どない。display:noneとしても問題ない。
メタデータが縦に並ぶと見通しが非常に悪くなるので、dl.bookmarklist dd dl *にdisplay: inlineを指定するのが望ましい。
で結局こんな風になったわけですが。
なお、基本的なカラーパターンはid:kamioka氏作のはてなダイアリーテーマ「Nabla」に倣ったことを告白しておく。
はてなはブックマークのテーマを公募しないのかな。
