TwentyTwelveの横幅とフォントをカスタマイズする

WordPress のテーマ TwentyTwelve の横幅とフォントをカスタマイズしていきます。

TwentyTwelve の標準は、コンテンツ領域 (header, body 等の部分)が 960px となっています。

その他に左右に余白として 40px づつ設定されているので最大横幅は 1040px となります。

割付的には下記のような感じになります。

TwentyTwelveの割付イメージ図

もう少しウィジェット領域が欲しいと思うのでこれを下記のように変更します。

• コンテンツ領域 = 700px
• ウィジェット領域 = 300px
• 中間余白 = 50px

合計で 1050px (700px + 300px + 50px) となり左右 40px の余白を足すと 1130px が最大幅となります。

% で指定すると下記のようになります。

• コンテンツ領域 = 1050px × 66.67% = 700.035px
• ウィジェット領域 = 1050px × 28.58% = 300.09px

今回は表示領域が大きくなる分フォントも合わせて調整しました。

スポンサーリンク

TwentyTwelveの横幅を調整

スタイルシートの下記 3 つのクラスを編集します。

※ 行番号はデフォルトのスタイルシートに合わせて記述。

■ 最大横幅

.site {
    margin: 0 auto;
    max-width: 960px;
    max-width: 68.571428571rem;
    overflow: hidden;
}

■ コンテンツ領域の横幅

.site-content {
    float: left;
    width: 65.104166667%;
}

■ ウィジェット領域の横幅

.widget-area {
    float: right;
    width: 26.041666667%;
}

これをこうします。

.site {
    margin: 0 auto;
    max-width: 1050px;
    max-width: 75rem;
    overflow: hidden;
}

.site-content {
    float: left;
    width: 66.67%;
}

.widget-area {
    float: right;
    width: 28.58%;
}

※ 2013/06/24 記載内容に誤りがあったので修正しました。(1433, 1434, 1439, 1448 行目)

以上で横幅のカスタマイズは完了です。

TwentyTwelveのフォント調整

最初にフォントの追加とコンテンツ領域のフォントサイズを調整していきます。

スタイルシートの 484 – 493 行目を修正します。

body {
    font-size: 14px;
    font-size: 1rem;
    font-family: Helvetica, Arial, sans-serif;
    text-rendering: optimizeLegibility;
    color: #444;
}
body.custom-font-enabled {
    font-family: "Open Sans", Helvetica, Arial, sans-serif;
}

これをこんな感じにします。

body {
    font-size: 15px;
    font-size: 1.071428571428571rem;
    font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif;
    text-rendering: optimizeLegibility;
    color: #444;
}
body.custom-font-enabled {
    font-family: "メイリオ", Meiryo, "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", "Lucida Grande", "Lucida Sans Unicode", Arial, Verdana, sans-serif;
}

次にウィジェット領域のフォントサイズを調整します。

584 – 590 行目を編集します。

.main-navigation li {
    margin-top: 24px;
    margin-top: 1.714285714rem;
    font-size: 12px;
    font-size: 0.857142857rem;
    line-height: 1.42857143;
}

ウィジェット領域はこんな感じにしました。

.main-navigation li {
    margin-top: 24px;
    margin-top: 1.714285714rem;
    font-size: 14px;
    font-size: 1rem;
    line-height: 1.42857143;
}

以上でフォントの調整は完了です。

下記のようになりました。

before

after

TwentyTwelve の横幅とフォントカスタマイズは以上です。