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」 | 横幅を直接指定するコード。いつでも指定した横幅になります。 |
| 「max-width」 | 横幅の最大値を決めるコード。常に指定した幅になる訳ではなく上限を決めるだけです。 |
まちがえて「width」で指定すると常に同じ幅になってしまい、これもレスポンシブが崩れます。
この2点に気をつけてコードを変更すればこんな風に幅を広げられますよ。
あとがき
うっかりレスポンシブを壊さないようカスタムしてくださいね。
最後まで読んでいただきありがとうございました。
Jimon(@jimon_s)でした。
