行間、段落の幅で一気に見やすくなる！？カスタマイズするCSSを紹介！

この記事は 約2 分で読めます。

文字が詰まっていたりすると、
ユーザーにとって見づらいコンテンツとなり得ます。

せんちゃん

Shift+Enterで改行しまくればいいの？

のように考えて改行ばかりしていませんか？
改行の回数がバラバラになったりすると
統一性がなくきれいなサイトが作りにくいのでお勧めしません。

そこで今回は、行間や段落の幅の調整をするCSSを紹介します。

行間のカスタマイズ

下記はエディタ上で、Shift+Enterの改行をした状態。

行間はこんな
文章です。

.entry-contentクラスは投稿ページと固定ページの
本文に適用されています。

line-heightで行間の指定を行えます。
1.75はCocoonのデフォルトなので
目安として変更してみてください。

.entry-content p {
    line-height: 1.75;
}

続いて、段落のCSSを紹介します。

下記は、エディタ上でEnterのみを入力した場合。

段落はこんな

文章です。

marginが段落の周りの余白(間隔)の設定です。
2emは2文字分という意味なので、
下記コードでは、上下に2文字分余白とつくることができます。

.entry-content p {
    margin: 2em 0 2em 0;//上右下左の順で設定
}