はてなブログで改行すると隙間が広すぎるので調整して読みやすくしよう

はてなブログの「見たまま編集」で記事を書いて、自分で読んだ時に違和感を感じていました。

執筆中に改行をすると、記事表示では意図しない隙間ができて「行間が広くなりすぎる」のです。

初歩的ですが…今回は、はてなブログの行間の隙間をCSSで調整し読みやすくする方法をご紹介します。

隙間（行間）の調整方法はデザインCSSにコピペでOK

行間の隙間は、デザインCSSにコピペで簡単に調整できます。

ダッシュボードのデザイン⇒カスタマイズ⇒デザインCSS

.entry-content p { margin:0} 

これをコピペするだけ行間が調整できます。

行間の隙間を修正する前

スマホ画面をスクショしました。

改行しただけで一行分くらいの隙間がありますね。何もしないと行間に意図しない隙間が発生します。

テーマにより隙間の広さは異なります。

行間の隙間を修正した後

CSSにコピペするだけで調整できました。

改行しても大きな隙間がなく自然な感じになったと思います。「もっと狭くしたいな」や「狭すぎるな」と思われた方は微調整ができますよ。

.entry-content p { margin:0 }

０.1単位で数字を増やしたり、マイナスにしたり調整してみてくださいね。

line-heightでも行間を調整できる

１行の大きさを調整しましょう。

.entry-content {
font-size:18px;
line-height:1.0;
}

font-sizeが文字の大きさで、line-heightが行の大きさです。

line-heightを１にすると文字の大きさがそのまま１行の大きさになります。参考にさせていただいたサイト。

>>CSS Line-heightの書き方3つを初心者向けに図で解説

さいごに

個人的には修正後の方が好みなので調整してみました。

はてなブログ標準の行間が広いままが良いという方は、もちろんそのままで大丈夫です。

70記事も書いておいて今更ですが、CSSでこんなところも調整できるのですね。まだまだ勉強不足です。

改行で意図しない隙間ができてお困りの方は、コピペで調整してみてください。