スポンサーサイト

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

左右のカラムを入れかえる

2006–06–05 (Mon) 03:41
私の作っている2カラムの共有テンプレートは、float を使って左右に各カラムを配置しています。入れかえは非常に簡単です。

追記以下を参照してください。
 


  • 記事位置・アーカイブ等位置の設定部分を、それぞれ left right  に、rightleft  に書き換えます。


変更前
/* first-column(本文記事)全体の位置・幅・余白
-------------------------------------------------------------*/

div#first-column { float: left;
margin: 0px;
padding-left: 40px;
width : 544px; }


/* second-column(アーカイブ等)全体の位置・幅・余白の設定
-------------------------------------------------------------*/

div#second-column { float: right;
margin: 0px;
padding-right: 40px;
width: 214px; }

変更後
/* first-column(本文記事)全体の位置・幅・余白
-------------------------------------------------------------*/

div#first-column { float:
right;
margin: 0px;
padding-
right: 40px;
width : 544px; }


/* second-column(アーカイブ等)全体の位置・幅・余白の設定
-------------------------------------------------------------*/

div#second-column { float: left;
margin: 0px;
padding-left: 40px;
width: 214px; }

注: first-column、second-column と書いてある部分は、それぞれmaster-column 、slave-column という名前になっている場合もあります。

 


  • また、[ eme_lace-up_2w ] のように、背景画像の配置を % で指定している物は、以下の緑字部分の指定も変更してください。(画面左端からの位置を指定しています。)


変更前 ( 右側寄りに背景画像を配置 )

/*--- サイト全体のレイアウト ---*/

div#wrapper { width: 800px;
margin-left: auto;
margin-right: auto;
background-color: #fff;
background-image: url("~略~");
background-repeat: repeat-y;
background-position: 72% 0%;
text-align: left; }

変更後 ( 左側寄りに背景画像を配置 )

/*--- サイト全体のレイアウト ---*/

div#wrapper { width: 800px;
margin-left: auto;
margin-right: auto;
background-color: #fff;
background-image: url("~略~");
background-repeat: repeat-y;
background-position: 28% 0%;
text-align: left; }
スポンサーサイト

« [ eme_lace-up_2w ] の共有登録 | HOME |  [ eme_race_2col_wb-r ] の修正 »

コメント

コメントの投稿

 
管理者にだけ表示

トラックバック

トラックバックURL

http://emeraldmountain.blog11.fc2.com/tb.php/69-6713d381

⇒ この記事に対してトラックバックを送信する(FC2ブログユーザー)

 | HOME | 

translate this blog into

カレンダー

10 | 2017/11 | 12
- - - 1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 - -

最近の記事

最近のコメント

最近のトラックバック

カウンター

総閲覧数:

プロフィール

emeraldmountain

  • Author:emeraldmountain
  • 最近こちらのブログにはあまり出入りしていません。返信等はかなり遅れます。ご容赦くださいませ。

ブログ内検索

カテゴリー

全記事(数)表示

全タイトルを表示

Llnks

RSSフィード

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