ブログカスタマイズ(1)

もう語られつくされてるだろうけど、一応自分への覚え書きも込めて書いてみることにする。

まずはidとclassの違い。

  • id属性は#名前で記述されページ内で1回しか使用出来ない。
  • class属性は.名前で記述されページ内で何回でも使用出来る。

まあ厳密に言えばid属性を使わずに全部class属性で名前を付けても正しく表示されるようだが、一応レイアウトとしてのおおまかな部分はid属性でそれぞれのBOX内で表示する内容(投稿内容やタイトルなど)はclass属性で名前を付けるってのが基本のようだ。

livedoor Blogではまずbodyタグ内でマージン、パディング、テキストの位置、背景色を設定する。margin:0px 0px; とすれば左はじにぴったりくっつくレイアウト。 margin:0px; text-align="center"; と記述すれば上にぴったりくっついて中央によるレイアウトになる。そこに一番外に大きな箱である #container をつくる。その中にバナー部分である #banner,#subbanner が入り、その下にブログ内容部分の #content が入り、サイドメニューである #links が入る。これでid属性でネーミングされてるBOXが全て使用される訳だ。


#content は float と言うパラメーターで左、右に寄せられる。float:left; と記述すれば左に投稿部分が、float:right; と記述すれば右に投稿部分が寄る事になる。#contents で float:left と記述したなら #links を float:right; に設定、#contents を float:right; としたら #links を float:left; とすれば良い。これで基本的なレイアウトは決まる事になるだろう。

なお、#container , #contents , #links でwidth:*; パラメーターを設定したならpadding:*; と margin:*;で左右の値を記述してはいけない。なぜならInternet ExplorerだけBOXの判定が他のブラウザと違うからだ。