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

WordPress Twenty Twelveのページ上部のグレー部分を削除」への2件のフィードバック

  1. あにまるQ

    グレー部分消えました、ありがとうございます。
    Twenty Twelveをお洒落に使いたいので、他記事も参考にさせて頂きます!!

    1. web_shufu 投稿作成者

      お役に立てたみたいで嬉しいです。今後ともよろしくお願いいたします。

コメントは停止中です。