〜まずやってみよう〜

※共有テンプレート「asagi-simple01」を使った例です。
スタイルシートで↓の部分をさがす。

/* レイアウト用ブロックの設定
----------------------------------------- */
	#container {
		width : 800px;
		margin-left : auto;
		margin-right : auto;
		background-color : transparent;
		text-align : left;	
	}
〜〜〜〜〜〜〜〜中　略〜〜〜〜〜〜〜〜〜〜
	.column {
		margin : 5px 0;
	}

/* タイトル・サイトの説明部分の設定
----------------------------------------- */

「/* レイアウト用ブロックの設定」以下「/* タイトル・サイトの説明部分の設定」の手前まで（「#container」〜「.column」）の部分を削除し、↓のお好みのものに書き換えてください。
※枠の中をクリックすると全文が選択されますので、コピーしてご利用ください。
▼サイドの幅を広げる▼
#container { width : 880px; margin-left : auto; margin-right : auto; background-color : transparent; text-align : left; } #branding { margin : 20px 0 0 0; border-color : #000000; border-width : 1px 1px; border-style:double; } #wrapper { float : left; width : 680px; } #primary-column { float : right; width : 480px; padding : 0 6px; voice-family : "\"}\""; voice-family : inherit; width : 468px; } html>body div#primary-column { width : 468px; /* Opera用のコンテンツ幅 */ } #secondary-column { float : left; width : 200px; } #extra-column { float : left; width : 200px; } #siteinfo-legal { clear : both; margin : 0 ; } .column { margin : 5px 0; }
▼メインの幅を広げる▼
#container { width : 880px; margin-left : auto; margin-right : auto; background-color : transparent; text-align : left; } #branding { margin : 20px 0 0 0; border-color : #000000; border-width : 1px 1px; border-style:double; } #wrapper { float : left; width : 720px; } #primary-column { float : right; width : 560px; padding : 0 6px; voice-family : "\"}\""; voice-family : inherit; width : 548px; } html>body div#primary-column { width : 548px; /* Opera用のコンテンツ幅 */ } #secondary-column { float : left; width : 160px; } #extra-column { float : left; width : 160px; } #siteinfo-legal { clear : both; margin : 0 ; } .column { margin : 5px 0; }
▼メイン・サイドの幅を広げる▼
#container { width : 960px; margin-left : auto; margin-right : auto; background-color : transparent; text-align : left; } #branding { margin : 20px 0 0 0; border-color : #000000; border-width : 1px 1px; border-style:double; } #wrapper { float : left; width : 760px; } #primary-column { float : right; width : 560px; padding : 0 6px; voice-family : "\"}\""; voice-family : inherit; width : 548px; } html>body div#primary-column { width : 548px; /* Opera用のコンテンツ幅 */ } #secondary-column { float : left; width : 200px; } #extra-column { float : left; width : 200px; } #siteinfo-legal { clear : both; margin : 0 ; } .column { margin : 5px 0; }

〜解説〜

幅が広くなりましたか？ご自身のブログにあわせてご利用下さい。
メインのカラムは幅480px程度、両サイドには幅200px程度までの画像が入るようになります。メインを広げた場合、横幅468px（バナーサイズ）も利用できるようになりますのでご活用下さい。

詳しい説明は省略させていただきます。他の幅に変えたい場合は数字を変える必要がありますが、自己責任でお願いします。