はてなブックマークの構造

■ はてなブックマークの構造

はてなブックマークのデザインの参考にしてください。

ブックマークページの構造
タグリスト絞り込みの構造
コメント直接編集機能の構造
コレクションページの構造
カスタマイズに関するメモ

■ ブックマークページの構造

基本の構造

html
- body
  - #banner //ヘッダ
    - h1
      - a
        
        img //「Hatena::Bookmark」
      - a
        
        img.logo //「?」
      - img //「△▽」
  - map //サービス間遷移用マップ。使わない
    - area
  - form.searchform
    - input.searchword //入力欄
    - input.searchbutton //「検索」
  - #bannersub
    - table
      - tbody
        
        tr
        
        td //以下繰り返し
        
        a
  - div.body
    - div.breadcrumbs
      - p
        
        a
    - div.header
      - h2 //ブックマークのタイトル
      - ul .bookmarkinfo //件数とアイコン
        
        li.count //総登録数
        
        li.rss //RSS アイコン
        
        a
        
        img.rss
        
        li.append //B!アイコン
        
        a
        
        img.append
        
        li.favorited //被お気に入り登録数
        
        li.addtofavor //お気に入りへ追加アイコン
        
        a
        
        img
        
        li.mysite //設定により追加可能
        
        a
        
        img
    - （ユーザーの入力したヘッダHTMLがここに挿入されます）
    - div.main
      - div.pager //ページャー
        
        p
        
        a
      - div.taglist //タグリスト絞り込み時については, タグリスト絞り込みを参照
        
        div.taglist-widget
        
        h3 //tags
        
        span.tagcount
        
        input.tag_search //#tag_search
        
        ul.taglist //#taglist
        
        li
        
        a.tag-latest //↑新
        
        a.tag-later
        
        a.tag-earlier
        
        a.tag-earliest //↓旧
      - dl .bookmarklist //ブックマーク一覧 #bookmark-nnnnnnnn
        
        dt.bookmark-image //動画をブックマークした場合
        
        a
        
        img.video-thumnail
        
        dt.bookmark //ブックマーク
        
        img.player //mp3をブックマークした場合
        
        a.mp3 //mp3をブックマークした場合
        
        a.bookmark
        
        dd //ブックマークの情報
        
        dl
        
        dt.domain //ブックマークのドメイン
        
        span.label //text:「ドメイン」
        
        dd.domain //ブックマークのドメイン
        
        a.domain
        
        dt.category //ブックマークのカテゴリ
        
        a
        
        img //フォルダ型アイコン
        
        span.label //text:「カテゴリ」
        
        dd.category //ブックマークのカテゴリ
        
        a.category
        
        dt.keyword //抽出されたキーワード
        
        img //辞書型アイコン
        
        span.label
        
        dd.keyword //キーワードの数だけ繰り返し
        
        a.keyword
        
        dt.users
        
        a
        
        img //紙型アイコン
        
        span.label //text:「詳細」
        
        dd.users
        
        strong | em | //※数が多い時に２段階
        
        a
        
        dt.timestamp //追加日
        
        span.label //text:「追加日」
        
        dd.timestamp //追加日
        
        dd.edit //編集
        
        a
        
        img //鉛筆型アイコン
        
        dd.delete //削除
        
        form.delete
        
        input //消しゴム型アイコン
        
        dd.comment //ユーザーのコメント
        
        img //ふきだし型アイコン
        
        span.tag //タグの数だけ繰り返し
        
        a
        
        span.comment //コメント本体
        
        dd.content //ページの内容 (詳細ページ)
      - div.pager
        
        p
        
        a
    - （ユーザーの入力したフッタHTMLがここに挿入されます）

モジュール

div.hatena-module
- div.hatena-moduletitle
  - a //RSSモジュールなど
- div.hatena-modulebody
  - div.calendar
    - a
  - table.calendar
    - tr
      - td.calendar-next-month
        
        a
      - td.calendar-current-month
        
        a
      - td.calendar-prev-month
        
        a
      - td.calendar-sunday
      - td.calendar-saturday
      - td.calendar-weekday
      - td.calendar-day
        
        a
  - ul.(hatena-antenna,hatena-rss)
    - li
      - a
        
        img //fotolifeなど?(未確認)
  - form.usersearch
    - input.usersearch

■ お気に入りページの構造

html
- body
  - #banner //ヘッダ。以下略
  - #bannersub //ヘッダ。以下略
  - div.body
    - div.breadcrumbs
    - div.header
      - h2 //ブックマークのタイトル
      - ul .bookmarkinfo //件数とアイコン
        
        li //RSS アイコン
        
        a
        
        img.rss
    - （ユーザーの入力したヘッダHTMLがここに挿入されます）
    - div.main
      - div.pager //ページャー
      - div.favoritelist //お気に入りリスト
        
        h3 //お気に入りユーザー
        
        span.favoritecount //お気に入りの数
        
        ul
        
        li //お気に入りの数だけ繰り返し
        
        a //各お気に入りのアイコン
        
        img.hatena-id-icon
        
        a //id名
        
        a
        
        img //消しゴム型アイコン
        
        form.favorite //お気に入り追加用フォーム
        
        input.favorite-user //style="width: 7em;"
        
        input //「追加」
      - dl .bookmarklist //ブックマーク一覧 #bookmark-nnnnnnnn
        
        dt.bookmark-image //動画をブックマークした場合
        
        a
        
        img.video-thumnail
        
        dt.bookmark //ブックマーク
        
        img.player //mp3をブックマークした場合
        
        a.mp3 //mp3をブックマークした場合
        
        a.bookmark
        
        dd //ブックマークの情報
        
        dl
        
        dt.bookmarker //ブックマークしたお気に入り
        
        a
        
        img.hatena-id-icon
        
        span.label //text:「ブックマークしたユーザー」
        
        dd .bookmarker //ブックマークしたお気に入り
        
        a
        
        dt.domain //ブックマークのドメイン
        
        span.label //text:「ドメイン」
        
        dd.domain //ブックマークのドメイン
        
        a.domain
        
        dt.category //ブックマークのカテゴリ
        
        a
        
        img //フォルダ型アイコン
        
        span.label //text:「カテゴリ」
        
        dd.category //ブックマークのカテゴリ
        
        a.category
        
        dt.keyword //抽出されたキーワード
        
        img //辞書型アイコン
        
        span.label
        
        dd.keyword //キーワードの数だけ繰り返し
        
        a.keyword
        
        dt.users
        
        a
        
        img //紙型アイコン
        
        span.label //text:「詳細」
        
        dd.users
        
        strong | em | //※数が多い時に２段階
        
        a
        
        dd.add //B!アイコン
        
        a
        
        img //B!アイコン
        
        dt.timestamp //追加日
        
        span.label //text:「追加日」
        
        dd.timestamp //追加日
        
        dd.edit //編集
        
        a
        
        img //鉛筆型アイコン
        
        dd.delete //削除
        
        form.delete
        
        input //消しゴム型アイコン
        
        dd.comment //ユーザーのコメント
        
        img //ふきだし型アイコン
        
        span.tag //タグの数だけ繰り返し
        
        a
        
        span.comment //コメント本体
        
        dd.content //ページの内容 (詳細ページ)
      - div.pager
        
        p
        
        a
    - （ユーザーの入力したフッタHTMLがここに挿入されます）

■ タグ リスト絞り込み

通常時

div.taglist
- div.taglist-widget
  - h3
    - span.tagcount
    - input.tag_search //#tag_search
  - ul.taglist //#taglist
    - li
      - a.tag-latest //↑新
      - a.tag-later
      - a.tag-earlier
      - a.tag-earliest //↓旧

絞り込み時

div.taglist
- div.taglist-widget
  - h3
    - span.tagcount
    - input.tag_search //#related-tag_search
  - p.tagcrumbs
    - a
  - ul.taglist //#related-taglist
    - li
      - a
- div.taglist-widget
  - h3
    - span.tagcount
    - input.tag_search //#tag_search
  - ul.taglist //#taglist
    - li
      - a.currenttag //
      - a.tag-latest //↑新
      - a.tag-later
      - a.tag-earlier
      - a.tag-earliest //↓旧

■ コメント直接編集

通常時

dl.bookmarklist // idとして bookmark-xxxxxxxが付加されている
- dt.bookmark
  - a.bookmark
- dd
- dd.comment
  - img // コメント直接編集のトリガー
  - span.tag // tag
  - span.comment // コメント本体
- dd.content

編集時

dl.bookmarklist // idとして bookmark-xxxxxxxが付加されている
- dt.bookmark
  - a.bookmark
- dd
- dd.editinsitu-edit // (dd.commentでも可)
  - form
    - img // ふきだし型アイコン
    - input.editinsitu-input // コメント欄
    - span.editinsitu-count // 文字数
    - div.editinsitu-candidates // タグ候補
      - div
        
        span // 各タグ候補
        
        div // 「決定[Enter]/ 選択[Tab][←][→]
    - input.editinsitu-cancel // キャンセル
    - input.editinsitu-submit // 変更
- dd.content

■ コレクションページの構造

通常ページの構造

html
- body
  - div#banner //省略
  - div#bannersub //省略
  - div.body
    - div.breadcrumbs //パンくずリスト。以下省略
    - div.header //タイトルなど。以下省略
    - div.main
      - div.taglist //タグリスト。以下省略
      - div.asinlist //ASINのリスト。
        
        dl.asinlist //アイテムごとに生成される。
        
        dt.asin
        
        a.asin
        
        img.asin //ASIN 画像
        
        dd
        
        dl
        
        dt.users
        
        a
        
        img //紙型アイコン
        
        span.label //text:「詳細」
        
        dd.users
        
        a //n users //3 users以上でemの下にa //10 users以上でstrongの下にa ?
        
        dt.edit //text:「編集」 //ここだけspan.labelじゃないので注意
        
        dd.edit
        
        a
        
        img //鉛筆アイコン
        
        dd.delete
        
        form.delete
        
        input //消しゴム型ボタン

コレクション詳細ページ(/user/asin?mode=detail)の構造

html
- body
  - div.body
    - div#banner //以下略
    - div#bannersub //以下略
    - div.main
      - div.pager //以下略
      - div.taglist //以下略
      - dl.asindetail //直下のdtとddがコレクション数分繰り返します。
        
        dt.bookmark
        
        a.bookmark
        
        dd
        
        dl
        
        dt.image
        
        span.label //text：「商品画像：」
        
        dd.image
        
        a
        
        img
        
        dd
        
        dl
        
        dt.publisher
        
        span.label //text：「出版社／メーカー：」
        
        dd.publisher
        
        a.keyword //出版社・メーカー名
        
        dt.artist //CD
        
        span.label //text：「アーティスト：」
        
        dd.artist
        
        a.keyword //アーティスト名
        
        dt.author //書籍
        
        span.label //text：「作者：」
        
        dd.author
        
        a.keyword //作者名
        
        dt.director //DVDなど
        
        span.label //text：「監督：」
        
        dt.actor //DVDなど
        
        span.label //text：「出演：」
        
        dd.director
        
        a.keyword //監督名・出演者名
        
        dt.keyword
        
        img //辞書アイコン
        
        span.label //text：「キーワード」
        
        dd.keyword //キーワード毎に生成
        
        a.keyword //キーワード
        
        dt.users
        
        a
        
        img //紙型アイコン
        
        span.label //text:「詳細」
        
        dd.users
        
        a //n user // 3 users以上でemの下にa, 10 users以上でstrongの下にa
        
        dt.timestamp
        
        span.label //text:「追加日」
        
        dd.timestamp //日付
        
        dd.edit
        
        a
        
        img //鉛筆アイコン
        
        dd.delete
        
        form.delete
        
        input //消しゴム型ボタン
        
        dd.comment
        
        span.tag //タグが存在するとき, タグの数分
        
        a //タグ内リンク
        
        span.comment //コメント本体
      - br //(style="clear:both;")
  - div#message

■ メモ

span.labelのところは非表示になっています。
共通のモジュールについてははてなダイアリーと同じ構造でした
タグの文字サイズは要素にstyle属性直書きなのではてな任せが妥当
ヘッダのロゴは消しちゃ駄目ですよ！
漏れがあるかも知れません。今構造を分かりやすくする方法を考えています。

「はてなブックマークの構造」を含む日記

2006-06-15
- 186(css)
2006-04-22
- 186(css)
2005-06-15
- CSSグループ管理者の日記

「はてなブックマークの構造」を含むキーワード

2007/01/06 17:26:21 はてなブックマークの構造

「はてなブックマークの構造」へのトラックバック (10) -

2007-08-23 22:40:20 DesignWorksの手帳
2007-01-06 02:15:57 186::Diary
2006-12-07 17:40:50 チープカ
2006-06-14 00:37:15 186::Diary
2006-04-30 01:07:05 はてなダイアリー - KLaxon - O.P. on HATENA
2006-04-20 00:43:40 186::Diary
2005-09-22 15:55:30 WeBLoG
2005-09-15 12:43:07 WeBLoG
2005-08-18 20:40:10 magicink today
2005-06-15 22:39:02 ?d:kamioka

BBSスレッド一覧