だーしゃのＣＳＳ講座　ブログの構造を理解してみよう！

だーしゃのＣＳＳ講座

第三回　ブログの構造を理解してみよう！

まずてぃーだブログのテンプレートについてなのですが、
ＦＡＱブログでちょりっと説明が機械的に書かれていました。

■ＦＡＱブログ：スタイルシートについて

ん～と多分これだけでは訳わからないですよね。。。

ということで今回はスタイルシートを図解で説明してみましょう～。
ブログの構造は基本的に下地から上に積み重なるようになっています。

まず下地のクラス、

#container

その上に4つのクラスが乗っています


＃banner,subbanner
#content
#links
#footer

イメージ的にはこんな感じ↓



基本的にこの大まかなところを把握しているとあとはわかりやすいですよ。


さらにその上に色々と乗ってきます、
たとえば

#content

これはブログの記事部分になるのですが、その上に

.blog
.trackback
.comments

が乗ってきます。こんな感じ↓



さらに.blogの上には、 .blogbodyが乗っています。
こんな感じ↓



そして.blogbodyの上には記事の部分となるクラスが乗っています。

.date
.titile
.main
.posted



ここまでみたら大体どんな感じなのか把握できてきましたね（＾＾）！

あとは一気におさらいです。
＃banner,subbanner
∟.blogtitile
∟.description

#links
∟.sidetile
∟.side

#footer
∟.copyright


そのほかのところにも色々と乗ってきてますね。
ほんとはもう少し細かいのですが、大体の構造を理解したのではないでしょうか。
そこに来てこの表の意味が大体わかると思います。



こんな構造になっているわけですよ。
結構複雑そうに見えるのですが、簡単ですよね。

あと#linksの中にあるカレンダーについてはちょっと複雑な構造なのではずしましたが、基本的には同じ感じです。

ざっとですが、今回はブログの基本的な構造についてでした。
しかし絵が下手ですいません。まだphotoshop扱い切れてないです。

大まかなつくりがわかれば応用が利きますからね。
色々と試していきましょ～！


FAQBLOGを参考にしてもＯＫですよー。
http://faq.ti-da.net/e412044.html




それでは又次回！！！

だーしゃのCSS講座　

▼CSS講座

2006-04-11 だーしゃのCSS講座　写真に自動で白縁をつけたい！

2005-12-29 だーしゃのCSS講座　引用文に色を付けてみよう！

2005-09-02 だーしゃのCSS講座　線のカスタマイズしよう！

2005-07-28 だーしゃのCSS講座　背景画像及び背景色を変更してみよう！

2005-07-21 だーしゃのCSS講座　ブログタイトルの位置を変更してみよう！

2005-07-18 だーしゃのCSS講座　ブログタイトルの色を変えてみよう！

2005-07-17 だーしゃのＣＳＳ講座　ブログの構造を理解してみよう！

2005-07-11 だーしゃのCSS講座　カスタムプラグインをかっこよく！

2005-07-10 だーしゃのCSS講座　ヘッダーの画像を変えてみよう！