バズ部　テーマXeory　base　カスタマイズ　メイン画像を表示させる2

前回バズ部　テーマXeory　base　カスタマイズ　メイン画像を表示させるで画像を表示しました。
しかし、このままでは画像がきっとロゴにぴったりくっついた状態なので気持ち悪いです。
少し間隔をあけてみたいと思います。

子テーマのheader.phpで前回画像を挿入した箇所に追加します。
画像をdivで囲い、クラス名を付けます。

<div class="main_img"><img src="画像のURL" /></div>
</div>

cssでは画像がセンターになるようにして、幅を100%にしました。
そしてロゴとの間隔をあけるために上にパディングを5em入れました。
レスポンシブサイトなのでemを使っています。
どういう事かと申しますと、レスポンシブサイトではフォントサイズをpxで設定するとPCでは良くてもスマホでは大きい！なんて事になります。
そのため大抵、画面サイズでフォントサイズを切り替えたり%などで大きさを指定してるはずです。
それにならってパディングもPCとスマホでは同じ間隔では大きすぎるので文字サイズにあわせているのです。
正解はありませんが。

.main_img{
	text-align:center;
	width:100%;
	padding-top:5em;
}

パディングなし

パディングあり