前回はブログカスタマイズの必要か?ということについて、緊急性はなく、どうしても必要だと感じるときや、MTでの運用の際に覚えればよいでしょう、とお伝えいたしました。

では、必要性を感じたときに、そうはいってもブログカスタマイズは、なにせ、わかりにくいというイメージがつきまといます。

ということで、今回は、前回からの続編ということで、簡単ではありますが、CSSのイメージが掴みやすい(かも知れない)考え方をお伝えいたします。
まず、CSSのひとつひとつの指定は "箱" というイメージを持つとよいと思います。
例えば、ある本文があるとしたら、それが透明の四角い箱(囲い)に入っているようなイメージです。

その箱とその中味を指定するようなものなんですね。

まず、なにも指定しない状態を上記のような透明の箱と考えて、

その中の文字の指定
その箱の枠、枠の太さ、その色 等の指定
枠と文字グループの間隔(隙間)の指定
箱自体の色の指定
箱の外の間隔(箱どうしの間隔)の指定

といった感じです。

ちなみにMTも含め、ほとんどのブログのテンプレートやデフォルト状態での場合、
上部ヘッダの箱、メイン(主に記事の部分)の箱、サイド(右か左か左右のカテゴリの部分)の箱、フッダの箱、といった大きな箱どうしで構成されていて、その箱の中にタイトルやリード、本文、カテゴリといった小箱たちが、それぞれの箱に、順番に収まっている、といった具合になっております。

この大きな箱と小さな箱の指定の仕方がまた一見ややこしいところで、大きな箱の場合、CSSファイルでは、# に任意のネームをつけた指定になっていることが多いです。

CSS側の指定は、

例→ #content {font-size:100%; line-height:140%; color:#F57F00;}

小箱ですと、 . (ドット)のあとに任意のネームをつけます。

例→ .title {font-size:140%; line-height:160%; color:#FF0000;}

HTML側での指定になりますと、

大きな箱の場合、

<div id="content">タイトル名</div>

小さな箱の場合

<div class="title">本文本文本文…</div>

といった具合です。

但し、指定は必ずしも大箱を #の扱いにする必要はなく、

すべて、(ドット)の指定で、入れ子にしてもよいのです。

#も同様です。

複雑になれば、自然と入れ子の指定になるわけでもありまして。

ただ区別しやすいように、CSSの文法的な望ましい指定の仕方として、用意されていると考えてもよいと思います。

こういったような考え方をすると、私は構成のイメージがつかめてくるのですが、いかがでしょうか?

(逆にわかりにくくしているだけなのかな…汗!)