MovableTypeのテンプレートを改造してみた

MovableTypeのテンプレートを改造してみた。今までのテンプレートは＠スタイルの無料の3カラム、リキッドレイアウトのものを使用していた。導入当初は多少カスタマイズして、文字の色等をいじっただけだったけど、今回レイアウトを変更。エントリを左に。メニューを右側2列にしてみました。

情けない話なのですが、今まではbox（container)のセンタリングは　

text-align: center;

で行っていた。
これだとFireFoxだとセンタリングされてくれない。正しくは

margin-left : auto ;margin-right : auto ;

でやるそうです。なんでもIEのバグで、本来はセンタリングされることが間違いだそうです。
ボックスレイアウトを調べて、あれこれやてくうちになんとか形になり、バックグラウンド画像も作って合わせこんだのですが、何故か解像度が違うPCで見るとレイアウトが多少ずれ込んでまいました。
メニューとの境界の縦ラインを出来ればbodyのbackgroundに描いてしまいたかったのですが（メインとメニューのボックスの縦の長さの違いを気にしなくてもよくなる為）解像度の違うPCで見るとずれてしまう。全てｐｘで設定してあるのに。しばらく調査が必要になりそうです。

あなたにおススメの記事