HTMLやCSSはよく分からないけれど、「CSS編集用デザインを選択して自分好みのデザインにしたい！」　と考える方々に分かりやすい解説記事を書きたいと思っています。

難易度表示付き記事一覧はこちらです

当記事は、【即席！】アメブロのページ幅を変える方法の応用編となります。基本的な考え方は同じですので、難しいと感じた方は、先に同記事を一読されることをおすすめします。

選択されているレイアウトごとに説明してゆきたいと思います。CSS編集用デザインを選択している方で、「2カラム・メニュー右」を選択されている方に向けた記事です。

当ブログでのレイアウトの分類

アメブロのページ幅変更に関する記事一覧

簡単な足し算ができれば大丈夫！

有料の広告費掲載オプション契約をされていない方は、ワイドサイドメニューの幅は、アメブロで掲載される300ピクセル幅のバナーを掲載するために最低限必要な横幅となっていますので、それ以下にしますと規約に抵触する可能性があるとともに、レイアウト崩れを起こしてしまいますのでご注意ください。

/* 「2カラム・メニュー右」の幅変更のための設定上書きここから→ */
.skinHeaderArea { /* 各レイアウト共通の設定 */
	width:980px; 
	/* ↑サイドバーの幅（※1）＋コンテンツエリアの幅（※2）＋15（カラム間隔） */
	margin:0 auto;
	overflow:hidden;
}
.skinContentsArea { /* 各レイアウト共通の設定 */
	width:980px;
	/* ↑（※1）サイドバーの幅＋（※2）コンテンツエリアの幅＋15（カラム間隔） */
	margin:0 auto;
	padding-bottom:30px;
	overflow:hidden;
	zoom:1;
}
.columnB .skinMainArea { /* レイアウト(2)用設定 */
	float:left;
	width:665px;
	/* ↑（※2）コンテンツ部分の幅 */
}
.columnB .skinSubA {
	float:right;
	width:300px;
	/* ↑（※1）サイドバーの幅 */
}
/* ← 「2カラム・メニュー右」の幅変更のための設定上書きここまで */

「2カラム・メニュー右」では、カラム幅の設定は上記のようにされていますので、この部分を上書きします。まず、上記のソースをコピー＆ペーストしてください。

黄色い文字の部分が、修正対象と説明コメントです。

たとえば、ワイドサイドメニューは300ピクセルのままで、全体の幅を650ピクセルに狭めることでコンテンツエリアを少しコンパクトにしつつ、サイドバーとの間隔は少し広げて20ピクセルにしたいとします。

黄色い文字で書かれた、

/* ↑サイドバーの幅（※1）＋コンテンツエリアの幅（※2）＋15（カラム間隔） */

の部分に注目してください。修正前は、「300＋665＋15＝980」です。全体で30ピクセル狭めて950ピクセルとしますが、カラム間を5ピクセル増やしますので、コンテンツエリアの幅は35ピクセル減らさないといけないという計算ができますよね？

ですので正解は、「300＋630＋20＝950」です！

665を630に、980を950に書き換えれば完成です。

20については設定不要です。「950－（300＋630）＝20」ですので、全体の幅からワイドサイドメニューとコンテンツ部分の幅を引いた残りで、CSSで幅が設定されている数字ではありませんから。

どれくらいの幅にするかは好き好きだと思いますが、あまり広くしすぎますと、画面幅をオーバーして右側が見えなくなる方もいらっしゃいますので、そこら辺は考慮していただいたほうがよいと思います。アメブロのページの最小幅は1100ピクセル設定ですので、1280ピクセル解像度のディスプレイで見て支障がないように考えておけばいいと思います。

各カラムの幅を任意に変更する方法～レイアウト（2）