サイドバーの配置変更

今回は、「サイドバーの配置変更」について説明します。

デフォルト・テンプレートでは、右側にサイドバー、左側にエントリーが表示されています。この配置を逆にして、左側にサイドバー、右側にエントリーを表示する方法を説明します。

■ 実例カスタマイズ（サイドバーの配置変更）



↑クリックすると、カスタマイズ後のイメージが拡大して表示されます（別ウィンドウ）。

カスタマイズ方法（MovableType編）

では、サイドバーとエントリーの配置を変更するカスタマイズ方法について説明します。

■ CSS（スタイルシート）の編集
デフォルト・テンプレート（Ver.3.17）の場合、下記の箇所が編集対象となります。

＜スタイルシート ＞ ←スタイルシート全体の解析が見れます。

　■ エントリー部分

#center { 　・・・ float: left; }

　■ サイドバー部分

#right { 　・・・ float: left; }

デフォルト・テンプレートでは、
エントリー部分は、「float: left」、
サイドバー部分は、「float: left」と指定されています。

「float: left」とは、「指定した要素を左に寄せ、後に続く内容はその右側に回り込ませる」という指定です。

エントリー部分を右側に配置するには、「left」の指定を、「right」に指定にすることで、変更することができます。

＜カスタマイズ記述例＞

　■ エントリー部分

#center { 　・・・ float: right; }

　■ サイドバー部分

#right { 　・・・ float: left; }

編集後は、「保存」し、スタイルシートを「再構築」します。

■ 参考資料
MovableTypeのメインページの大まかな構造は、下図のようになります。カスタマイズの際にイメージしやすくなると思いますので、参考にしてくださいね。

■ MovableType（Ver.3.17） メインページ クラス構造

body #container #banner 　#center 　.content 　#right

以上、「サイドバーの配置変更」について説明しました。