だーしゃのＣＳＳ講座　ブログの構造を理解してみよう！:沖縄からヨッシャー（＝＾＾）９

2005年07月17日

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

だーしゃのＣＳＳ講座

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

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

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

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

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

まず下地のクラス、

#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講座　ヘッダーの画像を変えてみよう！

■最近の記事

>>最新画像の一覧を見る￤>>ブログの記事一覧を見る

RSS表示パーツ

Posted by だーしゃ at 01:59│コメント(48)│トラバ(5) │CSSについて│読者になるメール

この記事へのトラックバックURL

この記事へのトラックバック

ちょこっとだけリニューアルしました。まだちょこちょこ改造するつもりです。ヘンな所があったら教えてちょ。よろしくです〜。

リニューアルしました【なちゃっと食館】at 2005年07月17日 22:21

３カラムから、また２カラムへなぜかというとスタールシートというものをいじって右側だけにサイドバーをだそうと挑戦スタイルシートのことがわかりやすく説明されていた、沖縄からヨ...

スタイルシートめ【夜中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

■sun

ほんとすごいです！
見てパッと感覚的に「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

■だーしゃ

■めぐみ＠離島さんへ
こんにちは！コメントありがとうございます～。
わかりやすいっていってもらえるとうれしいですよ～（＾＾）
がんばって作った甲斐がありました！
これからもねたで作っていきましょうね～

■sunさんへ
喜んでいただけるとうれしいですよ（＾＾）！
でも僕もまだまだなのでがんばります！
そしてヘッダー画像、もうちょっと詳しくしないといけないですね。
ちょっといじってみますねー

■近所の友人さんへ
こんにちは、コメントありがとうございます。
わかりやすいって言ってもらえるととてもうれしいですね！
今回は構造だけですが、これがわかれば色々と応用できますので（＾＾）
いろいろやっていきましょ～

■お玉さんへ
こんにちは！おひさしぶりです～。
これはてぃーだブログの構造なので、多分gooの方とはちょっと違うかもしれないですが、それは略さんに聞くのが一番いいとおもいますね～
構造をしったらあとは色々と変えるだけなので簡単ですよ＝

■みなみさんへ
こんにちは！ＣＳＳカンであのくらい触れるなら問題ないですよ～
僕自身色々と試行錯誤しながらですから。
色々とさわれたら楽しいのでやってみてくださいね＝

■ばんびさんへ
こんな感じでスタイルシートは動いているんですー
自分で触れるとたのしいですからね（＾＾）！
僕ももっとがんばりますね～

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 Ｌｕｎａ at 2006年01月20日 17:10

■だーしゃ

■LUNAさんへ
こんにちはーー。
こちらフォントですかぁ、、、
これはスタイルシーットで変更する事はできるのですが、
実際は見る人のパソコンに依存してしまうので、
おすすめはできないですよー。

もしやるとするなら、スタイルシートリファレンスというHPを
みてみてくださいね。

お勧めはタイトルを画像で張るのがいいですよ。
それならどのパソコンでも確認できますからね。
どうぞよろしくです。

Posted by だーしゃ at 2006年01月22日 14:22

■らぶ

はじめまして＾－＾

とても分かりやすい内容なので，こちらの記事を参考にちょこちょこカスタマイズをさせていただいてます。
今日久々におじゃましたら，TBとコメントに素敵なサムネイルが載っているので利用したいなぁと思いました。

コチラの記事の内容と関係がなくなってしまうのですが・・・
だーしゃさんのまねっこをしたいのですが，コメントとTBの両方でうまく表示されないんです＾＾；
あちこち検索したのですが，これだというのがなくて。。。

もし，秘密でなかったらアドバイスいただけませんでしょうか？
よろしくお願いします。

Posted by らぶ at 2006年09月15日 18:03

■だーしゃ

らぶさんへ

こちらお伝えする前に無事に実装されたみたいですねー。
ちょっと紹介してみようと思います。
なかなかおもしろいのでー（＾＾）

ちょっとまってくださいねー。

Posted by だーしゃ at 2006年09月19日 20:20

■らぶ

わーい♪
表示の方法を紹介してくださるんですね＾－＾
とってもうれしいです。。。ありがとうございます。。。

いつまでもお待ちしておりま～す！！
ちょこちょこ遊びに参りますね☆彡

私のカスタマイズは，だーしゃさんの講座が基本です！！

Posted by らぶ at 2006年09月19日 20:44

■※hito※

初めまして。ti-daでブログを始めたばかりです。
こちらでこんな質問をして良いのか、迷いましたが、
どうすれば良いのか全く分からないので、
わらにもすがる思いで、コメントします。

今朝いつもどおり、更新すると、ずれてしまったのか、
サイドのカレンダー、プロフィール、バナーなどがすべて下に
移動しています。
最近の日記２件の、＜続きを読む＞も中央にきてるし。
楽天のバナーを加えて、保存したらこうなってしまいました。
なにもいじってないんですが。
他のスタイルに変更しても、表示がおかしくなります。

これってどうなりますか？
いちお問い合わせはしているのですが、対応してもらえるか
どうか分かりません。
スミマセン、是非是非アドバイスをお願いします。m(__)m

Posted by ※hito※ at 2007年02月16日 10:53

■だーしゃ

こんにちはコメントありがとうございます！

そして内容なのですがただ今入院中のため状況を確認でくません〜〜

ごめんなさい。

恐らくですが楽天のバナーが問題かもしれません。

いちど楽天のバナーをはずして保存してもらっていいですか
それでなおれば楽天ばなーが問題だと思います。

すみませんがお願い致します〜

Posted by だーしゃ at 2007年02月16日 11:00

■※hito※

早速お返事いただき、ありがとうございます。
入院中ということですが、お体大丈夫ですか？
こんなときに質問してしまい、恐縮しています。
スミマセン(T_T)

変になってすぐにも外してみたのですが、一緒でした。
その後デザインを変更してみたり、何度か試し、
でまた楽天バナーと張りました。

今また
楽天のバナー外してみましたが、元には戻りませんでした。
カスタムプラグインⅠの部分を全部外しても一緒でした。

サイドラインが右に２列あるものを使っているのですが、
背景の色はきちんと２列あるんですが、
バナーや文字などの内容がそのまま２列で、
日記の一番下につながって出ています。

記事とサイドバーの間の、スクロール部分が下にずれています。

あとは記事内の「続きを読む」が中央に寄っている、という感じです。

Posted by ※hito※ at 2007年02月16日 12:28

■※hito※

だーしゃさん、度々すみません。
自分で色々考えたりしたら、なんとか元に戻りました。
記事をセンター寄せにしていたのですが、
後の</div>ってのが抜けてて、変になってたみたいです。

詳しい方には笑われてしまいそうですね。
でも自分で見つけられたので、ちょっとうれしかったです。

今回の件で、だーしゃさんのブログを発見できたので、
色々勉強したいと思います。

お体、早く良くなりますよう、お祈りしています。
ありがとうございました！

Posted by ※hito※ at 2007年02月16日 13:27

■瞳子

はじめまして。ブログ初心者でわからない事だらけです。
可能であれば教えていただきたいのですが・・・・
投稿記事のDATEを表示しない方法はありますか？
また、項目名（アクセスカウンタ・お気に入り等）の変更はできるのでしょうか？

アドバイスをお願いします。

Posted by 瞳子 at 2007年05月04日 18:56

■だーしゃ

■瞳子さんへ

こんにちはー、はじめまして（＾＾）
コメントありがとうございますー。

そして、投稿記事のＤＡＴＥを表示させないようにするには、
もう　オリジナルデザインの登録　で編集しないとだめですねー。

管理画面にある、

デザイン　＞　オリジナルデザインの登録　の画面で

トップぺージ、　個別記事、　アーカイブ

画あると思いますが、その英語たち、（タグ）のなかの、

<%EntryDate%>

↑この文字を削除してください、そうしたら、投稿記事の日付けを非表示にすることができますよー。

そして項目名については、管理画面の、

サイドバー　＞　サイドバーのリスト　で

名前を変更したいものを選んで　項目名の変更

で、できますよー、やってみてくださいねー（＾＾）

Posted by だーしゃ at 2007年05月05日 06:47

■瞳子

だーしゃ様、ありがとうございました。アドバイス通りに
してみたら、すぐに出来ちゃいました(^o^)丿
（いまもう一つのブログを作成中なのです）
本当にありがとうございました。感激です。

Posted by 瞳子 at 2007年05月07日 10:17

■だーしゃ

■瞳子さんへ

こんにちはー、（＾＾）
できたならよかったですーー！
いろいろと触ってみてくださいね、やると覚えますからー。
どんどん出来るようになるとおもしろいですよぉー

Posted by だーしゃ at 2007年05月08日 10:49

■まめっち

だーしゃさん　はじめまして！
度々CSS講座拝見させて頂いておりました＾＾
分かりやすくて、コピペで便利！ホントありがとうございます！
だーしゃさんのこの講座が無かったら、他の「CSSの説明本が出ている無料ブログ」に引っ越していたかも・・・デス＾＾；

実は質問がありまして・・・
ただ今CSSをいじっている最中なのですが、どうしてもわからない事が。。。

tableを作って表示させたいのですが表示させたい場所が記事の上の部分なんです。
（contentの上にblogが乗って、blogbodyが乗っていますよね。。。
で、dateの上の部分にtableを表示させたいのですが。。。）
（（tableは記事投稿の下書きで完成しました。））

もしご存知でしたら教えて下さい。よろしくお願いします。

Posted by まめっち at 2007年07月07日 01:17

■だーしゃ

■まめっちさんへ

こんにちはーっ、コメントありがとうございますっ

そして、tableの件なのっですが、
こちらCSSではないんです。

HTMLのTABLEの件ですよね？？

そうすると、HTML側にtebleを書かないといけないので、
そこに書いてみてくださいね（＾＾）

そうするとタブン表示できるとおもいます。

ちょっと見当違いであればまたコメントください、よろしくお願い致します（＾＾）

Posted by だーしゃ at 2007年07月07日 08:33

■まめっち

だーしゃさん　ありがとうございます！
CSSでは無いんですか～！
（お察しの通り、CSSもHTMLも超初心者です＾＾；）
「HTML側にtableを書く」ためにはどうすれば良いのでしょうか？
度々すみませんが、よろしくお願い致します。

Posted by まめっち

at 2007年07月09日 14:01

■まめっち

追伸：
アーカイブの<div class="blog">の次に作成したtableを貼り付けたところ、アーカイブのプレビューではきちんと表示されるのですが、その他では表示されません。（もちろん『ブログを表示する』でも出ません）

ここまでは何とかなりましたが・・・この先はどうして良いやら全く不明です＾＾；
どうぞよろしくお願いします☆

Posted by まめっち

at 2007年07月09日 14:30

■だーしゃ

■まめっちさんへ

コメントありがとうございますっ、

んと、テーブルを作るってアーカイブに表示されたのであれば、
ブログ上では、

過去記事（月別）やカテゴリーの欄で表示されているはずですよー。

ブログのトップページや個別記事にはまた入れなおさないといけません。
やってみてくださいねー、そしてわからなかったらまた聞いてくださいーー（＾＾）

Posted by だーしゃ

at 2007年07月09日 20:03

■まめっち

だーしゃさん！出来ました！トップページと個別記事にも入れたらOKでした＾＾
カテゴリーも過去記事もブログ上に表示していなかったので
トップページから確認出来なかったようです＾＾；
いや～嬉しいです！お手数おかけしました～☆

今後ともどうぞよろしく＆お体お大事に＾＾！ありがとうございました♪

Posted by まめっち at 2007年07月10日 10:53

■だーしゃ

■まめっちさんへ

よかった～～（＾＾）
ちゃんと表示されてくれたみたいですねっ
ちょこっとコツをつかめば慣れてきますよー

リハビリはぼちぼちやっていますです。
がんばりましょうねー。

Posted by だーしゃ

at 2007年07月10日 16:20

■☆鮎っぺ☆

だーしゃsan~~

あのですね。。

下の方に　枝分かれのような　ブログの構造を書いたものがあったと思うんですが　見れなくなっちゃってますね(ﾉД`)ｼｸｼｸ

鮎、あれを見ていじってたのでできたら復活させてもらえると　とても有難いです。。。

復活、、できませんか？？

人(*ﾟωﾟ｀*)ｵﾈｶﾞｲｼﾏｽ☆.:ﾟ+｡

Posted by ☆鮎っぺ☆ at 2007年09月22日 17:46

■だーしゃ

■☆鮎っぺ☆さんへ

こちらコメントありがとうございますー、
これ、すいません、確認してませんでしたー
いつの間にか消えていたんですね。

基本はＦＡＱブログから引っ張ってきていたので、
見えなくなってました（＞＜）

今直したので見えるとおもいますよー＾＾

教えてくれてありがとうございますねー。
ＦＡＱも見てみてくださいねー（＾＾）

Posted by だーしゃ

at 2007年09月22日 19:13

■☆鮎っぺ☆

アリガトウございました！！

コレ、見ながらだと　楽なんです～～ε≡≡≡≡（;ﾟ;艸;ﾟ;）ｧｾｧｾ

コレがないとどこを触れば　どこが変わるのか、、手探り状態なので（（汗

謝々♪━ε(*人ωu*)з━謝々♪

Posted by ☆鮎っぺ☆ at 2007年09月23日 00:35

■だーしゃ

■☆鮎っぺ☆さんへ

ＯＫです＾＾

よかったでっす、教えてくれてありがとうございましたー
ちゃんと載っているとおもってましたので、
しりませんでした（汗

色々とやってみてくださいねー（＾＾）

Posted by だーしゃ at 2007年09月23日 19:04

■Bitter

はじめまして（＾＾）
すごく分かりやすいページですね

時々覗かせてください

Posted by Bitter Bitter

at 2008年05月08日 23:44

■だーしゃ

■Bitterさんへ

はじめまして！コメントありがとうございますっ。
見ていただけるだけでもうれしいですよー。

色々と活用してくださいねー。（＾＾）

Posted by だーしゃ at 2008年05月09日 19:11

■エッフェル

はじめまして！
教えて頂けますでしょうか？
３カラムの夜景のテンプレートを使用していますが
何度やっても　崩れてしまって上手くできません。

①左右の余白部分をもう少し狭くしたい。
②blogとサイドバー（リンクって言うのかな？）の間の
　余白部分を広げたい。
③blogとサイドバーの幅も広げたい

以上なんですが、ご指導願えましたら助かります！
どうぞ宜しくお願い致します。

もしお返事を頂けるのであれば　下記のアドレスまでお願い致します。
初めてで図々しく　すみません。

masya_hal@yahoo.co.jp

Posted by エッフェル

at 2008年06月14日 18:35

■だーしゃ

■エッフェルさんへ
こんにちはー。
色々とがんばっていらっしゃいますねっ（＾＾）
ちょっとメールしますので、おまちくださいねー。

Posted by だーしゃ at 2008年06月15日 17:51

■chocolat

だーしゃさん教えて下さい！！

フッター部分が表示されなくなってしまったんですがどうすればいいでしょうか？
ちなみにカスタマイズのページでプレビューボタンを押すとプレビューでは
フッター部分もちゃんと表示されています。

もしご存知でしたらお時間のある時に教えて下さい。よろしくお願いします。m(__)m

Posted by chocolat at 2008年10月29日 12:26

■だーしゃ

■　chocolatさんへ

こんにちはー、えー０－とですね、
タグを見てみたら、フッターのタグが無くなってましたよーー、

最近忍者ツールとか入れませんでした?
その時に消したかも。

とにかくトップページの一番下に下のタグを入れてみてください。
多分なおるはずですーー（＾＾）

メッセージで送りましょうねー。

Posted by だーしゃ

at 2008年10月29日 15:09

■ginzow

古い記事にコメ失礼します。
ふむふむ･･･。
この構造を理解すればブログもどきが作れそうですね。
とても参考になりました。

Posted by ginzow at 2008年11月11日 02:37

■だーしゃ

■　ginzowさんへ

コメントありがとうございますー。
こちらはとりあえず、このてぃーだや地域ブログを含む
HTML及びスタイルシートの構造なので、
他のブログがどのようになってるかまではわかりません、
ごめんなさい、でも参考になればとおもいますー（＾＾）

Posted by だーしゃ at 2008年11月11日 07:50

■momo

こんにちは。
教えてください。
ただ今だーしゃさんのサイトでカスタマイズ勉強中です。
いろいろな事ができて楽しいです。
今テンプレートを2カラムから3カラムのテンプレートに変更しようとしているのですが、2カラムのままでブログが下の方に行ってしまいます。
これはどこが悪いのでしょうか

Posted by momo at 2009年03月27日 17:50

■momo

こんにちは。
上の画像みてたらきちんと3カラムになっていますね。
macだからと思ったら更新したらきちんと直りました。
本当にすみません。
ありがとうございました。
更に勉強をつみま〜す。

Posted by momo at 2009年03月31日 16:05

■だーしゃ

■　momoさんへ

すみません、momoさんの質問を読み逃がしていましたーー。
もうしわけないですーー。そして、ちゃんと3カラムになってて、良かったです。
ブラウザや機種等でたまにあるんです（汗）
なのっで、見れてて良かったです、ほんとに。
また何かあれば聞いてくださいーー

Posted by だーしゃ

at 2009年04月01日 07:08

■森のおもちゃ箱＊さち

こんにちは、だーしゃさんまたまた教えて下さい！
ブログの個別記事の上？この図でいうと、comments？の上に
テーブルを３個ぐらい作って、他の記事にリンクさせようと思うのですが
どちらにテーブルを組み込んだらいいですか？
（　例えばこんな感じです→　｜お問い合わせ｜｜地図｜｜メニュー｜　　）
テンプレートはオリジナルテンプレートを使っていて、３カラム使用です。

Posted by 森のおもちゃ箱＊さち

at 2009年04月11日 17:31

■だーしゃ

■　森のおもちゃ箱＊さちさんへ

こんにちはー、ご連絡が遅くなりましたー、
個別記事のcommentsの上にですね。だとすると、HTML上に組み込んでいくのですが、

CommentsLoop　ってタグの上にテーブルを書いて、表示させるという感じです。

しかし、これで答えがあってますか（汗）やり方次第なので、また聞いてくださいー。

Posted by だーしゃ

at 2009年04月13日 08:13

■森のおもちゃ箱＊さち

だーしゃさん！ありがとう～。
なんとか出来ましたよ。（＾＾）ｖ
まだ非公開なのですが、ちゃんと完璧に出来てから公開しますね～♪

Posted by 森のおもちゃ箱＊さち

at 2009年04月13日 17:02

■だーしゃ

■　森のおもちゃ箱＊さちさんへ
よかったですー、ちょっとご連絡が遅くなったので、どうなったのかなぁー、と心配でした。
ですが、公開できたら見に行きますねー。
どうぞよろしくお願いいたします（＾＾）

Posted by だーしゃ

at 2009年04月13日 18:34