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

公開日: : 最終更新日:2014/08/24 Stinger, Wordpress ,

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

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

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

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

Sponsored Link

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

まずはデフォルトの状態がどうなっているのか見てみましょう。
今回変えていくのは「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


     これは!と思ったらシェアして頂けると嬉しいです
    • このエントリーをはてなブックマークに追加
    • Pocket
    • 111 follow us in feedly
    Loading Facebook Comments ...

    Comment

    Message

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

    PROFILE

    Jimon Profile
    Jimon
    東海地方の大学院生。おしゃれなグッズやiPhone,Macの情報など、人に教えたくなる「これは!」というモノを発信していきます。
    お問い合わせ

    About


    おしゃれな小物とiPhone,Macの情報発信ブログ。
    管理人『Jimon』(@jimon_s)がこれは!と思ったアイディア、ニュース、活用術を発信していきます

    PAGE TOP ↑