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

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;
}
.columnD .layoutContentsA { /* レイアウト(4)用設定 */
	float:left;
	width:785px;
	/* ↑（※2）メインブロックの幅＝（※a）ワイドサイドメニューの幅＋（※b）コンテンツエリアの幅＋15（カラム間隔2） */
}
.columnD .skinMainArea { /* レイアウト(4)用設定 */
	float:right;
	width:470px;
	/* ↑（※b）コンテンツエリアの幅 */
}
.columnD .skinSubA { /* レイアウト(4)用設定 */
	float:left;
	width:300px;
	/* ↑（※a）ワイドサイドメニューの幅 */
}
.columnD .skinSubB { /* レイアウト(4)用設定 */
	width:180px;
	/* ↑（※1）狭いサイドサイドメニューの幅 */
}
}
/* ← 「3カラム・左ワイドメニュー」の幅変更のための設定上書きここまで */

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

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

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

このレイアウトを選択している方に対して、決して意地悪をしたい訳ではないのですが、あまり簡単すぎても失礼かと思いますので、ちょっとややこしい例題に臨みたいと思います。ややこしいのが嫌いな方は、上記ソースをコピー＆ペーストして、3カラム・左ワイドメニューの記事を読みかえていただいたほうがよいかも知れません。

では、ちょっとややこしいの行きます（笑）。「各カラム幅」を15ピクセルから20ピクセルに広げて、狭いサイドメニューの幅もそのままで、全体の幅980ピクセルはそのままにしたい場合の事例です。

単純に考えば、カラム間隔が5ピクセルずつ増えますので、コンテンツ部分が10ピクセル狭くなるだろうということが想像されます。そう考えると単純ですね。

では、上から行きましょう。/* ↑（※1）狭いサイドメニューの幅＋（※2）メインブロックの幅＋15（カラム間隔） */の部分、カラム間隔の15が20に変わります。計算結果である全体の幅の980ピクセルと「（※1）狭いサイドメニューの幅」はそのままにしますので、「（※2）メインブロックの幅」が変わってしまうことが分かります。つまり、5ピクセル少なくなってしまうわけですから、785－5＝780になります。ですので、まずここを書き換えます。

次に、/* ↑（※2）メインブロックの幅＝（※a）ワイドサイドメニューの幅＋（※b）コンテンツエリアの幅＋15（カラム間隔2） */の部分です。カラム間隔2も20になりますので、それぞれこれまでの計算結果数字も入れると、「780＝300＋（※b）コンテンツエリアの幅＋20」となります。

コンテンツエリアの幅＝780－300－20＝460となりますね。この結果を受けて、470を460に書き換えます。はい。はじめに考えていたとおり、10ピクセル狭くなりました。これで正解です！

ちょっとややこしかったと思いますが、手順を追えば間違えません。この条件の場合、書き換えた後のCSSが次のようになっているはずです。

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

思ったより単純だったと思います。もっと複雑な条件でも、手順さえ追えばそれほど難しくないと思います。コメントにある計算式で検算して、全部合っていればよいわけです。ブログを更新して、間違っているのに気づけば計算しなおして修正すればよいだけですから、気楽に行きましょう！

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

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

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

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

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

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