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

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;
}
.columnA .skinMainArea { /* レイアウト(1)用設定 */
	float:right;
	width:665px;
	/* ↑（※2）コンテンツ部分の幅 */
}
.columnA .skinSubA { /* レイアウト(1)用設定 */
	float:left;
	width:300px;
	/* ↑（※1）サイドバーの幅 */
}
/* ← 「2カラム・メニュー左」の幅変更のための設定上書きここまで */

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

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

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

黄色い文字で書かれた、

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

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

ですので正解は、「300＋680＋20＝1000」。

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

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

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

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

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

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

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

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

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