Movabletypeのテンプレートをまたいじった。
今回は主にCSS。人気ブログをよく見ているとレイアウトが上手い。

ここ数ヶ月モニタリングしていると、blogのヒット数は500/day以上で
一時期に比べようやく回復してきた。adsenceのクリックもかなり
少ないがある。

しかし自分の記事を読んでいるときに、眼の動きは下から上で
左右のブロックには当然ほとんど行かない。
ということで今回はadsenceありきのレイアウト変更をしてみた。
エントリーの最後にタグを挿入する。

そして左右にあったブロックを右に持って行く。
ここでいったん見てみたのだが、問題はエントリーが画面の左に
寄りすぎていて見にくい。

全部のブロックを真ん中に持って行きたいが、
position absoluteで指定してるので
出来ねえなあと思ってググってみると世の中
頭のいい人がたくさんいるわけで。

最初に作っているページの幅を出しておく。
通常800ピクセルとかで作るとベストだ。

まずdivでくくられたブロックを

#ブロック名 {
position:absolute;
left:50%;

のように、左から画面真ん中に持ってくる。

次にマージン指定でブロックの始点を動かす。
例えば今まで左から600で作っていたとしたら、
ページの真ん中は400なので600-400で200、
左にマージンを取る。

margin-left:200px;
width:幅

逆に真ん中より左の場合、例えば今まで10の位置に置いていた場合は
10-400で-390、
margin-left:-390px;
と置けばいい。

それによってこのページのようなレイアウトが達成できた。

ちなみにこのページは7つのブロックで出来ており、

バナー　ランダムカウンタ
　　　　トップバー
ブログ　リンク　リンク
　　　　　　コメント

というようなブロックをtop属性で高さ方向もいじって配置している。