【TwentyFifteen】メインコンテンツの上左右の余白を小さくする

　テーマtwenty fifteenを気に入って使っています。デフォルト設定では、ちょっと投稿記事の余白が大き過ぎる気もするのでカスタマイズしてみた記録です。

デフォルトのスタイル指定

　まずは、twentyfifteenの親テーマフォルダのstyle.cssを確認しました。レスポンシブテーマなので、余白の指定は15.0 – Media Queriesのあたりを調べます。画面幅が小さいところから余白指定無しから始まり、画面幅620pxから余白7.6923%と％で指定されています。サイドバーが出てくる955px以上になると余白8.3333%になっています。

　content.phpや、この%の数値などをヒントに探していく事が私のような素人には大変な作業です。

子テーマのstyle.cssに追記

　子テーマのstyle.cssに、親テーマの記述を打ち消すようになるよう変更箇所だけ追記します。

/*　コンテンツの余白を小さく　*/

@media screen and (min-width: 38.75em) {

	.site-main {
		padding: 2.0000% 0 7.6923%;
	}

	.hentry,
	.page-header,
	.site-footer,
	.page-content { 
		margin: 0 2.0000%;
	}

	.pagination,
	.comments-area,
	.post-navigation {
		margin: 7.6923% 2.0000% 0;
	}
}

@media screen and (min-width: 59.6875em) {

	.site-main {
		padding: 3.0000% 0 8.3333%;
	}

	.hentry,
	.page-header,
	.page-content{ 
		margin: 0 3.0000%;
	}

	.pagination,
	.comments-area,
	.post-navigation {
		margin: 8.3333% 3.0000% 0;
	}

	.site-footer {
		margin: 0 0 0 31.9118%;
		width: 66.0882%;
	}
}

　このように変更してみました。なぜ2%と3%なのかという理由はありません、なんとなくで選んだ数値です。見やすいように小数点以下4桁まであえて記述しています。記事部分とコメント部分などの間の上下間隔の余白は変更していません。

　上記の例は、厳密に言うとPCサイトだけ、フッター部分の余白が微妙に揃っていません。素人の作業ということで、お許しを(;^_^A

もう一つ

　私の場合、前の記事で変更した箇所も余白指定が必要でした。【Twenty Fifteenカスタマイズ】レスポンシブにサイドバーのウィジェットを常時表示させる

　この記事で子テーマに追記していた箇所の左右余白も変更が必要でした。

@media screen and (min-width: 38.75em) {
        .secondary-footer {
                margin: 7.6923% 7.6923%% 0;
                padding: 7.6923% 7.6923% 0;
        }
}

 　3行目の左右の余白を今回の変更に合わせます。

@media screen and (min-width: 38.75em) {
        .secondary-footer {
                margin: 7.6923% 2.0000% 0;
                padding: 7.6923% 7.6923% 0;
        }
}

 　これで余白が揃いました。