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

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

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

Contents

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

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

.entry-content p { margin:0}

これをコピペするだけです。

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

改行しただけでこれくらい隙間があいてしまいます。だいたい一行分くらいの隙間がありますね。意図しない隙間が発生します。

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

.entry-content p { margin:0 }

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

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

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

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

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

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