re_MS251_enshinbun

ブログの文章を見やすくするためにpタグ(段落)のCSSをカスタマイズしました。基本的に3つのプロパティを変更すれば見やすくなると思います。

スポンサードリンク

line-height – 行間を変更する

line-heightは行間を変更するプロパティです。値にはpxやem、パーセントなどが使えます。

祗園精舎の鐘の声、諸行無常の響きあり。
娑羅双樹の花の色、盛者必衰の理をあらはす。

line-height: 1.0;

祗園精舎の鐘の声、諸行無常の響きあり。
娑羅双樹の花の色、盛者必衰の理をあらはす。

line-height: 1.8;

letter-spacing – 文字の間隔を変更する

letter-spacingは文字の間隔を変更するプロパティです。値にはemなどの単位が使えます。

驕れる者久しからず、ただ春の夜の夢の如し。
猛き人もつひには滅びぬ、ひとへに風の前の塵に同じ。

letter-spacing: 0.1em;

驕れる者久しからず、ただ春の夜の夢の如し。
猛き人もつひには滅びぬ、ひとへに風の前の塵に同じ。

letter-spacing: 0.5em;

margin – 段落の間隔を変更する

marginは余白を設定するプロパティです。値にはpxやパーセントが使えます。上下のmarginの値を変えると、間隔を変更することができます。

祗園精舎の鐘の声、諸行無常の響きあり。娑羅双樹の花の色、盛者必衰の理をあらはす。

驕れる者久しからず、ただ春の夜の夢の如し。猛き人もつひには滅びぬ、ひとへに風の前の塵に同じ。

margin-top: 10px; margin-bottom: 10px;

祗園精舎の鐘の声、諸行無常の響きあり。娑羅双樹の花の色、盛者必衰の理をあらはす。

驕れる者久しからず、ただ春の夜の夢の如し。猛き人もつひには滅びぬ、ひとへに風の前の塵に同じ。

margin-top: 30px; margin-bottom: 30px;

まとめ

この3つのプロパティをpタグのCSSに適用すると、文章がこれまでより見やすくなると思います。値は結構自分の感覚で決めている部分があるので、これがベストというのはないので、Chromeのディベロッパーツールなどを使いながら色々と試してみてください。

[css]
.post p {
font-size: 16px;
line-height: 1.8;
margin-top: 30px;
color: #222;
margin-bottom: 30px;
letter-spacing: 0.04em;
}
[/css]

ちなみに当ブログでは上記のように設定しています。参考までにどうぞ。

この記事をシェアする

この記事と同じカテゴリーの記事

この記事を書いた人

naremo [ナレモ]はWebサービスやアプリ、カメラ、プログラミングについて紹介するブログです。