[PR] 容量300MB、月額125円、高性能なサーバが日本最大級のバックボーンに直結。さくらのレンタルサーバ。
ブログレイアウトの基本パターン その２ ～２段組レイアウト～
２段組レイアウトでは、コンテンツ用DIVの隣にナビゲーションやプラグインを置くサイドバーが設置されます。右側におくか左側に置くかは好みの問題ですが、統計的には左側に置くケースが多く見られるようです。
①左側にサイドバーを置く２段組レイアウト
まずはサンプルファイルを開いてソースコードをご覧ください。サンプルではサイドバーのＩＤ名を「sidebar」に設定してありますが、ＩＤ名は自由に決められます。
２段組の最大のポイントはなんといってもスタイルシートのフロート設定です。フローとを設定する場所はサイドバー部分、コンテンツ部分、そしてフッター部分の３箇所です。サンプルファイルのスタイルシートでは、以下のようにフロートを設定しています。
#sidebar01 { float:left; }
#content { float:right; }
#footer { clear:both; }
②右側にサイドバーを置く２段組レイアウト
コンテンツの右側にサイドバーを置くには、サンプルファイルをエディタで開き、①のスタイルシートのフロート設定を以下のように変えるだけです。簡単ですね。
#sidebar01 { float:right; }
#content { float:left; }
#footer { clear:both; }
