【Twenty Fifteen CSS編集メモ】メインコンテンツの左右の余白を狭くする

2016/03/21

TwentyFifteenはとてもシンプルなデザインで、当ブログに採用しているテーマです。

ただ、左右の余白が大きすぎて、iPhoneで表示した時に余白部分が勿体無いので、余白を狭くすることにしました。

【Twenty Fifteen】スマートフォン表示の際の左右余白を狭くする

style.cssを編集します。

編集する箇所は2箇所のみです。

【12.1 Posts and pages】という項目内（コメントアウトしてる部分が変更前）＞＞

.entry-header {
	/*padding: 0 7.6923%; 編集 左右の余白を狭く（エントリータイトル部分）*/
	padding: 0 2%;
}

/*中略*/

.entry-content,
.entry-summary {
	/*padding: 0 7.6923% 7.6923%; 編集 左右の余白を狭く（エントリー本文部分）*/
	padding: 0 1% 3%;
}

PCやタブレット表示の場合は、別の項目で指定していますので、影響はありません。

今回はタイトル部分と本文の余白を狭くしてみました。

エントリー本文部分のみ余白を無くしたいという人は、下の段のみの【padding:】の値を自分好みに変更すればOKです。

変更前後の比較（iPhone6s Plus）

変更前の表示＞＞

変更後の表示＞＞

余計な余白が無くなりました。

サンプル本文という文字だけで分かりづらいかもしれませんが、余計な余白がなくなるだけで読みやすさが大分変わります。

以上。参考になれば幸いです。