ライフスタイル

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

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

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

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

デザインcssにコピペで簡単に調整できます!ダッシュボードからデザイン⇒カスタマイズ⇒デザインcssに

.entry-content p { margin:0} 

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

行間の隙間を修正する前

はてなブログの隙間を修正する前

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

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

行間の隙間を修正した後

はてなブログの隙間を修正した後

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

.entry-content p { margin:0 }

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

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

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

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

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

udemy.benesse.co.jp

さいごに

個人的には修正後の方が好みなので調整してみました。はてなブログ標準の行間が広いままが良いという方は、もちろんそのままで大丈夫です。70記事も書いておいて今更ですがcssでこんなところも調整できるのですね~まだまだ勉強不足です。

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