2005年07月17日
だーしゃのCSS講座 ブログの構造を理解してみよう!
だーしゃのCSS講座
第三回 ブログの構造を理解してみよう!
まずてぃーだブログのテンプレートについてなのですが、
FAQブログでちょりっと説明が機械的に書かれていました。
■FAQブログ:スタイルシートについて
ん~と多分これだけでは訳わからないですよね。。。
ということで今回はスタイルシートを図解で説明してみましょう~。
ブログの構造は基本的に下地から上に積み重なるようになっています。

まず下地のクラス、
#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を参考にしてもOKですよー。
http://faq.ti-da.net/e412044.html
それでは又次回!!!
だーしゃのCSS講座
■関連記事一覧
↓
CSS&ブログの活用講座!
この記事へのトラックバックURL
http://daxiazzz.ti-da.net/t448157
この記事へのトラックバック
リニューアルしました【なちゃっと食館】at 2005年07月17日 22:21
スタイルシートめ【夜中4時の寂しさ的なクーラー病】at 2005年09月14日 18:45
スタイルシートめ【夜中4時の寂しさ的なクーラー病】at 2005年09月14日 18:45
|
|
近江日記はオリジナルテンプレートを利用しています。アーカイブの箇所を変更し忘れていたので改めて書き換えました。現在、ブログを始めるきっかけとなったSo-netのブログでも色々カス... |
オリジナルテンプレート【近江日記】at 2007年01月15日 05:00
ブログの構造【お得情報の豆知識】at 2007年05月13日 12:15
この記事へのコメント
Posted by めぐみ@離島 at 2005年07月17日 08:08
|
|
ほんとすごいです! 見てパッと感覚的に「Blog」ってこんななってるんだ~とわかりました。 だーしゃサンってめっちゃすごいですねー!! 今日こそはヘッダーの画像変えられるように もう一回がんばってみます。 |
Posted by sun at 2005年07月17日 08:43
Posted by 近所の友人 at 2005年07月17日 09:01
Posted by お玉 at 2005年07月17日 09:02
|
|
すっごく分かりやすかったです!!! ありがとうございます~~~ 今まではただ何となくカンでいじってましたが(汗)、こんなになってるんですね~ ちょっとお手上げな感じでしたが、少しがんばってみようかと思いました(^o^)丿 |
Posted by みなみ at 2005年07月17日 09:22
Posted by ばんび@久米島 at 2005年07月17日 10:48
Posted by だーしゃ at 2005年07月17日 11:34
|
|
私も今日CSSいじってリニューアルしました。 紙に手書きでてぃーだブログの構造書いてたら、 タイミングよくだーしゃさんがこのエントリーしてくれたので、 手書きで書くのを途中でやめて、 このエントリー見ながらリニューアルしたよ(笑) ありがとう!!! |
Posted by なっちゃん at 2005年07月17日 22:19
|
|
■なっちゃんさんへ こんにちは!ちょうどリニューアルされてたんですね! お役に立ててよかったですよ~ そして新しいデザインすごくいいじゃないですかぁ(^^)! オレンジがとってもいい感じですよ。 自画像も入ってるし(^^)! さすがなっちゃんさんですね~、いいセンスしてます! |
Posted by だーしゃ at 2005年07月17日 22:34
|
|
だーしゃさんこんにちは。昨日はありがとうございました☆ なんどもすみません。。。 ブログタイトルのフォントの種類を変更するのは どうすればいいのでしょうか? いろいろ試してみたのですが、 色は変える事ができるのですが フォントの種類が変える事ができません。。。 どうぞよろしくおねがいします。 |
Posted by Luna at 2006年01月20日 17:10
Posted by だーしゃ at 2006年01月22日 14:22
Posted by らぶ at 2006年09月15日 18:03
Posted by だーしゃ at 2006年09月19日 20:20
|
|
わーい♪ 表示の方法を紹介してくださるんですね^-^ とってもうれしいです。。。ありがとうございます。。。 いつまでもお待ちしておりま~す!! ちょこちょこ遊びに参りますね☆彡 私のカスタマイズは,だーしゃさんの講座が基本です!! |
Posted by らぶ at 2006年09月19日 20:44
Posted by ※hito※ at 2007年02月16日 10:53
|
|
こんにちはコメントありがとうございます! そして内容なのですがただ今入院中のため状況を確認でくません〜〜 ごめんなさい。 恐らくですが楽天のバナーが問題かもしれません。 いちど楽天のバナーをはずして保存してもらっていいですか それでなおれば楽天ばなーが問題だと思います。 すみませんがお願い致します〜 |
Posted by だーしゃ at 2007年02月16日 11:00
Posted by ※hito※ at 2007年02月16日 12:28
Posted by ※hito※ at 2007年02月16日 13:27
|
|
はじめまして。ブログ初心者でわからない事だらけです。 可能であれば教えていただきたいのですが・・・・ 投稿記事のDATEを表示しない方法はありますか? また、項目名(アクセスカウンタ・お気に入り等)の変更はできるのでしょうか? アドバイスをお願いします。 |
Posted by 瞳子 at 2007年05月04日 18:56
Posted by だーしゃ at 2007年05月05日 06:47
Posted by 瞳子 at 2007年05月07日 10:17
Posted by だーしゃ at 2007年05月08日 10:49
Posted by まめっち at 2007年07月07日 01:17
Posted by だーしゃ at 2007年07月07日 08:33
|
|
だーしゃさん ありがとうございます! CSSでは無いんですか~! (お察しの通り、CSSもHTMLも超初心者です^^;) 「HTML側にtableを書く」ためにはどうすれば良いのでしょうか? 度々すみませんが、よろしくお願い致します。 |
Posted by まめっち
at 2007年07月09日 14:01
at 2007年07月09日 14:01|
|
追伸: アーカイブの<div class="blog">の次に作成したtableを貼り付けたところ、アーカイブのプレビューではきちんと表示されるのですが、その他では表示されません。(もちろん『ブログを表示する』でも出ません) ここまでは何とかなりましたが・・・この先はどうして良いやら全く不明です^^; どうぞよろしくお願いします☆ |
Posted by まめっち
at 2007年07月09日 14:30
at 2007年07月09日 14:30|
|
■まめっちさんへ コメントありがとうございますっ、 んと、テーブルを作るってアーカイブに表示されたのであれば、 ブログ上では、 過去記事(月別)やカテゴリーの欄で表示されているはずですよー。 ブログのトップページや個別記事にはまた入れなおさないといけません。 やってみてくださいねー、そしてわからなかったらまた聞いてくださいーー(^^) |
Posted by だーしゃ
at 2007年07月09日 20:03
at 2007年07月09日 20:03|
|
だーしゃさん!出来ました!トップページと個別記事にも入れたらOKでした^^ カテゴリーも過去記事もブログ上に表示していなかったので トップページから確認出来なかったようです^^; いや~嬉しいです!お手数おかけしました~☆ 今後ともどうぞよろしく&お体お大事に^^!ありがとうございました♪ |
Posted by まめっち at 2007年07月10日 10:53
Posted by だーしゃ
at 2007年07月10日 16:20
at 2007年07月10日 16:20|
|
だーしゃsan~~ あのですね。。 下の方に 枝分かれのような ブログの構造を書いたものがあったと思うんですが 見れなくなっちゃってますね(ノД`)シクシク 鮎、あれを見ていじってたのでできたら復活させてもらえると とても有難いです。。。 復活、、できませんか?? 人(*゚ω゚`*)オネガイシマス☆.:゚+。 |
Posted by ☆鮎っぺ☆
at 2007年09月22日 17:46
at 2007年09月22日 17:46|
|
■☆鮎っぺ☆さんへ こちらコメントありがとうございますー、 これ、すいません、確認してませんでしたー いつの間にか消えていたんですね。 基本はFAQブログから引っ張ってきていたので、 見えなくなってました(><) 今直したので見えるとおもいますよー^^ 教えてくれてありがとうございますねー。 FAQも見てみてくださいねー(^^) |
Posted by だーしゃ
at 2007年09月22日 19:13
at 2007年09月22日 19:13|
|
アリガトウございました!! コレ、見ながらだと 楽なんです~~ε≡≡≡≡(;゚;艸;゚;)ァセァセ コレがないとどこを触れば どこが変わるのか、、手探り状態なので((汗 謝々♪━ε(*人ωu*)з━謝々♪ |
Posted by ☆鮎っぺ☆ at 2007年09月23日 00:35
|
|
■☆鮎っぺ☆さんへ OKです^^ よかったでっす、教えてくれてありがとうございましたー ちゃんと載っているとおもってましたので、 しりませんでした(汗 色々とやってみてくださいねー(^^) |
Posted by だーしゃ at 2007年09月23日 19:04
Posted by Bitter
at 2008年05月08日 23:44
at 2008年05月08日 23:44Posted by だーしゃ at 2008年05月09日 19:11
Posted by エッフェル
at 2008年06月14日 18:35
at 2008年06月14日 18:35Posted by だーしゃ at 2008年06月15日 17:51
■ヨッシャーカテゴリー
・CSS&ブログの活用講座!
・沖縄 写真
・└ 沖縄ちゅら海写真
・└ 空 写真
・└ 沖縄 人写真
・└ 動物 写真
・沖縄スタイル
・沖縄不思議ワールド
・IT?
・JOY WORK
・記憶喪失障害的闘病生活!?
・おいしいモノ!
・└ オススメレストラン
・└ カフェ
・└ 食堂
・└ 沖縄そば
・沖縄観光クーポン券情報





日本の地域ブログ大集合!津々浦々の美味い・楽しいがここに!
