エルパの盤上この一手

勢いに任せたなんでもブログ

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

どうもこんにちはエルパです。

 

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

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

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

 

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

 

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

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

f:id:elppapr:20170729155656p:plain

 

 

 はてなの広い改行

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

 

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

さらには、AppleからしてみればApple Musicを使えない端末を作り続けるメリットがなくなってしまっていることも理由の一つのようです。

 そして何よりスマートフォンの普及によって音楽専用プレイヤーが売れなくなってしまっていること。

やはりスマートフォンを持ち歩くときにわざわざ音楽専用プレイヤーを持ち歩く人は減ってるのは事実です。

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

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

 

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

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

 

コードを入れる場所!

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

 

PC

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

f:id:elppapr:20170729143627p:plain

 

スマホ

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

f:id:elppapr:20170729144119p:plain

 

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

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

.entry-content p { margin:0}

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

さらには、AppleからしてみればApple Musicを使えない端末を作り続けるメリットがなくなってしまっていることも理由の一つのようです。

そして何よりスマートフォンの普及によって音楽専用プレイヤーが売れなくなってしまっていること。

やはりスマートフォンを持ち歩くときにわざわざ音楽専用プレイヤーを持ち歩く人は減ってるのは事実です。

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

 

改行の行間を調節!

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

 

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

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

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

さらには、AppleからしてみればApple Musicを使えない端末を作り続けるメリットがなくなってしまっていることも理由の一つのようです。

そして何よりスマートフォンの普及によって音楽専用プレイヤーが売れなくなってしまっていること。

やはりスマートフォンを持ち歩くときにわざわざ音楽専用プレイヤーを持ち歩く人は減ってるのは事実です。

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

 

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

 

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

 

行間とフォントサイズ

同じように行間とフォントサイズも変更することができます。

.entry-content {
line-height : 1.7em ;

font-size:17px;

 line-heightというのが行間をfont-sizeが文字のサイズをそれぞれ表しています。

こちらも、後ろの数値をいじることで自分の好みのサイズに変更することができます。

 

行間を調節することで、適度な間隔ができて見やすくすることができます!

ちなみに、上の例文は行間のサイズを上記の設定にしています。

よろしければ参考にしてみてください。

 

ちなみに、今回僕はデフォルトのフォントサイズで特に不満はなかったのでフォントサイズは変更しませんでしたが、テーマによって変更したい方もいるかと思いますので、合わせて紹介しておきます!

 

終わりに

ということで、はてなブログの広い改行間隔をカスタマイズする方法でした!

行間が気になっているという方も多いと思いますので、手軽に簡単にできるので、ぜひお試しください!

コードを貼り付けると過去記事を含めて全てが修正されます!これまたお手軽ですね!

 

ちなみに僕のブログについても、もうちょっと広い方がいいよ、とかご指摘ありましたら是非ご指導くださいませ!

 

以上!