stinger5のメインカラムの幅を広くし文字のサイズを変更する

2014/12/22

stingerの幅は最大で660pxですが、paddingが設定されているため実質580pxしかありません。

画像を大きく見せたり、文字を大きめにしたいときなどは幅は800pxほどほしいところですね。そういうわけでcssファイルを変更して幅を広くしましょう。

stinger5はレスポンシブデザインなので幅の変更はかなり簡単で単純です。一項目変更するだけで対応できます。

style.css

テーマファイルの中にあるstyle.cssの1139行目、「#wrapper」の部分が該当箇所です。

#wrapper {
    max-width: 980px;
    padding: 0 10px;
    margin: 0 auto;
}

この980pxの部分を好みの数字に変更しましょう。今回は1200pxに変更します。

#wrapper {
    max-width: 1200px;
    padding: 0 10px;
    margin: 0 auto;
}

ヘッダー画像部分との差異を見れば一目瞭然ですね。メインカラムが相当大きくなりました。

ついでに文字を少しだけ大きくしちゃいましょう。幅が広くなったので文字を少し大きくしてバランスを取らないとスカスカした感じになってしまいます。ここはおこのみでどうぞ。

同じく「style.css」を変更します。1307行目あたり。

p {
        font-size: 14px;
        line-height: 27px;
        margin-bottom: 20px;
    }

この部分が文字サイズを制御している部分になります。

p {
        font-size: 17px;
        line-height: 1.3;
        margin-bottom: 2em;
    }

思い切って3px大きくしました。

「font-size」が文字の大きさ。「line-height」が行間。「margin-bottom」が文章下の隙間を表しています。

「px」単位は文字通りピクセルの長さを表しています。「1.3」という指定方法は、1.3倍といった意味ですね。便利です。

「em」は文字サイズから相対的に見た長さです。この場合「1em」は「17px」になります。文字サイズに合わせて自動で合わせてくれるので覚えておきましょう。これまた便利ですよ。

そんなわけでメインカラム幅と文字サイズの変更ができました。これで画像も大きく表示できますし、文字も見やすくなりましたね。

「style.css」の120行目にも

p {
    font-size: 17px;
    line-height: 27px;
    margin-bottom: 20px;
}

と同じ記述があります。こちらをいじっても下の方で上書きされるのでPCでは意味のない事になります。画面幅によって適応されるパラメータが変わるので、どう変わるのかを観察しながら変更するといいかと思います。私はとりあえず両方共同じ内容にしています。

- 未分類