ブロックレイアウトの変更 # 17,Dec,2006 Sunday - 16:51 # |[ブログカスタマイズ]テンプレート

サイドバーがダラダラと長いのって辛くありません？（ｗ

そんな（どんな？）訳で、ブロックのレイアウトを少しいじります。

トップブロックを右に寄せて、空いたスペースにプラグインブロックを移動します。
ただ、トップブロックを右に寄せるだけだとおもしろくないので、高さを増して、プラグインブロックのダラダラ感を少しでも解消します。
タイトルスペースが大きくなってアピール度が増すので一石二鳥です。

まずは、トップブロックのサイズ変更、右寄せをする為にスタイルシートに以下のように追記します。

#TopBlock {
width:580px;
height: 400px;　※1
text-align: right;　※2
background-color:#FFFFFF;
position:relative;
left:220px;　※3
}

※1･･･トップブロックの高さを任意で設定
※2･･･暫定的にトップブロックの文字を右に寄せました
※3･･･左から何ピクセルに移動かを指定します


トップブロックのサイズを変更して、右に寄せたら、プラグインブロックを空いたスペースに移動します。

.PluginBlock {
width: 220px;
text-align: left;
float:left;
background-color:#CCCCCC;
position:relative;
top:-400px; ※4
}

※4･･･標準の配置位置（記事と同じ位置）から上辺を縦方向のどちらに何ピクセル移動するかを指定


これで、レイアウト変更完了。