Seesaa BlogのトップページのCSS（スタイルシート）を解析: undershaft newralnet works

Seesaa BlogのトップページのCSS（スタイルシート）を解析

• 2008年06月08日 at 11:40
• Comment(0)
• TrackBack(0)
• Seesaa Blog(シーサー ブログ)

先日、「これでCSSを覚える必要がなくなる!?『Web Developer 日本語版』」で紹介した『Web Developer 日本語版』を利用して、Seesaa Blog（シーサーブログ）のトップページのCSS（スタイルシート）を解析してみました。

単純な構成であることに気づきますが、HTML部分がトップページ、記事ページ、カテゴリページ・・・で異なっているため、それらをふまえてカスタマイズしていかなければなりません。

今回、サイドメニューのカレンダーとSeesaa Blogが提供するブログパーツ等は削除しました。記事本文下の広告は、まだ表示されていないため「空白」になっています。

各番号のCSS要素

トップページを構成する部分を5つに分け、それぞれのCSSの要素を番号で割り振っています。

全体

�@：html > body
�A：html > body > div #container

ヘッダー

H�@：html > body > div #container > div #banner
H�A：html > body > div #container > div #banner > h1
H�B：html > body > div #container > div #banner > h1 > a
H�C：html > body > div #container > div #banner > span .description

コンテンツ

C�@：html > body > div #container > div #content
C�A：html > body > div #container > div #content > div .blog > h2 .date
C�B：html > body > div #container > div #content > div .blog > div .blogbody
C�C：html > body > div #container > div #content > div .blog > div .blogbody > h3 .title
C�D：html > body > div #container > div #content > div .blog > div .blogbody > div .text
C�E：html > body > div #container > div #content > div .blog > div .blogbody > div .text > a
C�F：html > body > div #container > div #content > div .blog > div .blogbody > div .text > div #article-ad
C�G：html > body > div #container > div #content > div .blog > div .blogbody > div .text > div .bookmark
C�H：html > body > div #container > div #content > div .blog > div .blogbody > div .posted

サイド

S�@：html > body > div #container > div #links
S�A：html > body > div #container > div #links > div .sidetitle
S�B：html > body > div #container > div #links > div .side
S�C：html > body > div #container > div #links > div .syndicate

フッター

F�@：html > body > div #container > div #footer
F�A：html > body > div #container > div #footer > div .powered
F�B：html > body > div #container > div #footer > div .powered > table > tbody > tr > td > a > img
F�C：html > body > div #container > div #footer > div .powered > table > tbody > tr > td > div

Seesaa BlogのCSS（スタイルシート）解析の今後

今後は、記事ページやコメント・トラックバック部分など、さらに詳しく解析していきたいと思います。

*コメント・トラックバック部分のCSSの解析を行いました。

各番号のCSS要素

コメントとトラックバック部分のCSS要素を番号で割り振っています。

全体

�@：html > body
�A：html > body > div #container
�B：html > body > div #container > div #content

コメント

C�@：html > body > div #container > div #content > div #comments > div .comments-head
C�A：html > body > div #container > div #content > div #comments > div .comments-body
C�B：html > body > div #container > div #content > div #comments > div .comments-body > div .text
C�C：html > body > div #container > div #content > div #comments > div .comments-body > div .comments-post
C�D：html > body > div #container > div #content > div #comments > div .comments-head
C�E：html > body > div #container > div #content > div #comments > form > div .comments-body
C�F：html > body > div #container > div #content > div #comments > form > div .comments-body > input

トラックバック

T�@：html > body > div #container > div #content > div #trackback
T�A：html > body > div #container > div #content > div #trackback > hr

タグ：seesaa blog シーサーブログ ブログ blog CSS スタルシート

スポンサード リンク

【Seesaa Blog(シーサー ブログ)の最新記事】

• Seesaa Blog(シーサーブログ)...
• Seesaa Blog(シーサーブログ)...
• ブログのコメント・トラックバックのURL...
• Seesaa Blog（シーサー ブログ...