Blogger Labo：【Vaster2】ページ全体幅のカスタマイズ

このページでは、Vaster2のページ全体幅のカスタマイズ方法を説明する。

このカスタマイズを始める前に「テンプレートのバックアップ」は お約束として必ず実行しよう。

・Vaster2のカスタマイズ方法はこちら


ページ全体幅のカスタマイズ


ページ全体幅のCSS


 ページ全体幅の設定 

.content-wrapper{
   width:1040px;　ページ全体の横幅（1040px）
   margin-right:auto;
   margin-left:auto;
   padding-top:20px;
}

 記事ページ幅の設定 

.main-outer{
   float:left;
   width:710px;　記事ページの幅（710px）
   background:$(kizi.background);
   padding-left:20px;
   box-sizing:border-box;
}

 サイドバー幅の設定 

.sidebar {
   width:330px;　サイドバーの幅（330px）
   max-width:100%;
   float:left;
   padding-left:40px;
   box-sizing:border-box;
}

※（）内は初期値

上記が Vaster2のページ全体幅の設定に関するCSSに説明を加えたもの。

初期設定ではページ全体が「1040px」で、記事ページ「710px」・サイドバー「330px」に振り分けられている。

なお、「記事ページ幅 ＋ サイドバー幅 ＝ ページ全体幅」となるように設定しなければならない。

ページ全体の幅を変える


【方法】

・「.content-wrapper{」で検索する
・「.content-wrapper{}」の中の「width:1040px;」を変更してページ全体幅を設定する
・「.main-outer{」で検索する
・「.main-outer{}」の中の「width:710px;」を変更して記事ページ幅を設定する
・「.sidebar {」で検索する
・「.sidebar {}」の中の「width:330px;」に「全体 － 記事ページ」の残りの値を設定する

※全体幅を1040px以下にする場合は、1040px該当部分全てを書き直した方がよいと思われる。