はてなブログの「見たまま編集」で記事を書いて、自分で読んだ時に違和感を感じていました。
執筆中に改行をすると、記事表示では意図しない隙間ができて「行間が広くなりすぎる」のです。
初歩的ですが…今回は、はてなブログの行間の隙間を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でこんなところも調整できるのですね。まだまだ勉強不足です。
改行で意図しない隙間ができてお困りの方は、コピペで調整してみてください。
