TwentyTwelveから上下グレー枠を削除する

WordPress TwentyTwelveのカスタマイズ記事です。

カスタマイズすると決めたはいいものの、何から手をつけていいかわからないので簡単そうな部分からやっていきます。

今回は「TwentyTwelveの上下グレー枠」をカスタマイズしました。

スポンサーリンク

TwentyTwelveのグレー枠をカスタマイズ

スタイルシートの下記部分を変更します。

/* Minimum width of 960 pixels. */
@media screen and (min-width: 960px) {
        body {
                background-color: #e6e6e6;
        }
        body .site {
            padding: 0 40px;
            padding: 0 2.857142857rem;
            margin-top: 48px;
            margin-top: 3.428571429rem;
            margin-bottom: 48px;
            margin-bottom: 3.428571429rem;
            box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
        }

1595, 1597 行目を削除して、1594, 1596 行目の “48px” を “0” へ変更します。

変更後は下記のようになります。

/* Minimum width of 960 pixels. */
@media screen and (min-width: 960px) {
        body {
                background-color: #e6e6e6;
        }
        body .site {
            padding: 0 40px;
            padding: 0 2.857142857rem;
            margin-top: 0;
            margin-bottom: 0;
            box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
        }

“margin-top” と “margin-bottom” を 0 に変更するだけですので簡単です。

スタイルシートから削除した “margin-top: 3.428571429rem;” の部分に、 “rem” という何やら聞き慣れない単語が含まれているのですがこれは “px” と同じように大きさを指定する単位みたいです。

難しい事は考えず、TwentyTwelveのテーマは “14px = 1rem” と覚えておけば困らないはずです。

TwentyTwelveの表示確認

今回のカスタマイズでこんな具合になりました。

動作確認は開発環境は別立てして行っています。

TwentyTwelveの上下グレー枠カスタマイズはこれで以上です。