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

      2016/03/21

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

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

 

Sponsored Links

 

【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)

変更前の表示>>

160305 twentyfifteen css padding 01

 

変更後の表示>>

160305 twentyfifteen css padding 02

 

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

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

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

 

Sponsored Links

 - TwentyFifteen
 -