カラムの幅とライン

ブログの横幅など、16sorahane　を例に説明します。　→　（参考ページ)


テンプレートの設定　＞　U-BOXv16sorahane-sam のスタイルシート編集
　＞　以下の３箇所が、ブログ幅、各カラム幅、を、緑箇所が左右のラインを指定します。

左右のラインは　1px　→　0px　で非表示になります。

１out・・・ブログ幅
４side，５side2・・・左右のサイドバー幅
２main・・・３con（中央カラム）＋５side2(右サイドバー)
　→　１ = ４ + ２　・・・ この数式を保持すれば１～５の数値は自由に設定できます。
これは固定幅になっていますが、％で設定すればブラウザの幅に応じて変化するものにできます。
*（例）
　１・・・90%　→　ブラウザ幅の90％
　２、4　→　１を100％として算出
　３、５　→　２を100％として算出
注・１、２は100%で計算するとマージン、パディング、ボーダーの幅による誤差のため入らないことがあります。
　→　ブラウザの最小幅を想定した誤差分の％を加算して100%にします。
　→　このとき、想定した最小幅(例・1024px)より狭いブラウザの時はブログ幅が固定されるように、１に下記を追記します
　

1,
width: 90%;
min-width: 920px;
2.
width: 76%;
3,
width: 63%;
4,
width: 23%;
5,
width: 34%;

----------------------------------------------------------
・
・
・
/* ================レイアウト設定=============== */
/* out{ main(con + side2[right(p2,3)]) + side[left(p1)] } */

#out {
width: 950px;　→　１
margin: 0 auto;
pading: 0;
border-right: 1px solid #ddd;
border-left: 1px solid #ddd;
}
・
・
・
/* 記事,menu表示部分------(side+con) */
#main {
float: right;
width: 735px;　→　２
margin: 0;
padding: 0;
}
・
・
・
/* -左サイドバー-------------*/
/* 記事表示部分 */
#con {
background-color: #eee;
float: left;
width: 500px;　→　３
margin: 0;
padding: 0 0 2em;
word-break: break-all;
border: 10px solid #eee;
}
#side {
float: left;
width: 215px;　→　４
padding: 0;
}

/* -右サイドバー--------------- */
#side2 {
float: right;
width: 215px;　→　５
padding: 0;
/*display: none;*/
}
・
・
・
----------------------------------------------------------