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

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

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

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

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

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

ちょっと頑張って足し算・引き算ができれば大丈夫！

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

/* 「3カラム・右ワイドメニュー」の幅変更のための設定上書きここから→ */
.skinHeaderArea { /* 各レイアウト共通の設定 */
	width:980px;
	/* ↑（※1）狭いサイドメニューの幅＋（※2）メインブロックの幅＋15（カラム間隔） */
	margin:0 auto;
	overflow:hidden;
}
.skinContentsArea { /* 各レイアウト共通の設定 */
	width:980px;
	/* ↑（※1）狭いサイドメニューの幅＋（※2）メインブロックの幅＋15（カラム間隔1） */
	margin:0 auto;
	padding-bottom:30px;
	overflow:hidden;
	zoom:1;
}
.columnC .layoutContentsA { /* レイアウト(3)用設定 */
	float:right;
	width:785px;
	/* ↑（※2）メインブロックの幅＝（※a）ワイドサイドメニューの幅＋（※b）コンテンツエリアの幅＋15（カラム間隔2） */
}
.columnC .skinMainArea { /* レイアウト(3)用設定 */
	float:left;
	width:470px;
	/* ↑（※b）コンテンツエリアの幅 */
}
.columnC .skinSubA { /* レイアウト(3)用設定 */
	float:right;
	width:300px;
	/* ↑（※a）ワイドサイドメニューの幅 */
}
.columnC .skinSubB { /* レイアウト(3)用設定 */
	width:180px;
	/* ↑（※1）狭いサイドサイドメニューの幅 */
}
/* ← 「3カラム・右ワイドメニュー」の幅変更のための設定上書きここまで */

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

黄色い文字の部分が、修正対象と説明コメントです。修正したい内容によっては手を入れなくてよい部分もありますので、全部修正しないといけないという訳ではないです。

レイアウト（1）とレイアウト（2）の幅変更より少しややこしいです。「カラム間隔1」と「カラム間隔2」はそれぞれ、真ん中のコンテンツエリアの左・右の間隔で別物ですが、等間隔にしておいたほうがよいでしょう。別物だけど、同じ数字にすると考えておいてください。

さて、それでは計算をはじめます。狭いサイドメニューの幅を広げて、横幅234ピクセルのアフィリエイトバナーを掲載できるようにしようと思います。

まず、/* ↑（※1）狭いサイドサイドメニューの幅 */に着目します。180を234に書き換えます。

すると（※1）と関係してくる部分は、/* ↑（※1）狭いサイドメニューの幅＋（※2）メインブロックの幅＋15（カラム間隔） */のコメントのある部分ですね。ここが、「234＋（※2）メインブロックの幅＋15（カラム間隔）」となりますが、他の部分は変更しませんので、「234＋785＋15＝1034」となります。

ですので次には、980を1034に書き換えます。2か所ありますね。

はい、これで終わりです。ややこしそうに思いましたが、手順を追ってやれば簡単ですね。この条件の場合、書き換えた後のCSSが次のようになっているはずです。

/* 「3カラム・右ワイドメニュー」の幅変更のための設定上書きここから→ */
.skinHeaderArea { /* 各レイアウト共通の設定 */
	width:1034px;
	/* ↑（※1）狭いサイドメニューの幅＋（※2）メインブロックの幅＋15（カラム間隔） */
	margin:0 auto;
	overflow:hidden;
}
.skinContentsArea { /* 各レイアウト共通の設定 */
	width:1034px;
	/* ↑（※1）狭いサイドメニューの幅＋（※2）メインブロックの幅＋15（カラム間隔1） */
	margin:0 auto;
	padding-bottom:30px;
	overflow:hidden;
	zoom:1;
}
.columnC .layoutContentsA { /* レイアウト(3)用設定 */
	float:right;
	width:785px;
	/* ↑（※2）メインブロックの幅＝（※a）ワイドサイドメニューの幅＋（※b）コンテンツエリアの幅＋15（カラム間隔2） */
}
.columnC .skinMainArea { /* レイアウト(3)用設定 */
	float:left;
	width:470px;
	/* ↑（※b）コンテンツエリアの幅 */
}
.columnC .skinSubA { /* レイアウト(3)用設定 */
	float:right;
	width:300px;
	/* ↑（※a）ワイドサイドメニューの幅 */
}
.columnC .skinSubB { /* レイアウト(3)用設定 */
	width:234px;
	/* ↑（※1）狭いサイドサイドメニューの幅 */
}
/* ← 「3カラム・右ワイドメニュー」の幅変更のための設定上書きここまで */

この条件では、メインブロックの幅が変わりませんでしたので結構単純ですが、そっちを変えるとなるともう少し頑張って足し算・引き算をする必要があります。けれども、間違えれば計算しなおして修正すればよいだけですから、気楽に行きましょう！

「集客・アフィリエイトに役立つ」アメブロカスタマイズ講座

「HTMLなんて分からないけど、アメブロを好きなデザインにしたい！」そんな方の思いにも答えられるサイトを目指しています

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

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

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

ちょっと頑張って足し算・引き算ができれば大丈夫！