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

2015/01/29[公開]

 テーマ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%;
	}
}

 スマホ・タブレットで上右左の余白7.6923%→2.000%へ

PCサイトで上右左の余白8.333%→3.000%へ

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

 余白の%をお好きなように変えて頂く場合は、最後の3行のPCサイトでの.site-footerの数値だけは調整が必要です。サイドバーの間隔も含めて左余白を指定して、フッターの内幅を%で指定して右の余白を作っているので、計算が得意な方はキッチリ数値を出してください。

 上記の例は、厳密に言うと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;
        }
}

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

スポンサー リンク

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です