Design218*

CROSS：十字レイアウトの変更方法

「Design218-CROSSxS2」のスタイルシート編集部分で変更します

/*---------------------------------------------------------
★レイアウト関連
---------------------------------------------------------*/
div#container
{
width:70%;　←　ブログ全体の割合(70%を100％とする)
text-align:left;
margin:0 auto 0 auto;
padding:0;
}

div#primary-column
{
float:left;
width:66%;　←　70%(=100%)のうち66％が左カラム
}

div#secondary-column
{
float:right;
width:32%;　←　70%(=100%)のうち32％が右カラム
padding-left:2%;　←　70%(=100%)のうち2％が左カラムと右カラム間の余白
margin:150px 0;
}

.line1{
width:100%;
height:100%;
text-align:left;
border-bottom:1px solid #990000;　←　十字の横線：ヘッダー部(ブログタイトル下)
}

.line2{
width:100%;
height:100%;
text-align:left;
border-top:1px solid #990000;　←　十字の横線：フッター部(ページナビ上)
}

.line3{
width:70%;　←　十字の縦線を境として、その左が18％(余白側)：右が82％(エントリー側)＝100％
height:100%;
text-align:left;
margin:0 0 0 auto;
padding:30px;
border-left:1px solid #990000;　←　十字の縦線
}

続きを閉じる >>