Hatena::Groupenable

はてなモジュールの構造

はてなモジュールの構造

基本構造

一部のモジュールを除いて、以下の構造となります。

div.hatena-module には、モジュール名に対応したクラス名が併せて与えられています。

  • div.hatena-module(.hatena-module-module_name)
    • div.hatena-moduletitle
      • a
    • div.hatena-modulebody
      • ul, dl, table, form, div, span, a, img...

Hatena::Diary, Hatena::Group共通

日記に関する情報

calendarモジュール
  • div.hatena-module-calendar
    • div.hatena-moduletitle
    • div.hatena-modulebody
      • div.calendar
        • a
        • br // 年度毎の改行
calendar2モジュール
  • div.hatena-module-calendar2
    • div.hatena-moduletitle
    • div.hatena-modulebody
      • table.calendar
        • tr
          • td.calendar-prev-month
            • a
          • td.calendar-current-month
            • a
          • td.calendar-next-month
            • a
        • tr
          • td.calendar-sunday
          • td.calendar-weekday
          • td.calendar-saturday
        • tr
          • td.calendar-day
            • a
          • td.calendar-day.day-today // はてなダイアリー
            • a
          • td.calendar-day.day-selected // はてなダイアリー
            • a
calendar2photoモジュール
  • div.hatena-module-calendar2
    • div.hatena-moduletitle
    • div.hatena-modulebody
      • table.calendar
        • tr
          • td.calendar-prev-month
            • a
          • td.calendar-current-month
            • a
          • td.calendar-next-month
            • a
        • tr
          • td.calendar-sunday
          • td.calendar-weekday
          • td.calendar-saturday
        • tr
          • td.calendar-day
            • a
              • img
          • td.calendar-day.day-today // はてなダイアリー
            • a
              • img
          • td.calendar-day.day-selected // はてなダイアリー
            • a
              • img
calendar2jphotoモジュール
  • object#movie
commentモジュール
  • div.hatena-module-comment
    • div.hatena-moduletitle
    • div.hatena-modulebody
      • ul.hatena-recentcomment
        • li
          • a // 日付
        • li...
photoモジュール
  • div.hatena-module-photo
    • div.hatena-moduletitle
    • div.hatena-modulebody
      • ul.hatena-photo
        • li
          • a
            • img
        • li...

rssモジュールtemplate="hatena-photo" を指定した場合もこの構造になります。

searchformモジュール
  • div.hatena-module-searchform
    • div.hatena-moduletitle
    • div.hatena-modulebody
      • form.hatena-searchform
        • input.hatena-searchform // 検索語フォーム
        • input.hatena-searchform // 検索ボタン
        • input *1 // ラジオボタン
sectionモジュール
  • div.hatena-module-section
    • div.hatena-moduletitle
      • a
    • div.hatena-modulebody
      • ul.hatena-section
        • li
          • a *2 // カテゴリ
          • a // 記事へのリンク
        • li...
sectioncategoryモジュール
  • div.hatena-module-sectioncategory
    • div.hatena-moduletitle
    • div.hatena-modulebody
      • ul.hatena-sectoncategory
        • li
          • a
        • li...
      • form.hatena-sectioncategory
        • select.hatena-sectioncategory
          • option.hatena-sectioncategory // カテゴリ名
          • option.hatena-sectioncategory...
        • input.hatena-sectioncategory // 送信ボタン
trackbackモジュール
  • div.hatena-module-trackback
    • div.hatena-moduletitle
    • div.hatena-modulebody
      • ul.hatena-recentcomment
        • li
          • a // 日付
          • a // トラックバック元
        • li...

最新URL系

antennaモジュール
  • div.hatena-module-antenna
    • div.hatena-moduletitle
      • a
    • div.hatena-modulebody
      • ul.hatena-antenna
        • li
          • a
        • li...
haikuモジュール?
  • div.hatena-module-haiku
    • div.hatena-moduletitle
      • a
    • div.hatena-modulebody
      • dl.hatena-haiku
        • dt
          • a
        • dd
        • dt, dd...
keywordモジュール?
  • div.hatena-module-keyword
    • div.hatena-moduletitle
      • a
    • div.hatena-modulebody
      • ul.hatena-keyword
        • li
          • a
        • li...
questionモジュール?
  • div.hatena-module-question
    • div.hatena-moduletitle
      • a
    • div.hatena-modulebody
      • ul.hatena-question
        • li
          • a
        • li...
rssモジュール?
  • div.hatena-module-rss
    • div.hatena-moduletitle
      • a
    • div.hatena-modulebody
      • ul.hatena-rss
        • li
          • a
        • li...
      • dl.hatena-rss // desclength属性指定時
        • dt
          • a
        • dd
        • dt,dd ...
      • ul.hatena-photo // temmplate="hatena-photo" 時
        • li
          • a
            • img
        • li...

注目URL系

hotstarモジュール?
  • div.hatena-module-hotstar
    • div.hatena-moduletitle
      • a
    • div.hatena-modulebody
      • ul.hatena-hotstar
        • li
          • a
          • span.hatena-star-comment-container
            • img.hatena-star-comment-button
          • span.hatena-star-star-container
            • img.hatena-star-add-button
            • a
              • img.hatena-star-star
            • a...
        • li...

言及系

asinlogモジュール?
  • div.hatena-module-asinlog
    • div.hatena-moduletitle
    • div.hatena-modulebody
      • ul.hatena-asinlog
        • li
          • a
        • li...
urllogモジュール?
  • div.hatena-module-urllog
    • div.hatena-moduletitle
    • div.hatena-modulebody
      • ul.hatena-urllog
        • li
          • a
        • li...

Adsense系

adsenseモジュール?
  • div.ad
    • iframe
amazonモジュール?
  • div.hatena-module-amazon
    • div.hatena-moduletitle
    • div.hatena-modulebody
      • iframe

カウンター系

bcounterモジュール?
  • div.hatena-module-bcounter
    • div.hatena-moduletitle
    • div.hatena-modulebody
      • a
        • img.bcounter
counterモジュール?
  • div.hatena-module-counter
    • div.hatena-modulebody
      • span.hatena-counter
        • a
          • img // カウンターを画像にした場合
pvモジュール?
  • div.hatena-module-pv
    • div.hatena-moduletitle
    • div.hatena-modulebody
      • span.hatena-counter

その他の情報

barcodeモジュール?
  • div.hatena-module-barcode
    • div.hatena-modulebody
      • a
        • img
blogpetモジュール?
  • div.hatena-module-blogpet
    • div.hatena-modulebody
      • object#usa
clockモジュール?
  • div.hatena-clock
    • object#clock
graphモジュール?
  • div.hatena-module-graph
    • div.hatena-moduletitle
      • a
    • div.hatena-modulebody
      • div.hatena-graph
        • a
          • img.hatena-graph
ringモジュール?
  • div.hatena-module-ring
    • div.hatena-modulebody
      • span#hatena-ring-sid*3
        • img#hatena-ring-sid-image // リングアイコン
      • span
        • span#hatena-ring-window
          • div#hatena-ring-window-sid // アイコンのクリックでトグル
            • div.hatena-ring
              • div.hatena-ring-title // リングのタイトル
                • table
                  • tr
                    • td
                      • a
                        • img
                    • td
                      • a
                        • img
              • div.hatena-ring-content // prev, random, next
                • table
                  • tr
                    • td
                      • a
                        • img
rsstimesモジュール?
  • div.hatena-module-rsstimes
    • div.hatena-modulebody
      • img.hatena-rsstimes

ナビゲーション

menuモジュール?
  • div.adminmenu
    • span.adminmenu
      • a

その他

ブログパーツ(Widget)
  • div.hatena-widget
    • (ブログパーツのHTML)
リンク集(かんたんデザイン設定)
  • div.hatena-module
    • div.hatena-moduletitle
    • div.hatena-modulebody
      • ul.hatena-urllist
        • li
          • a
        • li...

Hatena::Diary専用

日記に関する情報

keywordcloudモジュール?
  • div.hatena-module-keywordcloud
    • div.hatena-moduletitle
      • a
    • div.hatena-modulebody
      • ul.keywordcloud // 何故か hatena- がついてない
        • li
          • a.keywordcloud0 // ↑ 言及頻度が少ない
        • li
          • a.keywordcloud1
        • li
          • a.keywordcloud2
        • li
          • a.keywordcloud3
        • li
          • a.keywordcloud4
        • li
          • a.keywordcloud5
        • li
          • a.keywordcloud6
        • li
          • a.keywordcloud7
        • li
          • a.keywordcloud8
        • li
          • a.keywordcloud9
        • li
          • a.keywordcloud10 // ↓ 言及頻度が多い
        • li...
mycommentモジュール?
  • div.hatena-module-mycomment
    • div.hatena-moduletitle
    • div.hatena-modulebody
      • ul.hatena-recentcomment
        • li
          • a
        • li...
profileモジュール?
  • div.hatena-module-profile
    • div.hatena-moduletitle
    • div.hatena-modulebody
      • div.hatena-profile
        • p.hatena-profile-image
          • a
            • img
        • p.hatena-profile-id
          • a
        • p.hatena-profile-body

最新URL系

eanモジュール?
  • div.hatena-module-ean
    • div.hatena-moduletitle
    • div.hatena-modulebody
      • ul.hatena-ean
        • li
          • a
        • li...

注目URL系

hotkeywordモジュール?
  • div.hatena-module-hotkeyword
    • div.hatena-moduletitle
      • a
    • div.hatena-modulebody
      • ul.hatena-hotkeyword
        • li
          • a
        • li...
hoturlモジュール?
  • div.hatena-module-hoturl
    • div.hatena-moduletitle
      • a
    • div.hatena-modulebody
      • ul.hatena-hoturl
        • li
          • a
        • li...
hotasinモジュール?
  • div.hatena-module-hotasin
    • div.hatena-moduletitle
      • a
    • div.hatena-modulebody
      • ul.hatena-hotasin
        • li
          • a
        • li...
hoteanモジュール?
  • div.hatena-module-hotean
    • div.hatena-moduletitle
      • a
    • div.hatena-modulebody
      • ul.hatena-hotean
        • li
          • a
        • li...
hotrakutenモジュール?
  • div.hatena-module-hotrakuten
    • div.hatena-moduletitle
      • a
    • div.hatena-modulebody
      • ul.hatena-hotrakuten
        • li
          • a
        • li...
hotvideoモジュール?
  • div.hatena-module-hotvideo
    • div.hatena-moduletitle
      • a
    • div.hatena-modulebody
      • ul.hatena-hotvideo
        • li
          • a
        • li...

言及系

eanlogモジュール?
  • div.hatena-module-eanlog
    • div.hatena-moduletitle
    • div.hatena-modulebody
      • ul.hatena-eanlog
        • li
          • a
        • li...
rakutenlogモジュール?
  • div.hatena-module-rakutenlog
    • div.hatena-moduletitle
    • div.hatena-modulebody
      • ul.hatena-rakutenlog
        • li
          • a
        • li...

ナビゲーション

breadcrumbsモジュール?
  • div.breadcrumbs
    • a

Hatena::Group専用

グループ情報

groupaboutモジュール?
  • div.hatena-module-groupabout
    • div.hatena-moduletitle
      • a
    • div.hatena-modulebody
      • p.hatena-profile-body
      • ul.hatena-groupabout
        • li
          • a
        • li...
groupantennaモジュール?
  • div.hatena-module-groupantenna
    • div.hatena-moduletitle
      • a
    • div.hatena-modulebody
      • ul.hatena-antenna
        • li
          • a
        • li...
groupsearchformモジュール?
  • div.hatena-module-groupsearchform
    • div.hatena-moduletitle
    • div.hatena-modulebody
      • form.hatena-searchform
        • input.hatena-searchform
topictreeモジュール?
  • div.hatena-module-topictree
    • div.hatena-moduletitle
      • a
    • div.hatena-modulebody
      • ul.hatena-topictree
        • li
          • a
          • ul.hatena-topictree-leaf
            • li
              • a
            • li...
        • li...

グループキーワード

keywordcontentモジュール?
  • div.hatena-module-keywordcontent // template="hatena-module" 時
    • div.hatena-moduletitle
      • a
        • span.title
      • a.edit // edit="true" 時
    • div.hatena-modulebody
      • (キーワード内容)...
  • div.day // template="diary" 時
    • h2
      • a
        • span.title
      • a.edit // edit="true" 時
    • div.body
      • img.photo
      • (キーワード内容)... // 各セクションは見出し一段/二段表示の設定が連動
keywordformモジュール?
  • div.hatena-module-keywordform
    • div.hatena-moduletitle
    • div.hatena-modulebody
      • form.hatena-keywordform
        • input.hatena-keywordform

グループの掲示板

bbsモジュール?
  • div.hatena-module-bbs
    • div.hatena-moduletitle
      • a
    • div.hatena-modulebody
      • ul.hatena-bbs
        • li
          • a
        • li...

グループカレンダー

groupcalendarモジュール?
  • div.hatena-module-groupcalendar
    • div.hatena-moduletitle
      • a
    • div.hatena-modulebody
      • table.calendar
        • tr
          • td.calendar-prev-month
            • a
          • td.calendar-current-month
            • a
          • td.calendar-next-month
            • a
        • tr
          • td.calendar-sunday
          • td.calendar-weekday
          • td.calendar-saturday
        • tr
          • td.calendar-day
            • a
scheduleモジュール?
  • div.hatena-module-schedule
    • div.hatena-moduletitle
      • a
    • div.hatena-modulebody
      • ul.hatena-calendar
        • li
          • a
        • li...

グループのあしか

taskモジュール?
  • div.hatena-module-task
    • div.hatena-moduletitle
      • a
    • div.hatena-modulebody
      • ul.hatena-task
        • li
          • a
        • li...
      • form.hatena-taskform
        • input

*1type="simple" 非指定時

*2showcategory="false" 非指定時

*3:はてなリングのsid値