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

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

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

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

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

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

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

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

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

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

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

変則レイアウトを活かす設定

このレイアウトを選択されている方は少ないと思われますので、ちょっと変速的に、同レイアウトを活かす方向で考えてみたいと思います。

コンテンツエリアと、右の2つのメニューの幅を15px→25pxに広げるのと同時に、コンテンツエリアもできるだけ広く500pxに設定するという条件で考えてみましょう。コンテンツエリアとメニューエリアの区分を明確にして、コンテンツも少しでもゆったりと見てもらおうという狙いからの設定です。

上記のプランに基づいて、決められるところから決めていきます。

まず、カラム間隔の25ピクセル。これは、.columnE .skinSubBのボックス設定に書かれています。。margin-left:15px;の部分です。15px→25pxにします。他のレイアウトになかった設定です。

で次は、コンテンツエリアの幅が500pxでしたね。そうすると、それぞれの足し算は次のようになります。

（（（※1）狭いサイドメニューの幅＋＋margin-left）＋（※2）コンテンツエリアの幅＋（※3）ワイドサイドメニューの幅＋15（カラム間隔）＝180＋25＋500＋300＋15＝1020（各レイアウト共通の設定）
コンテンツエリアの幅＝500px
ワイドサイドメニューの幅＝300px（変更なし）
狭いサイドメニューの幅＝180px（変更なし）＋margin-left:25px（変更あり）

ですので結果、以下のようになっていれば正解です。

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

さて、当記事については、どれくらいのニーズがあるのでしょうか？

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

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

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

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

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

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

変則レイアウトを活かす設定