【STINGER5】誰でも簡単！メインカラムの横幅を変える方法ーコードを少し追加するだけでできちゃうよー

“メインカラムの幅を広げたい”

STINGER5はデフォルトのメインカラム（記事部分）の幅は980pxに設定されている。全体的な作りとしてはスマートでまとまった印象を持てるが、慣れてくるとなんだか手狭な印象。

そこで、ようやく重い腰を上げて、今回はcssをいじってメインカラムの幅を広げてみたので、記録として残そうと思う。

style.cssの設定

まず、編集のページから《外観》→《テーマの編集》→《スタイルシート（style.css）》へと進み、【style.css】を開く。

スタイルシートの編集画面に切り替わったら、続いて上の方に以下のコードを記述する。なお、コピペで全く問題はない模様。

body {
	min-width: 320px;
	word-wrap: break-word;
	background-color:#f2f2f2;
}
body.mceContentBody {
	background-color:#fff;
}

/* メインカラムの幅 */
#wrapper {
	max-width: 1160px;
}

※style.cssに上のコードを記述する場所の目安は下の画像を参照。

続いて、同じく【style.css】画面の下の方に進むと、《レイアウト　スマートフォン》に関する記述がされている箇所があるため、そちらも合わせて変更する。

ここまでできたら、最後に必ず《ファイルを更新》ボタンを押して、変更部分を確定させることをお忘れなく。

恐らく新しいバージョンのSTINGER5であれば、この記述だけで自動的にメインカラムの幅が広がるようになるはずだが、どうしても広がらないか、ヘッダー部分に違和感がある（余白が発生する）といったケースが発生したら、改めて対応策を追記したい。

実際に変更した結果

上の手順で、STINGER5のメインカラムの幅を広げた結果、余白部分がかなり狭くなって、ブログ全体が大きく表示されるようになった。アイキャッチ画像や全体の構成も自動的に調整されるのと、レスポンシブ対応もしっかりと残せている。

【メインカラム幅変更前】

【メインカラム幅変更後】

【ちゃんとレスポンシブ対応】

ちなみに、いくつかのサイトでは、『#wrapper部分の幅を変更する記述を行うだけでメインカラムの変更が可能』という記事を拝見したが、僕の環境では反映されなかった。そこで、上のコードを記述すると無事にメインカラムの横幅が一気に広がってくれたので、同じように困っている人がいたらぜひ参考にしてほしい。

なお、今回のエントリを書くにあたってとても参考になったのはこちらのサイト。

【どこぞのエンジニアのブログ】

「人気のWordPressテーマ「Stinger5」で、メインカラムの横幅を変える方法」