【STINGER8】カスタマイズ、サイドバーを左にして左右を入れ替え、幅も変更する方法

【STINGER8】のデフォルトデザインはサイドバーが右にあります。これを左にする方法を書きたいと思います。あと330pxですとgoogle adsenseのレクタングル(大)（336px×280px）の広告が置けませんので、サイドバーの幅を300pxから336pxに変更したいと思います。

幅を広げ336pxのレクタングル（大）を置けるようにする

もしかしたらサイドバーは右のままで、サイズだけ広げたいという方もこのページを見ている可能性もありますので、まずは単純に幅を広げる方法を書きます。修正はstyle.cssを使います。【STINGER8】には子テーマも一緒にダウンロードできますので、基本的には子テーマを有効化して使うことをお勧めします。こちらでは子テーマにあるstyle.cssに追加する方法を書きます。【STINGER8】をそのまま使っている方は、同じクラス指定を修正しますので、【STINGER8】にあるstyle.cssを直接修正してください。

修正する場所は、style.cssの3006行目、ほぼ一番下の下記部分になります。

/*--------------------------------
	PCのレイアウト（右サイドバー）
	---------------------------------*/

	#contentInner {
		float: left;
		width: 100%;
		margin-right: -300px;
	}

	.st-main {
		margin-right: 320px;
		margin-left: 0px;
		background-color: #fff;
		border-radius: 4px;
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
		padding: 30px 50px 30px;
	}

	#side .st-aside {
		float: right;
		width: 300px;
		padding: 0px;
	}

	/*-- ここまで --*/

こちらを全部コピーして、子テーマのstyle.cssに貼り付けてください。

/*media Queries PCサイズ（960px以上）
----------------------------------------------------*/
@media print, screen and (min-width: 960px) {

/*--------------------------------
	PCのレイアウト（右サイドバー）
---------------------------------*/

	#contentInner {
		float: left;
		width: 100%;
		margin-right: -300px;
	}

	.st-main {
		margin-right: 320px;
		margin-left: 0px;
		background-color: #fff;
		border-radius: 4px;
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
		padding: 30px 50px 30px;
	}

	#side .st-aside {
		float: right;
		width: 300px;
		padding: 0px;
	}

/*-- ここまで --*/
}

/*media Queries PCサイズ（960px以上）
と書いてある部分に貼り付けます。
貼り付けましたら数字部分を修正します。修正は三か所です。
#contentInnerの-300pxとなっているところを336pxにします。
.st-mainの320pxの部分をプラス36pxで356pxにします。
#side .st-asideも300pxを336pxにします。

/*media Queries PCサイズ（960px以上）
----------------------------------------------------*/
@media print, screen and (min-width: 960px) {

/*--------------------------------
	PCのレイアウト（右サイドバー）
---------------------------------*/

	#contentInner {
		float: left;
		width: 100%;
		margin-right: -336px;
	}

	.st-main {
		margin-right: 356px;
		margin-left: 0px;
		background-color: #fff;
		border-radius: 4px;
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
		padding: 30px 50px 30px;
	}

	#side .st-aside {
		float: right;
		width: 336px;
		padding: 0px;
	}
/*-- ここまで --*/
}

修正したstyle.cssをFTPからstinger8-childフォルダに上書きします。
これで少しだけ幅が広がり、336pxになったと思います。

サイドバーを左に変更します

さきほど修正したスタイルシートをさらに修正します。
#contentInnerのfloat: left;をfloat: right;にします。margin-right: -300px;をmargin-right: -356px;にします。
.st-mainのmargin-right: 320px;を消します。
#side .st-asideのfloat: right;をfloat: left;にします。

/*media Queries PCサイズ（960px以上）
----------------------------------------------------*/
@media print, screen and (min-width: 960px) {

/*--------------------------------
	PCのレイアウト（右サイドバー）
---------------------------------*/

	#contentInner {
		float: right;
		width: 100%;
		margin-right: -356px;
		
		
	}

	.st-main {
		margin-left: 0px;
		background-color: #fff;
		border-radius: 4px;
		-webkit-border-radius: 4px;
		-moz-border-radius: 4px;
		padding: 30px 50px 30px;
	
	}

	#side .st-aside {
		float: left;
		width: 336px;
		padding: 0px;
		
	}
/*-- ここまで --*/
}

修正しましたら、先ほどと同じようにFTPでstyle.cssをstinger8-childフォルダに上書きします。

このようになっていれば修正は完成です！