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

はてなブログの「見たまま編集」で記事を書いてから、自分で確認した時にずっと違和感がありました。改行すると意図しない隙間ができて「行間が広すぎる」のです。

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

Contents

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

デザインCSSにコピペで簡単に調整できます。

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

.entry-content p { margin:0}

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

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

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

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

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

.entry-content p { margin:0 }

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

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

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

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

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

個人的には修正後の方が好みなので調整してみました。はてなブログ標準の行間が広いままが良いという方は、もちろんそのままで大丈夫です。

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

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