livedoor2007年12月13日
ライブドアブログの構造☆その１
皆さんお待ちかねの （誰が？ ＾＾；）、オヤジのブログカスタマイズ復習編、第３弾でござる。
本来なら、一番最初に説明すべきだった「ブログの構造」（スタイルシート） について、オヤジの解る範囲で御説明。。（＾＾；
記事を書くスペースを拡げたい！！とか、この部分の色（画像）を変更したい！！
なんて思っても、「スタイルシート（CSS）」のどの部分を弄ればイイのか解らない・・と仰る、超〜初心者向けで御座います m(#_ _)n
先ずは左の画像 （クリックすると大きな画像が見れまする）。。
記事を投稿している時点での、オヤジのブログのトップページなのだが・・
「管理ページ」の「デザインのカスタマイズ」で編集できる「スタイルシート（CSS）」の、どの命令文が？ 何処にあたるのか？ を簡単に。。
☆ライブドアブログの構造☆
�ゝ�事が書かれていない部分も含めた、ページ全体を、、
ボディ body{..命令文..}
��一番上の、ライブドアのリンクや広告が表示されている部分を、、
ヘッダー #header{..命令文..} 又は table#header{..命令文..}
��色線で囲んである部分全てを、、
コンテナ #container{..命令文..}
�の仞�で囲んでいる部分を、、
#cgmmenu{..命令文..} なんて読むんだろ（？_？；
�ダ崟�で囲んでいる部分を、、
バナー #banner{..命令文..}
�ξ仞� （サイドバー） と青線 （記事欄） で囲んでいる部分全体を、、
ブログコンテナ #blogcontainer{..命令文..}
で、、ココからがチョッと厄介・・（＾＾；
☆３カラムの場合☆
�Ш限Δ領仞� （左側のサイドバー。。Aサイドと言う） と、青線 （記事欄） で囲まれている部分を足し算したのが、、
ラッパー #wrapper{..命令文..}
��-１ で、緑線で囲まれているサイドバー （AB両サイド） を、、
サイド .side{..命令文..}
-２ 両側にあるサイドバーのうち、左側のサイドバー （Aサイド） を、、
レフト #left{..命令文..}
-３ 右側のサイドバー （Bサイド） を、、
ライト #right{..命令文..}
��最後に残った青線 （記事欄） で囲まれた部分を、、
コンテンツ #content{..命令文..}
と言う構造となる。。理解出来た（？_？；
（要注意 オヤジが使っている、 Liquid Pearl のシリーズには、 #content の内側に、、ブログ #blog{..命令文..} が存在する。。理由は、ま〜ったく！！不明・・＾＾；）
☆２カラムの場合☆
��緑線で囲っている部分 （２カラムだから、左か右のどちらかだな） を、、
サイド #sidecolumn{..命令文..} と .side{..命令文..}
�╂沈� （記事欄） で囲っている部分を、、
コンテンツ #content{..命令文..}
と言う、３カラムと比べ単純な構造となっている。。編集も楽だねぇ（＾＾
と、まぁこんな感じでブログは作られているのだが・・命令文を書く時の注意点を一つ。。それは、、
必ず、内側に書いた命令文の方が優先される！！という事。。
例として・・
body に背景色を指定すると、body の全て （画面全体） がその背景色になるが、、
その内側にある、#content （記事欄） にも背景色を指定すると、記事欄は #content で指定した背景色になる。。
（簡単に言うと、、body の背景の上に、記事欄の背景が上書きされている訳だな）
これは、.side （サイドバー） でも、#banner （バナー） でも同様でござる。
えっとぉ〜・・理解できた（？_？；
まぁ、、次回に続く m(#_ _)n
仮に間違っておったとしても、一切の責任は取りません！！自己責任で、参考にして下され。。（￣＾￣；
