左右カラムの入れ替え方

  1. テンプレート カスタマイズ
 



 



左右のカラムを入れ替えるには、スタイルシート内で#rightと#leftまたは、#wrapperにあるfloatプロパティの値(rightやleft)を書き換えれば完了です。

カスタマイズの前にテンプレートのコピーを取って下さい

デザインの編集>修正>スタイルシートより

2カラムなら#leftと#right
3カラムなら#wrapperと#left

と書かれた部分を探して下さい


2カラムの例 (pluging_2a_01の場合)

#left {
float: left;
width: 320px;
display: inline;
margin-right: 20px;
overflow: hidden;
}

#right {
float: right;
width: 600px;
padding: 0 10px 10px;
overflow: hidden;
}

3カラムの例 (pluging_3c_01の場合)
#wrapper {
float: right;
width: 722px;
padding-bottom: 20px;
}

#left {
float: left;
width: 218px;
display: inline;
overflow: hidden;
font-size: 11px;
margin: 0 10px;
}

各floatプロパティの値(rightまたはleft)を入れ替えます

2カラムの例 (pluging_2a_01の場合)

#left {
float: right;
width: 320px;
display: inline;
margin-right: 20px;
overflow: hidden;
}

#right {
float: left;
width: 600px;
padding: 0 10px 10px;
overflow: hidden;
}

3カラムの例 (pluging_3c_01の場合)
#wrapper {
float: left;
width: 734px;
padding-bottom: 20px;
}

#left {
float: right;
width: 206px;
display: inline;
overflow: hidden;
font-size: 11px;
margin: 0 10px;
}

2カラムの例 (pluging_2a_01の場合)

#left {
float: left;
width: 320px;
display: inline;
margin-right: 20px;
overflow: hidden;
}

#right {
float: right;
width: 600px;
padding: 0 10px 10px;
overflow: hidden;
}

3カラムの例 (pluging_3c_01の場合)
#wrapper {
float: right;
width: 722px;
padding-bottom: 20px;
}

#left {
float: left;
width: 218px;
display: inline;
overflow: hidden;
font-size: 11px;
margin: 0 10px;
}

更新ボタンをクリックします

<<  ヘッダー画像、背景色の替え方  |  もくじへ  |  背景色・背景画像の変え方  >>
<<  ヘッダー画像、背景色の替え方  |  ホーム  |  背景色・背景画像の変え方  >>

コメント

コメントの投稿

管理者にだけ表示を許可する


画像の文字を半角数字で下記ボックスに記入ください。
文字が読みにくい場合はブラウザの更新をすると新しい文字列が表示されます。

トラックバック

トラックバックURLはこちら
http://blogmanual.dtiblog.com/tb.php/90-8feecafb
|
ブログ | 総合ポータル | ニュース | テンプレート
利用規約 | ||通報|| | Report Abuse