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

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

:2014/8/23 STINGER Wordpress

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

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

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

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

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

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

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

デフォルトの幅はこんな感じ。main部分は幅指定なし

  • ページ全体の幅:「980px」
  • 記事部分:「660px」
  • サイドバー:「300px」
  • になっているんですね。

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

    カスタマイズ概要

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

    間接的にmainを広げる

    カスタマイズ手順

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

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

    を追加してください。

    style.cssの4つの領域

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

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

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

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

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

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

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

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

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

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

    うまくいけばこうなります

    あとがき

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

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

    jimon


    -STINGER, Wordpress
    -,

    CATEGORY
    この記事のカテゴリ
    STINGERの親カテゴリ
    ブログ内の他のカテゴリ
    更新チェックはこちらから!