2019年8月19日

【簡単コピペ】改行時の広すぎる行間を変更して読みやすくする方法！フォントサイズも！【はてなブログ】

みなさん、はてなブログを使っていて、

改行した時にできる空白が広いなー

と思ったことはありませんか？

これは調べてみると、改行すると、段落を変えたことになってしまうために広い行間が開くということです。

ただ普通の改行で、段落を変えるレベルの空白が出るのは、文章が間延びして読みにくいと思うんです。

そこで、今回は改行の幅についてカスタムしてより読みやすいブログを目指していきたいと思います！

1 はてなの広い改行
2 コードを入れる場所！
- 2.1 PC
- 2.2 スマホ
3 改行の行間を普通にする！
4 改行の行間を調節！
5 行間とフォントサイズ
6 終わりに

はてなの広い改行

まず、デフォルトで改行するとどんな感じになるか見ておきたいと思います。

例として昨日の記事から一部を抜粋して利用することとします！

さらには、AppleからしてみればApple Musicを使えない端末を作り続けるメリットがなくなってしまっていることも理由の一つのようです。
そして何よりスマートフォンの普及によって音楽専用プレイヤーが売れなくなってしまっていること。
やはりスマートフォンを持ち歩くときにわざわざ音楽専用プレイヤーを持ち歩く人は減ってるのは事実です。

このすきまは、一行空けているとかではなく、普通の改行です。

めちゃめちゃ広いですよね。

はてなでは、普通の改行を行うことで、段落を変えるコードが入力してしまうためにこのような不自然に広い間隔ができてしまいます。

これはshift＋enterで改行することで問題を解決できるようなのですが、正直めんどくさいので、コードを挿入することで解決したいと思います！

コードを入れる場所！

今回はコードを追加して変更していくのですが、コードを挿入する場所について一応触れておきたいと思います。

PC

デザイン→カスタマイズ→デザインCSSにコードを貼り付けます！

スマホ

スマホメニュー→記事→記事下　にコードを貼り付けます！

改行の行間を普通にする！

最初は改行時の行間を普通の行間と同じ間隔にするというものです。

.entry-content p { margin:0}

こちらのコードをデザインCSSに入れることで、先ほどの文章が

さらには、AppleからしてみればApple Musicを使えない端末を作り続けるメリットがなくなってしまっていることも理由の一つのようです。
そして何よりスマートフォンの普及によって音楽専用プレイヤーが売れなくなってしまっていること。
やはりスマートフォンを持ち歩くときにわざわざ音楽専用プレイヤーを持ち歩く人は減ってるのは事実です。

このように、改行で不自然な空白をなくすことができます。

改行の行間を調節！

ただ、真面目な文章だったら上のようなギチギチの文章でもいいのかもしれませんが、雑記ブログという軽めのブログなので、もうちょっと空白があってもいいかなと思いますし、個人的にある程度間隔がある方が好きなわけです。

そこで改行の間隔を自分で調節できる方法をご紹介いたします。

.entry-content p {
margin: 0.5em 0;
}

こちらのコードをCSSに入れることで、先ほどの文章が

さらには、AppleからしてみればApple Musicを使えない端末を作り続けるメリットがなくなってしまっていることも理由の一つのようです。
そして何よりスマートフォンの普及によって音楽専用プレイヤーが売れなくなってしまっていること。
やはりスマートフォンを持ち歩くときにわざわざ音楽専用プレイヤーを持ち歩く人は減ってるのは事実です。

このように普通の改行で若干間隔ができるようになりました！

emという単位は、フォントサイズに対して何倍かという設定なので、emの前の数値を調節することでお好みの間隔を設定することができます！

僕はちょっと広目が好みだったので、とりあえず0.5にしてみました。