WordPress Twenty Twelveのページ上部のグレー部分を削除

ページ上部のグレー部分を削除 Wordpress Twenty Twelve カスタマイズTwenty Twelveでは、PC閲覧時にページの上部にグレー部分が出現します。ウェブシュフとしては真っ白のほうが好みなので、このグレーの部分を削除しました。

PC閲覧時のみ出現

ページ上部のグレー部分は、かなり幅の広いデバイスで閲覧したときのみ出現します。実際にブラウザの横幅を色々変えながら閲覧して確かめてみてください。

デバイスの幅で変わるスタイルは、メディアクエリで指定されているはずなので、style.cssの@media screen and (min-width: 960px)以下の部分に注目します。

/* 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);
    }

このうちの

margin-top: 48px;
margin-top: 3.428571429rem;

margin-top:0;/*** 48px;
margin-top: 3.428571429rem;***/

に書き換えればページ上部の余白はキレイになくなります。(デフォルトのスタイルをコメントアウトで残しています。)
余白一掃

なお、Twenty Twelveに限らず、既存のテーマをカスタマイズするときは、子テーマを作ったほうが効率的ですので、子テーマに縁遠いひともこの機会に是非作成しましょう。


投稿日

カテゴリー:

投稿者:

 最終更新日:

タグ: