cssカスタマイズ開放記念という事で、不定期連載しまーす。
いつ続きが始まっていつ終わるかわかりませんけれど、
最終的に
『カスタムフリーテンプレートでプレーンブルーっぽいのを作ろう』っていうのを目指しますので、興味がありましたら覗いてやってくださいね。
ちなみに、
「やり方わからんからとにかく教えれ」というご質問にはお答えしかねますけど、
「このテンプレートのこんな感じのところをうちでも採用したいが、うちのcssのどこに何を書けばよいの?」という、具体的なフォローなら出来ますので、ご相談くださいねっ♪
えー、まず、インターネットエクスプローラのシェアが90%を切ったというニュースがありまして、今やFirefoxは無視できないブラウザ、とお考え頂いた方がよいかと思われます。
その場合、オイラの把握している限りでは、
・fontの一括指定(font:bold 14px/20px;)を行なうと、Firefoxでは無視されます。
・paddingによる余白幅の指定を行ない、インターネットエクスプローラで表示確認を行なった場合、Firefoxでは予定外の動作をしますのでお気をつけください(というか、インターネットエクスプローラのバグです。)
とまあ、大きく二つ、あとはオイラも動かしながら覚えていくしかないんですけど、なるべく避けたほうがいい指定方法がありますので、このへん念頭に入れて作業をしていただければよいかと思います。
カスタムフリーのテンプレートには、BODYの中に#contentというボックスがあり、その下に
#header
#menu
#center
#menu2
というボックスが並んでいます。
普通に表示するとこんな感じ。
で、これを3段テンプレートにする為、
初期設定値として#menu~#menu2の間にfloat:left;
(通常のDIVタグだと次のコンテンツを下に回りこむところを、右に回りこませる、IMGタグでいうところのalign=leftみたいなもの)
が指定されています。
この中で、#centerの部分を表示領域の絶対指定(position:absolute)を行ないつつ、各ボックスの回り込み(float:left)を解除させてあげると、見た目では#menuの下に#menu2が来て、記事が表示される#centerは別のところへ追いやる事が出来てきます。

この設定を行なってらっしゃるのが、
南無の事件帳です。
これだと、ブラウザの横幅によって記事の表示領域が変わってきてしまいますよね。
それを回避する為に、こんな感じにしてみます。
これでなんとかプレーンブルーと同じ横幅になったと思います。
あとは、#centerのボックスあたりの操作で、センタリングなどを行なっていきます。