CSSテンプレート

サンプルソースは「幅800px」となっています。これを「860px」へ変更します。

変更部分

• #wrapper部分
• #contents部分
• #sidebar部分

ポイント

#contents部分と#sidebar部分の幅が全体の幅「860px」を超えない事。簡単な足し算/引き算です。

カスタマイズ方法-#wrapper部分

外部CSSの#wrapper部分のwidth: 800px;を変更します。#wrapper部分が全体の幅を決定しているので、ここを変更すれば横幅が広がります。

#wrapper {
  text-align: left;
  margin: 1em auto 0;
  width: 800px;
}

/*----------下記が変更後のソース*/

#wrapper {
  text-align: left;
  margin: 1em auto 0;
  width: 860px;
}

カスタマイズ方法-#contents部分

全体の幅を広くしたので#contents部分も少し広くします。ここではサイドバーは変更せずに(180pxのまま)、#contents部分の幅を広くする指定です。よって、サイドバーも変更の場合は「カスタマイズ方法-#sidebar部分」を参照して下さい。

#contents {
  float: right;
  width: 540px;
  padding: 4em 30px 4em 30px;
}

/*----------下記が変更後のソース*/
#wrapper {
  text-align: left;
  margin: 1em auto 0;
  width: 860px;
}

/*----------枠なし*/
#contents {
  float: right;
  width: 600px;
  padding: 4em 30px 4em 30px;
}

/*----------枠あり*/
#contents {
  float: right;
  width: 600px;
  padding: 4em 30px 4em 29px;
  border-left: 1px solid #cccccc;
}

カスタマイズ方法-#sidebar部分

サイドバー部分を「180pxから200px」へ変更します。それにともない「#contents部分」は「580px」へ変更します。

#contents {
  float: right;
  width: 540px;
  padding: 4em 30px 4em 30px;
}

#sidebar {
  float: left;
  width: 180px;
  padding: 4em 10px 2em;
}

/*----------下記が変更後のソース*/
#wrapper {
  text-align: left;
  margin: 1em auto 0;
  width: 860px;
}

/*----------枠なし*/
#contents {
  float: right;
  width: 580px;
  padding: 4em 30px 4em 30px;
}

#sidebar {
  float: left;
  width: 200px;
  padding: 4em 10px 2em;
}

/*----------枠あり*/
#contents {
  float: right;
  width: 580px;
  padding: 4em 30px 4em 29px;
  border-left: 1px solid #cccccc;
}

#sidebar {
  float: left;
  width: 200px;
  padding: 4em 10px 2em;
}

無料テンプレート枠は #contents / #sidebar ともに内側に余白を設けています。上記で説明しているwidthは実質の入力範囲となります。