WordPressのテーマTwentyTwelveは、レスポンシブ・デザインで、ブラウザ・サイズに応じてレイアウトが変わります。非常に便利ですが、サイトの目的や好みによっては、カスタマイズが必要になる場合も出てくるでしょう。今回は、自動設定されている上部余白をカスタマイズしていきたいと思います。
TwentyTwelveでは、ブラウザの幅が、960pixels以上か以下で分岐されています。
幅960pixelsの場合は、上部にグレーの余白が自動で追加されます。この余白の自動追加処理をなくすカスタマイズを行いましょう。それにはstyle.cssの1601行目付近を編集します。
1601 1602 1603 1604 1605 1606 1607 1608 1609 1610 |
/* 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-topを0px,0remにすれば、余白の自動追加が無効になります。
1601 1602 1603 1604 1605 1606 1607 1608 1609 1610 |
/* 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: 0px; margin-top: 0rem; |
以上でカスタマイズは終了です。
Sponsored Link