FC2ブログ

左2カラムを右2カラムに変更する方法 Templ8@FC2blog

FC2ブログテンプレートの無料配布とカスタマイズでSEO対策(検索エンジン最適化)

ホーム > スポンサー広告 >左2カラムを右2カラムに変更する方法ホーム > templ8カスタマイズ >左2カラムを右2カラムに変更する方法

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。


--/--/-- --:-- スポンサー広告

左2カラムを右2カラムに変更する方法

2カラムのテンプレートを使いたくて、いいデザインを見つけたけど、左カラムもしくは右カラムしかなかったってことありますよね?左カラムから右カラムに変更したい!そんな要望にお応えします。

カスタマイズの方法ですが、まずは枠組みの簡単な説明からです。

HEADER
LEFT
RIGHT
FOOTER
HEADER
RIGHT
LEFT
FOOTER
HEADER
LEFT
RIGHT
FOOTER


左2カラムを右2カラムに変更する方法は簡単です。上記左図のLEFT(赤カラム)とRIGHT(黄カラム)がありますが、これらを逆にするだけです。これはスタイルシートのちょっとした変更でできます(中央図)。

だけどよく考えてみてください。LEFT(赤カラム)とRIGHT(黄カラム)の位置が逆になると、LEFTが右(right)にいき、RIGHTが左(left)にいっちゃいますよね(上記中央図)。それでもシステム的にもユーザーがブログを見るぶんにも問題はありません。唯一問題があるとすれば、再度HTMLを編集する際に自分でこのことを覚えておかないと頭がこんがらがります。「あれLEFTなのにrightで...あれ?」となります。だから次にLEFTとRIGHTの表記を換えて正しくしていきます(上記右図)。これが手間と思う人もいるし、後のカスタマイズのためにもちゃんとしておこうと言う人もいるので、最後の工程はやってもやらなくてもどちらでもいいです、おまかせします。

それでは左2カラムを右2カラムに変更する方法です。

/******************************************* ▼ サイトの幅 ▼ */
#outline {
width:810px; /* 全体 */
margin:0 auto;
}
#right {
width:550px; /* 右 */
float:right;
}
#left {
width:250px; /* 左 */
float:left;
}
/******************************************* ▲ サイトの幅 ▲ */

CSS(スタイルシート)をみると上記のようになっていると思います。上記赤字のfloatの部分をleft、right逆にしましょう。#rightはfloat:leftにして#leftはfloat:rightにするのです。そうすれば左2カラムが右2カラムになります。これで一応完成です。

あとは上記中央図を右図にする方法です。まずHTML編集で<div id="right">を探して<div id="left">に書き換え、<div id="left">を探して<div id="right">に書き換えます。各々1個ずつしかないので簡単に探せます。記事の上とプラグインの上を探せば見つかると思います。それからスタイルシートのサイトの幅(上記してあるとことろ)の#rightを#leftに書き換え、#leftを#rightに書き換えます。このときfloatはいじってはいけません。これで完成です。

できましたでしょうか?うまくできなかったり何か解からないことがあれば何でも聞いてください。

2008/11/15 14:49 templ8カスタマイズ
メールフォーム
僕のカスタマイズしたテンプレート、その他テンプレートについて、何か解からないことがあれば何でも聞いてください。具体的に書いて頂けるとありがたいです。

名前:

メール:

件名:

本文:



上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。