3つのカラムの仕組みを知ろう！

ファンブログカスタマイズ：カラム編投稿日：2009年09月14日 21:00

ファンブログ　カスタマイズ　シンプル系スキン限定

ブログを初めてしばらくしますと、サイドバーの幅を変更したくなりませんか？このサイドバーの幅の変更はカラムの仕組みがわからないで変更してしまいますと、サイドバーが表示されなくなってしまったりして、ブログの表示に支障がでてしまう場合があります。

このような説明をしますと難しいものだと思われがちですが、カラムの仕組みがわかっていますと、とってもカンタンにできちゃうんです。仕組みさえわかれば、カラムの幅が自由に変更できるようになりますので、今回はカラムの仕組みの説明をしちゃいますね。

カラムの仕組みは文章で説明するよりも、表にしてしまった方がわかりやすいので、それぞれのカラムを表にしてみました。

左2カラム　/* 2column 左サイドバー */

背景　html

コンテナ　container

ヘッダ　header

メイン　main

左サイドバー　sidebar

コンテンツ　content

フッタ　footer

コンテナ　container

右2カラム　/* 2column 右サイドバー */

背景　html

コンテナ　container

ヘッダ　header

メイン　main

コンテンツ　content

右サイドバー　sidebar

フッタ　footer

コンテナ　container

2カラムの、左2カラムと右2カラムは左右入れ替わっただけなので、基本的な考え方は同じで構いません。
カンタンに説明しますと、背景の中に「コンテナ」という大きな囲みがあって、その上下にコンテナと同じ幅の「ヘッダ」と「フッタ」が配置されています。そのヘッダとフッタの間に「メイン」という囲みがあり、その中に「サイドバー」と「コンテンツ」が左右に分かれて配置されています。

3カラム　/* 3 column multi */

背景　html

コンテナ　container

ヘッダ　header

メイン　main

ラッパー　wrapper

左サイドバー　sidebarLeft

コンテンツ　content

右サイドバー　sidebarRight

フッタ　footer

コンテナ　container

3カラムの場合は、「ラッパー」という囲みが追加されますので少し複雑になりますが、右2カラムのコンテンツの部分をラッパーという囲みとして、それをさらに左サイドバーとコンテンツに左右2分割したものと考えますと、わかりやすいかもしれません。