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

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

前回バズ部 テーマ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;
}
パディングなし

パディングなし

パディングあり

パディングあり

もしお役に立てたり、クスッとして頂いたりご共感頂けた際にはポチっとして頂けますと記事への情熱になったりしなかったり。。。

  • にほんブログ村 子育てブログへ
  • にほんブログ村 IT技術ブログ WordPressへ
  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

コメントを残す

*