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

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

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

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

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

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

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

ページ全体の幅:「980px」

記事部分:「660px」

サイドバー:「300px」

になっているんですね。

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

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

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

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

を追加してください。

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

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

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

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

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

「width」	横幅を直接指定するコード。いつでも指定した横幅になります。
「max-width」	横幅の最大値を決めるコード。常に指定した幅になる訳ではなく上限を決めるだけです。

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

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

ページの横幅は好みによって差が出る所。
うっかりレスポンシブを壊さないようカスタムしてくださいね。

最後まで読んでいただきありがとうございました。
Jimon(@jimon_s)でした。