Stinger5カスタマイズ！記事部分の幅を自由に変える方法。うっかりするとレスポンシブが崩れるよ！

Stinger5をパソコンから見た場合、記事部分の横幅は660px、本文は580pxになっています。
一般的なブログと比べると少し狭めの設定ですね。
これはこれでとても見やすいんですが、もう少し大きくしたいなという方もいるのでは？

特にダブルレクタングルの広告配置を考えている場合には、最低でも本文を600px以上にする必要が出てきます。

今回は記事部分の横幅を自由に変更する方法をご紹介します。
記事部分の「main」でなくて「#wrapping」を変えるのがポイントですよ！

デフォルトはこうなってるよ！

まずはデフォルトの状態がどうなっているのか見てみましょう。
今回変えていくのは「PC版で最大限表示できているとき」です。

幅が決められてるのは「#wrapping」

デフォルトの幅はこんな感じになっています。

になっているんですね。

このうちcssで指定されているのは「#wrapping」と「aside」のみ。記事部分の「main」は余りの部分なんですね。
コレが今回のポイントです。

カスタマイズ概要

変えるのは「#wrapping」のみ。
サイドバー部分が300pxで固定されているので、全体の幅を広くすれば記事部分の幅も広くなる、というわけです。

カスタマイズ手順

変え方はカンタン！「style.css」の「領域①」の部分に

#wrapper {
	max-width: (記事部分にしたい幅+300)px;
}

を追加してください。

コレだけで今回のカスタマイズは完了です。
ただし2つ注意点があるので気をつけてください。まちがえるとレスポンシブデザインでなくなりますよ。

注意点その1 「style.css」の記述場所

ひとつ目はコードの記述場所。必ず領域①に書いてくださいね。

こちらの記事に書いたようにStinger5のstyle.cssはデバイスごとに4つの領域に分かれています。うっかりタブレット用のサイズにコードを足してしまうとレスポンシブデザインが崩れます。
気をつけてくださいね。

注意点その2 「width」じゃなくて「max-width」

ふたつ目は幅を指定するコードの種類。
「width」でなく「max-width」を使いましょう。

この2つの違いは以下のとおり。

まちがえて「width」で指定すると常に同じ幅になってしまい、これもレスポンシブが崩れます。

この2点に気をつけてコードを変更すればこんな風に幅を広げられますよ。

あとがき

@Jimon_sさんをフォロー