fc2ブログ

U-BOX/うさぎの小箱

FC2ブログのテンプレートを配布しています

  1. -
  2. tb: 0
  3. cm: 4
  4. [ edit ]

カラムの配置(v43green)

v43green は変則3カラムで通常両サイドのカラムが右に寄せてあります。
これを両サイドに戻す方法を説明します。

ブログは以下のボックスをフロートさせることにより構成されています。
[ out ] ・・・ 全体の幅を規定、[ main ] + [ side ]
 [ main ] ・・・ [ con ] + [ side2 ] → フロート左
  [ con ] ・・・ topentry → フロート左
  [ side2 ] ・・・ プラグイン1,3 → フロート右
 [ side ] ・・・ プラグイン2 → フロート右

両サイドに配置するためには [ main ] 内の [ con ] と [ side2 ] の配置を逆にします。
  [ con ] ・・・ topentry → フロート右
  [ side2 ] ・・・ プラグイン1,3 → フロート左
*あるいは [ main ] と [ side ] の配置を逆?(プラグイン1,2,3の配置による)

とりあえずは、上記の方法を説明します。

テンプレートの設定 > U-BOXv43green のスタイルシート編集
 > 以下の2箇所のフロートを変更します。
 > それに合わせてwidthを変更、カラム間を調整しました。


-----------------------------------------------------



/* 記事,menu表示部分------(side+con) */
#main {
float: left;
width: 735px;
width: 79%;
margin: 0 5px 0 0;
padding: 0;
}



/* 記事表示部分 */
#con {
background-color: #14332d;/*170-60-20*/
float: right;
width: 500px;
width: 67%;/*52.9%*/
width: 68.7%;/*54.3%*/
margin: 0;
padding: 1em 0 2em;
word-break: break-all;
border: 0px solid #333; /*0-0-20*/
}


/* -右サイドバー-------------*/
#side {
background-color: #14332d;
float: right;
width: 215px;
width: 20%;
padding: 0;
}


/* -左サイドバー--------------- */
#side2 {
background-color: #14332d;
float: left;
width: 215px;
width: 30%;/*23.7%*/
padding: 0;
/*display: none;*/
}



----------------------------------------------------------



スポンサーサイト




  1. blog_type
  2. tb: 0
  3. cm: 2
  4. [ edit ]

v43-44green

v43green_公開(8/9申請,8/14承認)

PC版サンプル(画像をクリックするとサンプルページを見ることが出来ます)
>>DL

3カラム。変動幅。ウィンドウ幅の80%、最小幅固定900px、最大幅固定1200px。
記事部分52.9%。
右サイドバー(プラグイン1,3) 23.7%。
左サイドバー(プラグイン2) 20%。
font-size: 75% ( 12px)(winデフォルト16px )


v44green2_公開(8/10申請,8/14承認)

>>DL

2カラム。変動幅。ウィンドウ幅の80%、最小幅固定900px、最大幅固定1200px。
記事部分69%。
右サイドバー(プラグイン1,2,3) 30%。
font-size: 90% ( 14.4px)(winデフォルト16px )


v42flo03 のバリエーションです。
jQuery jquery-1.7.1.min.js (pagetop300-500.js)


カラム幅を超える画像は縮小表示されます。
サイドにナビメニュー、プラグインメニュー配置。


★8/19背景画像追加し、ページトップicon変更しました。




  1. blog_type
  2. tb: 0
  3. cm: 0
  4. [ edit ]

v42flo03

v42flo03_公開(8/7申請,8/14承認)

PC版サンプル(画像をクリックするとサンプルページを見ることが出来ます)
>>DL


v22kamiB のバリエーションです。


3カラム。変動幅。ウィンドウ幅の80%、最小幅固定900px、最大幅固定1200px。
記事部分52.9%。
右サイドバー(プラグイン1,3)23.7%。
左サイドバー(プラグイン2)20%。
jQuery jquery-1.7.1.min.js (pagetop300-500.js)


font-size: 75% ( 12px)(winデフォルト16px )

カラム幅を超える画像は縮小表示されます。
サイドにナビメニュー、プラグインメニュー配置。







  1. blog_type
  2. tb: 0
  3. cm: 0
  4. [ edit ]

v41mjL

v41mjL_公開(8/5申請,8/7承認)

PC版サンプル(画像をクリックするとサンプルページを見ることが出来ます)
>>DL


v39flo02 のバリエーションです。


3カラム。変動幅。ウィンドウ幅の80%、最小幅固定800px。
記事部分47%。
右サイドバー(プラグイン1,3)29%。
左サイドバー(プラグイン2)19%。
jQuery jquery-1.7.1.min.js (pagetop300-500.js)


font-size: 90% ( 14.4px)(winデフォルト16px )

カラム幅を超える画像は縮小表示されます。
ヘッダーにナビメニュー、サイドにプラグインメニュー配置。








NEW ENTRY  | BLOG TOP |  OLD ENTRY

プロフィール

usagi

Author:usagi
FC2ブログへようこそ!

information

2015.2.8_23:12
管理人のみ閲覧のコメントを下さるみなさまへ

管理ページを見ることを忘れがちな管理人は 返事が遅れがちになることが多いため、ご注意下さい。

お急ぎの返信が必要なかたはカギなしでお願いします。
また、URL を記載していただくと、たすかります。

カレンダー

07 | 2014/08 | 09
- - - - - 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
31 - - - - - -

ユーザータグ

*