【賢威7.0】サイトの横幅を変更する






外観⇒テーマの編集⇒base.css

/*——————————————————–
テンプレートレイアウト
——————————————————–*/

.container{
position: relative;
}

.site-header-in,
.global-nav-in,
.main-image-in,
.main-image-in-text,
.main-image-in-text-cont,
.main-body-in,
.site-footer-in{
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 1200px; /*サイトの横幅。これより小さければレスポンシブ*/
margin: auto;
}

 

テンプレートレイアウトのwidthが、1200pxになっているので、
これを自分が広げたり、縮めたりしたいサイズに直す。

 

カラムの広さのパーセンテージも修正する。

1カラムは特に変更する必要はないが、
2カラムは、記事部分の広さと、サイドコンテンツ部分の広さを調整してやる必要がある。

/*2カラムレイアウト*/
.col2 .main-conts{
float: left;
width: 65%;
}

.col2 .sub-conts{
float: right;
width: 30%;
}

widthの%率(数値)をいじってやることで、調整できる。
マージンの関係で5%の余りを持たせているので、
mainとsubのパーセンテージが合わせて95%になるように調整する。

例えば、1500pxに広げた場合は、
mainのwidthを、75%
subのwidthを、20%
とかにすると、丁度良い広さになる。

/*2カラムレイアウト(リバース)*/
.col2r .main-conts{
float: right;
width: 65%;
}

.col2r .sub-conts{
float: left;
width: 30%;
}

リバースも一緒。


 

SEOに強い戦略的テンプレート「賢威6.2」はこちらから。

(賢威6.2の中に、賢威7.0が公開されていますので、買っても大丈夫です。)

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です