メインカラムの横幅を変更する方法

はじめに

今回はメインカラムの横幅を変更する方法です。

メインカラムとは、ブログのメッセージボードや記事、コメントの部分になります。

この変更方法で横幅を広くしたり、狭くしたりできます。

下の画像の赤枠の部分になります。

作業前の確認

こちらはCSSが編集可能なスキンでの作業となりますので、使用しているスキンがCSS編集用スキンかご確認下さい。

今回は例として「２カラム右メニュー」で説明します。

メインカラムの横幅を変更方法の説明

まずは下記の画像をご覧下さい。

赤枠は上記の画像にもあったメインカラムの部分になります。

その外側に青枠があるのが解るでしょうか？

何故この画像をご覧いただいたかと言うと、この青枠の中にメインカラムとサイドメニューのカラムが入っているのです。

と言うことは、「青枠＝メインカラム（赤枠）＋サイドメニュー」となる訳です。

砕いて説明すると、メインカラム幅（赤枠）＋サイドメニュー幅が青枠の幅よりハミ出てはダメですと言うことです。

ハミ出た場合はカラム落ちと言われてる現象になり、サイドメニューが下の方にズレたりします。

今回の例として使う「２カラム右メニュー」の初期状態は

・青枠（980px）

・メインカラム（665px）

・サイドメニュー（300px）

となっています。

※足して計算すると665＋300＝965で25余りますがこれは余白の分です。

メインカラムの横幅を変更する手順

①は通常のCSSです。
②のCSSをCSS編集画面にて追記（コピペ）で変更できます。

赤字の部分を変更することで調整できます。
青字＝ヘッダー部分も一緒に調整
緑字＝メイン、サイドの外枠調整
ピンク字＝メインカラム調整
※ご使用になっているデザインにより異なりますのでご注意下さい。

①通常のCSSはこちら

/* ▼▼メインカラム横幅▼▼ */
.skinHeaderArea,
.skinContentsArea{
width:980px;
}
.columnB .skinMainArea{
width:665px;
}

②変更後CSS※例として20px広げています。

/* ▼▼メインカラム横幅変更後▼▼ */
.skinHeaderArea,
.skinContentsArea{
width:1000px;
}
.columnB .skinMainArea{
width:685px;
}