横幅をカスタマイズ

パーフェクトトレジャーで作るサイトの横幅は８００pxになっています。

３カラム構成のサイトを作るとメイン領域が少し狭く感じるのでメインと右サイドバーを広くしてみました。

最近のＰＣは解像度が高く横幅９５０pxぐらいのサイトは普通に見ることが出来るのでそのサイズに広げてみます。

具体的には全体の横幅を１５０px広くして、メイン領域を１００px、右サイドバーを５０px広くしました。

具体的に変更する部分は、ヘッダー画像の横幅を９５０pxで準備すること。標準のものは全て８００pxで調整されています。

そしてスタイルシートを変更する必要があります。

「設定」の「ＣＳＳ編集」内の「base.css」を変更します。

/* コンテンツエリア */

#wrapper {
  width: 800px;
  _width: 804px;

この800pxを950px、804pxを954pxに変更し、次に・・・

#container {
  width: 780px;

この780pxを930pxに変更、次に・・・

#contents {
  text-align: left;
  float: right;
  width: 610px;

この610pxを760pxに変更、次に

#main {
  width: 440px;

この440pxを540pxに変更（ここは100px増やすことに注意）

#sidebar02 {
	width: 160px;

この160pxを210pxに変更（ここは50px増やすことに注意）

#sidebar02 ul a {
  display: block;
  width: 132px;
  _width: 160px;

この132pxを182pxに、160pxを210pxに変更

#footer {
  background: #FFF;
  width: 800px;
  _width: 804px;

この800pxを950pxに、804pxを954pxに変更。

以上で横幅が広がります。

３カラムで横幅を広げたい方は是非参考にしてみてください。