livedoor BlogのCSSアレンジ(2)」から1年と5ヶ月の歳月を経ての続編…(爆)

上の記事に掲載した画像とどっちが分かりやすいでしょう?

カレンダー部分はちょっとわかりやすくなったかもしれません。

というか、この図はどこかで見た記憶があるので、きっと既にどなたかが描いておられるでしょう。まあせっかく書いたのでエントリーします。

参考にさせていただいたのは下記の記事です。

はてなブックマークの構造(?d:kamioka)

  • body
    • #container
      • #banner//タイトル領域
        • .blogtitle//ブログのタイトル
          • a
        • .description//ブログの説明
      • #content//記事部分 ※トップページのみ
        • .blog
          • .date//投稿日付
          • .blogbody
            • .title//記事タイトル
            • .main//記事本文
              • img.pict//記事中画像
              • span.main-continues//「続きを読む」
                • a.acontinues//「続きを読む」のリンクスタイル
            • .posted//投稿情報
              • a.aposted//投稿情報リンクスタイル
          • .pagetop//「ページトップへ」
            • a.aposted
          • .title//「この記事へのトラックバックURL」
          • .trackback-url//当該記事のトラックバックURL
          • .trackback-body//トラックバック元記事要約
          • .trackback-post//トラックバック元記事情報
            • a.atrackback-post
          • .comments-head//「この記事へのコメント」
          • .comments-body//コメント本文
          • .comments-post//コメント者情報
            • a.aposted//コメント者リンクスタイル※変な命名(笑)
          • table.form//コメント投稿フォーム
            • tr
              • td
                • input#author
                • input#email
                • input#url
                • input#author
                • input#bake
                • textarea#text
      • #links//サイドバー ※トップページのみ
        • .sidetitle//コラムタイトル
        • .side//コラム本体
          • .sidebody//コラム項目
          • .photo//プロフィール画像
          • .nickname//プロフィール名前
          • .message//プロフィール本文
        • a.aside//サイドバー内リンクスタイル
        • .powered//livedoorバナー
        • .syndicate//RSSリンク
        • table.checkers//チェッカーズ表示用テーブル
        • .calendarhead//カレンダータイトル
        • table.calendartable//カレンダー本体テーブル
          • tr
            • td
              • table//カレンダー曜日テーブル
                • tr
                  • td
                    • span.calendarweek//曜日文字
              • table//カレンダー各日テーブル
                • tr
                  • td
                    • .calendard//無投稿日
                      • span.calendar
                    • .calendardbg//投稿日
                      • span.calendar
                        • a.acalendar//投稿日リンクスタイル
      • #footer//フッター

この記事をエントリーした現在のこのブログの構成ですと、細かいところは抜きにして、下記のようになります。

シンプルにした分、CSSがちょっと煩雑になっとりますです。

  • body
    • #blogtitle//ブログタイトル
    • #description//ブログの説明
    • .entry_title//記事タイトル
    • .entry_category//記事のカテゴリーと日付
    • .entry_body//記事本文
      • p
        • a
        • a.topic//強調したいリンクスタイル
      • br.body_end//float解除用改行文字
    • p.posted//投稿情報
      • a
    • .entry_footer//記事下広告
    • #links(以下、略)
    • #searchbox//検索窓
    • #topnavi//トップナビゲーション