左右のグループを入れ替える
<< 前のページ カテゴリー一覧をサイドバーに移動する
現状、サイドバーが右側、コンテンツが左側に配置されています。これを逆にします。実は非常に簡単です。
スタイルシートのコンテンツ(content)で指定しているfloat:leftをfloat:right、サイドバーで指定しているfloat:right;をfloat:leftに変更するだけでOKです。
変更後、ブラウザで確認します。

上図の構成をHTMLだけでレイアウトするとなると、以下のように<table>タグを用いることになります。
<table>
<tr>
<td>
サイドバー部分
</td>
<td>
コンテンツ部分
</td>
</tr>
</table>
今回のように、サイドバーを左側に表示させたい場合は、HTMLだけの記述では、サイドバーの部分をコンテンツより先に記述する必要があります。
ですが、CSSでレイアウトの指定を行っている場合は、以下のようにコンテンツ部分を先に書いても、サイドバーを左側に表示することができます。
<div id="content">
コンテンツ部分
</div>
<div id="sidebar">
サイドバー部分
</div>
しかも、検索エンジンはサイドバーの情報よりも、そのページのメインであるコンテンツを重要視し、さらに、ソースの上部に書かれているほど重要であると判断しているようです。
(最も重要なことは、良質なページを作成し、たくさんのページからリンクされることですが。)
こういった理由から、CSSレイアウトかつ記事作成が簡単であるMovableTypeが注目されているわけです。
次のページ >> サイドバーに余白を設置する
