＋ぷちカスタマイズ日記＋Petit Customization Diary

ファンブログ　カスタマイズ

---

スタイルシートやHTMLファイルの本格的なカスタマイズを始める前に、自分の選択しているスキンはこれでいいのかってことを、もう一度考えてみてください。カスタマイズをしてなければ、スキン（テンプレート）の変更する前に変更の仕組みを知ろう！で説明したとおり、カンタンにスキンの変更ができます。逆にカスタマイズをすればするほど、スキンの変更は面倒になりますので、今回はスキンの選択条件には欠かせないカラムのことをお話したいと思います。

---

カラムをカンタンに説明しますと、記事の横にサイドバーがいくつあるかってことです。ファンブログのスキンでは記事の両側にサイドバーがあるのが3カラム。記事の左側にサイドバーがあるのが左2カラムで、右側が右2カラムと呼ばれています。

---

シンプル系スキンには、3カラム、左2カラム、右2カラムの全てのカラムが表示できる記述が施されています。これは、それぞれのスキンが選べるということでなく、3カラムでも、右2カラムでも、スタイルシート（CSS）に、全てのカラムのスタイルが記述されているということです。

例えば、3カラムを選んだ場合、TOPページやプロフィール、ひとつの記事なんかを開いたときには全て3カラムで表示されますよね。それは、5枚の HTML がスタイルシートの3カラムの記述を読むように命令されているからなんですが、「メイン」はそのままにして、「1記事」を右2カラムの記述を見に行くように指定しますと、ＴＯＰページは3カラムで、ひとつの記事を選択した場合には右2カラムで表示させることができるってことです。

---

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

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

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

---

前回の３つのカラムの仕組みを知ろう！でカラムを表にして説明しましたが、今回は実際のスタイルシートに数字で記述されています、それぞれの幅（横幅）について説明します。

カラムに記述されています幅は全て「width: XXXpx;（ピクセル）」という単位で示され、基本的には全て横幅の数字が記述されています。

カラムの記述は「コンテナ」という大きな囲みが全体の幅で、その中に全ての囲みが入っているものなので、単純に考えますと3カラムの場合は「コンテナ」=「ラッパー（左サイドバー+コンテンツ）」+「右サイドバー」ということになりますので、実際の記述を元に計算してみましょう。