# ブログカスタマイズ

【JINカスタマイズ】記事内文字の左右に余白をとるだけでスッキリとした見た目に

今回はWPテーマ『JIN』の記事内の余白に関するカスタマイズを紹介します。

ありがたいことに、ブログのデザインを褒められることが最近多くなってきたのですが、実は素人なりに色々と拘ってカスタマイズを施しています。

その中から、めちゃくちゃ地味だけど確実に見栄えが良くなるカスタマイズを公開します。

具体的に言うと、記事内文字の左右の余白を増やすというカスタマイズになります。

たったこれだけなんですが、ビフォーアフターを見比べると、確かな違いを感じられますよ。

それぞれ上の画像がPC画面、下の画像がスマホ画面です。

BEFORE
AFTER

いかがでしょうか。

ほんの少し左右の余白を増やすだけで、全体がスッキリして読みやすくなっているかと思います。見比べてみると、デフォルトの方は文字が詰まって見えますね。

あと、左右の余白を増やすことで、本文の横幅が狭くなり、視線を左右に動かす距離も短くなるので、読むストレスを軽減することができます。

CSSをコピペするだけで簡単に導入できるので、気になった人はぜひご覧ください。

カスタマイズは自己責任でお願いいたします

カスタマイズに必要なCSS

まずはCSSの追記から。

外観カスタマイズ追加CSS と進み、下記のコードを追加CSSにコピペしてください。

/***記事余白調整***/
/**PC用**/
@media (min-width: 768px) {
.cps-post-main p {
  padding-left: 1.5em;/*左余白の幅*/
  padding-right: 1.5em;/*右余白の幅*/
}
}
/**スマホ用**/
@media (max-width: 767px) {
.cps-post-main p {
  padding-left: 1.0em;/*左余白の幅*/
  padding-right: 1.0em;/*右余白の幅*/
}
}

コードは短めですね。では簡単にコードの紹介をしていきます。

padding-left: 1.●em;/*左余白の幅*/
padding-right: 1.●em;/*右余白の幅*/

このコードの数字で、左右の余白を調整しています。

僕の場合、PC・タブレットは1.5emスマホは1.0emで調整していますが、余白をより少なくしたい場合は数字を小さくし、余白をより多くしたい場合は数字を大きくしてください。

まとめ

今回は『JIN』の記事内文字の左右に余白をとるカスタマイズを紹介しました。

左右の余白をちょっと増やすだけなんですが、これだけで全体がスッキリとして見えて、読むストレスも軽減できるという2つの効果を得ることができます。

デザインっておしゃれさを目指すと同時に、見やすさも意識することが大事だなぁと改めて実感しました。

言われないと気が付かないぐらい地味なカスタマイズですが、こうした小さな工夫を積み重ねて、周りとの「」を付けていきましょう。

えふぃる
えふぃる
たぶんこのカスタマイズを公開してなかったら、誰もこの工夫に気付いてなかったと思う
この記事のURLとタイトルをコピーする