【JIN】背景画像があるときは本文余白を調整しよう

前回はJINのヘッダーをカスタマイズしました。

今回は、スマホで見たときに背景画像や背景色と本文がくっつきすぎているのを解消して少し見た目を良くするカスタマイズです!

背景画像を設定するとくっついてしまう

こちらのスクリーンショットを見てください。

両脇の灰色の背景部分と隙間なくぴったりくっついているのがわかるでしょうか?

実はこの現象はスマホ版のみで、PC版ではちゃんと余白が30pxあります。

上の画像で灰色の隣に緑色に選択されている部分がありますよね。ここが余白です。

PC版では背景画像と本文との間に30pxの余白がありますが、スマホ版では0pxなのです。

背景画像や背景色を設定しなければ、元から背景部分が余白のように見えるので今回の設定は不要です。

調整後はこんな感じ

追加CSS

コピペで「カスタマイズ>追加CSS」につっこんでください。

解説した図↓

デフォルト設定では背景部分が両端に15pxずつあったのを半分ほどに。そして余った残りの半分を使って、本文にあたる<p>に余白を付けました。

見出しにも余白をつけてみましたが、見出しより少し引っ込んでいる方が読みやすいなと感じたので<p>だけにしています。

さいごに

私はopencageさんの「アルバトロス」が好きで、そこからWordPress有料テーマの沼にはまりました(笑)

アルバトロスでは絶妙なグレーの格子柄の背景画像が使われていて、自然に上品なんです!そこから白背景ではなく自然に上品な背景画像に憧れるようになりました。

今回は背景にちょっと砂っぽいテクスチャの灰色の画像を使っています。

次はおしゃれ感出る背景画像にチャレンジしてみたいです(笑)ではでは~