以前から、ページ上部のグレー部分を削除やページの余白を削るなど余白調整関係の記事は以前にも書きました。
しかし、再調整することになったのでメモ。なお、上記2記事を踏まえたうえでないとよくわからん内容になっている可能性が高いのでご注意を。
メディアクエリ書換
まず、bodyのmin-widthを1200px相当に設定しているので、それに対応してメディアクエリを書き換えました。
具体的には、
/* 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 /***48px;
margin-top: 3.428571429rem***/;
margin-bottom: 48px;
margin-bottom: 3.428571429rem;
box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
}
body.custom-background-empty {
background-color: #fff;
}
body.custom-background-empty .site,
body.custom-background-white .site {
padding: 0;
margin-top: 0;
margin-bottom: 0;
box-shadow: none;
}
}
を
/* Minimum width of 1200 pixels. */
@media screen and (min-width: 1200px) {
body {
background-color: #e6e6e6;
margin: 0 auto;
}
body .site {
padding: 0 40px;
padding: 0 2.857142857rem;
margin:28px auto;
margin:2rem auto;
box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);
}
body.custom-background-empty {
background-color: #fff;
}
body.custom-background-empty .site,
body.custom-background-white .site {
padding: 0;
margin-top: 0;
margin-bottom: 0;
box-shadow: none;
}
}
に入れ替えました。
ヘッダー周りの余白の調整
変更前
/* Page structure */
.site {
padding: 0 /**24px**/12px;
padding: 0 /**1.714285714**/0.857142857rem;
background-color: #fff;
}
変更後
/* Page structure */
.site {
padding: 12px;
padding: 0.857142857rem;
}
サイドバー各項目タイトル下の余白調整
変更前
.widget-area .widget h3 {
margin-bottom: 24px;
margin-bottom: 1.714285714rem;
}
変更後
.widget-area .widget h3 {
margin-bottom: 7px;
margin-bottom: 0.5rem;
}
記事タイトル下の余白調整
変更前
/* =Main content
-------------------------------------------------------------- */
.entry-meta {
clear: both;
}
.entry-header {
margin-bottom: 24px;
margin-bottom: 1.714285714rem;
}
.entry-header img.wp-post-image {
margin-bottom: 24px;
margin-bottom: 1.714285714rem;
}
.entry-header .entry-title {
font-size: 20px;
font-size: 1.428571429rem;
line-height: 1.2;
font-weight: normal;
}
.entry-header .entry-title a {
text-decoration: none;
}
.entry-header .entry-format {
margin-top: 24px;
margin-top: 1.714285714rem;
font-weight: normal;
}
.entry-header .comments-link {
margin-top: 24px;
margin-top: 1.714285714rem;
font-size: 13px;
font-size: 0.928571429rem;
line-height: 1.846153846;
color: #777;
}
変更後
/* =Main content
-------------------------------------------------------------- */
.entry-meta {
clear: both;
}
.entry-header {
margin-bottom: 14px;
margin-bottom: 1rem;
}
.entry-header img.wp-post-image {
margin-bottom: 7px;
margin-bottom: 0.5rem;
}
.entry-header .entry-title {
font-size: 24.5px;
font-size: 1.75rem;
line-height: 1.2;
font-weight: normal;
}
.entry-header .entry-title a {
text-decoration: none;
}
.entry-header .entry-format {
margin-top: 7px;
margin-top: 0.5rem;
font-weight: normal;
}
.entry-header .comments-link {
margin-top: 7px;
margin-top: 0.5rem;
font-size: 13px;
font-size: 0.928571429rem;
line-height: 1.846153846;
color: #777;
}
画像の余白調整
変更前
img.alignleft {
margin: 12px 24px 12px 0;
margin: 0.857142857rem 1.714285714rem 0.857142857rem 0;
}
img.alignright {
margin: 12px 0 12px 24px;
margin: 0.857142857rem 0 0.857142857rem 1.714285714rem;
}
img.aligncenter {
margin-top: 12px;
margin-top: 0.857142857rem;
margin-bottom: 12px;
margin-bottom: 0.857142857rem;
}
変更後
img.alignleft {
margin: 3.5px 3.5px 3.5px 0;
margin: 0.25rem 0.25rem 0.25rem 0;
}
img.alignright {
margin: 3.5px 0 3.5px 3.5px;
margin: 0.25rem 0 0.25rem 0.25rem;
}
img.aligncenter {
margin-top: 3.5px;
margin-top: 0.25rem;
margin-bottom: 3.5px;
margin-bottom: 0.25rem;
}