STINGER PLUSで記事エリアの横幅を変更する方法

こんにちは。鳥取もん(@tottorimon)です。

このサイトは「STINGER PLUS」という無料のテーマを利用させていただいております。

先日、記事下のアドセンスを横並びにする方法について紹介しました。
ですが、横並びにしたときに広告同士が近すぎで少し窮屈になってしまったので、記事エリアの横幅を広げることにしました。
今回はその方法について紹介します。

アドセンスを横並びにする方法についてはこちら。

STINGER PLUSでアドセンスを横並び(ダブルレクタングル)にする方法

変更前と変更後

今回の変更で記事エリアの横幅はこのように変わります。

変更前

変更後

ちょっと分かりにくいですが、記事エリアの左右の余白が少し減って横幅が増えていることが分かります。
(サイドバーの幅は特に変わりません)

またトップページの記事が一覧になって表示されているエリアも同じように横幅が広がります。

今回はこの方法で、記事エリアの横幅を広げます。

カスタマイズの流れ

今回のカスタマイズは下記の手順で行います。

１．style.cssにコードを追加する

以上です！
意外にすぐカスタマイズできてしまいます。

※今回のカスタマイズはSTINGER PLUSの子テーマをカスタマイズすることを想定しています。
※子テーマを使っていない場合のカスタマイズ方法は別途説明します。

１．style.cssにコードを追加する

子テーマを利用している方

▼下記のコードをコピーする

main {
		margin-right: 320px;
		margin-left: 0px;
		background-color: #fff;
		border-radius: 4px;
		padding: 30px 36px 30px;
	}

▼子テーマのstyle.cssで下記の部分を探し、コピーしたコードを追加する

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

追加後は下記のようになります。

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

main {
		margin-right: 320px;
		margin-left: 0px;
		background-color: #fff;
		border-radius: 4px;
		padding: 30px 36px 30px;
	}

以上で横幅の変更は完了です！
「padding: 30px 36px 30px;」の36pxの値を小さくすれば、その分の余白が無くなり、結果的に記事エリアの横幅が広くなります。

色々な値を試してみて、自分が満足する記事エリアの幅を調整してみてください。

子テーマを利用していない方

▼style.cssで下記のコードを探す

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

▼paddingの50pxの部分を36pxに変更する。
(下記のようになります)

main {
		margin-right: 320px;
		margin-left: 0px;
		background-color: #fff;
		border-radius: 4px;
		padding: 30px 36px 30px;
	}

以上でOKです！

まとめ

今回はSTINGER PLUSの記事エリアの横幅を広げる方法について紹介しました。

簡単に変更できるので、自分のブログに合った読みやすい横幅に変更してみてください。

カスタマイズ記事：STINGER PLUSでアドセンスを横並び(ダブルレクタングル)にする方法

最後まで読んでいただきありがとうございました。
良かったらシェアしていただけると嬉しいです。