2カラムのデザインの左右のレイアウトを変更する

2カラムのデザインの左右のレイアウトを変更する方法をご紹介します。

ただしこの方法は、全てのデザインに共通して使えるものではありません。
デザインによってはレイアウトがくずれる可能性もありますので、その点をあらかじめご了承ください。

2カラムのデザインのレイアウトは、おおまかに下の図のようなブロックに分けられています。



CSSでは、それぞれのブロックに対してレイアウトが指定されています。
例えば「フェルト」というデザインの場合は下記のようになっています。

#content{
     float:left;
     width:500px;
     text-align:center;
     }

#links{
     float:right;
     width:172px;
     padding:0px 0px 50px 0px;
     text-align:center;
     }

このデザインのレイアウトの左右を逆にする場合は、#contentの「float:left;」を「float:right;」に、#linksの「float:right;」を「float:left;」に書き換えて保存・再構築すればOKです。

そうすると下の図のようになります。



元に戻したい場合は、上記と逆のことをやればOKです。




livedoorナレッジの質問
シンプル-Vivid Style(2カラム)のサイドバーを左から右に変更
シンプル-オレンジ2カラムのサイドバーを右から左に変更
マテリアル-水彩(2カラム)のサイドバーを右から左に変更
Plain Diary(2カラム)のデザインを左から右に変更
2007年10月06日(土) 18:00:51 Modified by sphee12