カラムの配置(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を変更、カラム間を調整しました。
これを両サイドに戻す方法を説明します。
ブログは以下のボックスをフロートさせることにより構成されています。
[ 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;*/
}
・
・
・
----------------------------------------------------------
・
・
・
/* 記事,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;*/
}
・
・
・
----------------------------------------------------------
スポンサーサイト
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変更しました。
PC版サンプル(画像をクリックするとサンプルページを見ることが出来ます)

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

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変更しました。
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 )
カラム幅を超える画像は縮小表示されます。
サイドにナビメニュー、プラグインメニュー配置。
PC版サンプル(画像をクリックするとサンプルページを見ることが出来ます)

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 )
カラム幅を超える画像は縮小表示されます。
サイドにナビメニュー、プラグインメニュー配置。
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 )
カラム幅を超える画像は縮小表示されます。
ヘッダーにナビメニュー、サイドにプラグインメニュー配置。
PC版サンプル(画像をクリックするとサンプルページを見ることが出来ます)

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 )
カラム幅を超える画像は縮小表示されます。
ヘッダーにナビメニュー、サイドにプラグインメニュー配置。
プロフィール
Author:usagi
FC2ブログへようこそ!
information
2015.2.8_23:12
管理人のみ閲覧のコメントを下さるみなさまへ
管理ページを見ることを忘れがちな管理人は 返事が遅れがちになることが多いため、ご注意下さい。
お急ぎの返信が必要なかたはカギなしでお願いします。
また、URL を記載していただくと、たすかります。
管理人のみ閲覧のコメントを下さるみなさまへ
管理ページを見ることを忘れがちな管理人は 返事が遅れがちになることが多いため、ご注意下さい。
お急ぎの返信が必要なかたはカギなしでお願いします。
また、URL を記載していただくと、たすかります。
最新記事
最新コメント
カテゴリ ・