css構造::はてなダイアリー

css構造::はてなダイアリー

出典:ガイドグループのkamiokaさんの日記2005/07/29分

以下ははてなダイアリーHTML構造のルーズっぷりとそれに伴うテーマ制作の大変さを理解してもらうための構造解析です(笑)

実質、以下のケースをすべて把握していないとはてなダイアリーのテーマを作成することは出来ません。是非この構造のルーズさに大しても問題意識を持っていただければと思います。

通常(/userID/)

サイドバーフッタ
ありなし

コメント入力ページ(/userID/comment)

サイドバーフッタ
ありあり

  • div.day
    • h2 //省略
    • div.body //省略
    • div.comment
      • div.caption
      • div.commentshort
        • form
          • input[type="hidden"]
          • p
            • input[type="submit"] //『コメントを削除する』
          • p
            • input[type="checkbox"]//ユーザー時
            • a //ユーザー時
              • span.commentator //ユーザー時
            • span.canchor //ゲスト時
            • span.commentator //ゲスト時
        • form.comment
          • input[type="hidden"]
          • p
            • span.canchor //#
            • input.field[type="text"] //名前入力欄(ゲスト許可時)
            • br
            • textarea //本文入力欄
            • input[type="submit"] //『投稿』
    • div.refererlist(リンク元トラックバックおとなり日記 //公開時)
      • ul
        • li
          • a

クラシック編集(/userID/edit)

サイドバーフッタ
なしあり

  • div.day
    • form
      • input[type="hidden"]
      • h2
        • span.date
          • input[type="text"] //日付
        • span.title
          • input[type="text"] //タイトル
      • div.body
        • textarea //本文
        • br
        • p.footnote //※
        • input[type="button"].field
        • input[type="submit"] //『この内容を登録する』
        • input[type="checkbox"]
        • span[style="font-size: smaller;"] //ちょっとした更新など
          • a
    • div.comment
      • form
        • input[type="hidden"]
        • div.caption
          • a[name="c"]
    • form
    • form
      • div.refererlist
        • input[type="hidden"]
        • input[type="submit"] //この日を削除

簡易設定(/userID/config)

サイドバーフッタ
なしあり

  • div.day
    • form
      • input[type="hidden"]
      • h2
        • span.title
      • div.body
        • h3.subtitle
          • p
            • input[type="text"]
            • select
              • option
          • input[type="submit"] //『この内容に変更する』
  • div.day

かんたんデザイン設定(/userID/design)

サイドバーフッタ
なしあり

  • div.day //かんたんデザイン設定
    • form
      • input[type="hidden"]
      • h2
        • span.title
      • div.body
        • h3.subtitle
        • p
          • script //「Hatena」テーマ用Javascript
          • table
            • tr //「Hatena」テーマ
              • td
              • td //「Hatena」テーマの色選択
                • table
                  • tr
                    • td
                      • input[type="radio"]
                      • span[style="color: #******;"] //『■』
            • tr //その他のテーマ
              • td
                • a
                  • img
                • div.themelabel
                  • input[type="radio"]
          • input[type="checkbox"] //モジュール選択のチェックボックス
          • select //clockモジュールの選択
            • option
        • div#clockflash //clockのサンプル
          • object#clock
            • param
              • embed
        • p.message //『詳細設定画面から・…』(デフォルトでは赤字の注意事項)
        • input[type="submit"] //『この内容で設定する』
        • input[type="button"] //『ウィンドウを閉じる』

詳細設定(/userID/configdetail)

サイドバーフッタ
なしあり

  • div.day //日記の設定
    • form
      • input[type="hidden"]
      • h2
        • span.title
      • div.body
    • form
      • input[type="hidden"]
      • input[type="submit"] //『初期状態に戻す』
  • div.day //ダウンロード
    • h2
      • span.title
    • div.body
      • h3.subtitle
      • p
        • a
  • div.day //キーワードの再抽出
    • form
      • input[type="hidden"]
      • h2
        • span.title
      • div.body
        • h3.subtitle
        • p
        • input[type="submit"] //『再抽出』
  • div.day //日記のエクスポート・インポート・削除
    • h2
      • span.title
    • form
      • input[type="hidden"]
      • div.body
        • h3.subtitle
        • p
          • a
        • input[type="file"]
        • input[type="submit"] //『インポート』

アバウトページ(/userID/about)

サイドバーフッタ
なしなし

見出し一覧(/userID/archive)

サイドバーフッタ
なしなし

  • div[style="margin-top: 20px;"]
  • div.day
    • h2
      • a
        • span.title //『記事一覧』
      • form[style="margin:0;display:inline;"]
        • input[type="text"] //検索語入力フォーム
        • input[type="submit"] //『検索』
    • div.body
      • div.section
  • div[style="margin-top: 20px;"]