いつもlivedoor Blogをご利用いただきありがとうございます。担当の佐々木です。今回は、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です。
興味のある方はぜひチャレンジしてみてください。

「カスタマイズ」カテゴリの最新記事