「livedoor BlogのCSSアレンジ(2)」から1年と5ヶ月の歳月を経ての続編…(爆)
上の記事に掲載した画像とどっちが分かりやすいでしょう?
カレンダー部分はちょっとわかりやすくなったかもしれません。
というか、この図はどこかで見た記憶があるので、きっと既にどなたかが描いておられるでしょう。まあせっかく書いたのでエントリーします。
参考にさせていただいたのは下記の記事です。
はてなブックマークの構造(?d:kamioka)
- body
- #container
- #banner//タイトル領域
- .blogtitle//ブログのタイトル
- a
- .description//ブログの説明
- .blogtitle//ブログのタイトル
- #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
- td
- tr
- .blog
- #banner//タイトル領域
- #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//曜日文字
- td
- tr
- table//カレンダー各日テーブル
- tr
- td
- .calendard//無投稿日
- span.calendar
- .calendardbg//投稿日
- span.calendar
- a.acalendar//投稿日リンクスタイル
- span.calendar
- .calendard//無投稿日
- td
- tr
- table//カレンダー曜日テーブル
- td
- tr
- #footer//フッター
- #container
この記事をエントリーした現在のこのブログの構成ですと、細かいところは抜きにして、下記のようになります。
シンプルにした分、CSSがちょっと煩雑になっとりますです。
- body
- #blogtitle//ブログタイトル
- #description//ブログの説明
- .entry_title//記事タイトル
- .entry_category//記事のカテゴリーと日付
- .entry_body//記事本文
- p
- a
- a.topic//強調したいリンクスタイル
- br.body_end//float解除用改行文字
- p
- p.posted//投稿情報
- a
- .entry_footer//記事下広告
- #links(以下、略)
- #searchbox//検索窓
- #topnavi//トップナビゲーション