さて５回目である。引き続き参考にしたのは、「即実践！ブログ徹底カスタマイズ術」(技術評論社)である。
今回は、２カラムであるメインページ(エントリーと右サイド)を３カラム(エントリーを挟んで左サイドと右サイド)に変更する。最近よく見るデザインであり、黄金分割の画面だそうです。
※表示するためHTMLタグの<>を[]に変換している。
変更箇所は主に２箇所。
1.スタイルシート
2.メインページ
スタイルシートに左サイド用の設定を#rightのすぐ下に#rightをコピーして貼り付けます。
#left-side {
float: left;
width: 200px;
background-color: #FFFFFF;
overflow: hidden;
}
次に、#centerのwidthを400pxに修正して縮めます。
メインページはcenterのエントリー部分の直前に以下を挿入します。
[div id=”left-side”]
[div class=”sidebar”]
[/div]
[/div]
[div id=”center”]
左サイドには、カレンダーと最近の記事、最近のコメントを移動します。おーっと、なかなかいい感じですね。どうですか？まだまだ続く・・・予定。