やりたいこと、できていますか?

読者です 読者をやめる 読者になる 読者になる

やりたいこと、できてる?

努力、忍耐、継続、自己否定の苦しい世界から、ゆるっと楽しく生きる毎日へ。頑張り屋さんを卒業して、あなたの心に従って生きる方法を一緒に探すブログです。

はてなブログの行間・改行が広い!理想的な行間とは??

パソコンのあれこれ

スポンサーリンク

こんにちは!
自分の「やりたい!」を究めるブロガー、おやすみ星人です。

最近ずっとカスタマイズにはまっていました。
その時に気になったのが文の間隔

はてなブログの本文の行間、正直広くないですか?
改行するとやたら隙間が空きませんか?

行間はブログの読みやすさを左右する大切な要素。
理想的な行間は0.5~1.0字と言われています。

f:id:oyasumin-seijin:20161128115221j:plain
そこで今回は行間と改行の隙間を調整する方法をご紹介しますね!

そもそも行間、段落間隔とは?

ここで一度言葉の整理をしたいと思います。
行間とは文と文のすき間、段落のすき間とは文章のかたまりである段落と段落のすき間のことです。

今回私が広いと言っているのは、この行間と段落のすき間の2つです。

f:id:oyasumin-seijin:20161128143911j:plain

改行には2種類ある!

はてなブログで文章を書く時、2通りの改行の仕方があります。

Enterキーのみ:改行の幅が広くなる
Enter+Shift  :改行の幅が狭くなる

どうしてこういうことが起こるかというと...

Enterキーのみを押すと、
「この文章で段落が終わりなんだね!じゃあ新しい段落を作るよ!」と認識されます。
要は段落をどんどん作ってしまい、それを区別するためにひろーい段落のすき間ができてしまいます。

一方Enter+Shiftの場合、
「この文章はここで終わりなだけなんだね。普通に改行するよ!」と認識されます。
こちらは一般的な改行のため、いつも通りの行間ができます。

Enterキーでいつもの改行を!

とはいえEnterキーでいつも通りの改行ができないのは不便ですよね。
改行する度にShiftキーも一緒に押すのは結構めんどくさい...

そこでEnterキーで改行できるカスタマイズをご紹介します!
今回はすだちダイバータウンさんの記事を参考にしました。

すだちダイバータウンさんは、段落の間隔をなくすコードを設定しています。
コードの貼り付け場所は次の通り。

PC版は 『 デザイン>カスタマイズ(工具ボタン)>CSS』です。

.entry-content p {margin: 0px}

スマホ版は  『デザイン>スマートフォン>記事上』

<style>
.entry-content p {margin: 0px}
</style>

こちらの方法はとてもシンプルで分かりやすいですね!
Enterキーを押すだけですき間なく改行されます。

改行を使い分ける!Shift一つで2通りの改行を。

私もはじめは上の方法で改行をしていました
けれどもデザインの勉強をするうちに、
読みやすいブログにするためには、行間や段落のすき間をしっかり設定する必要があることを知りました。

すだちダイバータウンさんの方法はシンプルで魅力的でしたが、段落を空けるためにEnterキーを二度押すと、1文字分以上空いてしまって広くなりすぎるんです。

なので段落のすき間と行間の設定を個別に行うことにしました。

●段落のすき間を狭くする

さきほど書いたように、Enterキーで改行をすると段落のすき間ができます。
この段落のすき間はデフォルトだと広いので、1文字未満になるように設定しました。

PC版は 『 デザイン>カスタマイズ(工具ボタン)>CSS』に貼りつけます。

.entry-content p {margin: 17px}

スマホ版はそのままでいいと感じたのでそのままにしましたが、もしデザインを変更するなら  『デザイン>スマートフォン>記事上』に貼りつけてください。

<style>
.entry-content p {margin: 17px}
</style>

赤字のところはブログに合わせて調整してください。

ちなみにCSSの設定をした結果がこちらです。
段落のすき間がデフォルトより狭くなりました。

f:id:oyasumin-seijin:20161128142748j:plain

●行間も狭くしよう

先程の設定では段落ごとのすき間を狭くしただけで、行間は一切変わっていません。

はてなブログでは行間も広めに作られています。
理想的な行間は0.5~1.0字とされています。

そこで私は行間を設定するコードをCSSに貼りました。
このコードは短くてシンプルなので個人的に好きです。

PC版は 『 デザイン>カスタマイズ(工具ボタン)>CSS』に貼りつけてください。

.entry-content {line-height: 1.6}

スマホ版は  『デザイン>スマートフォン>記事上』ですね。

<style>
.entry-content {line-height: 1.6}
</style>

このように設定するとShift+Enterキーで改行するだけで、バランスの良い行間ができます。

まとめ

●文章の行間にこだわりがない方

→簡単に設定できる「3.Enterキーでいつもの改行を!」がおすすめです。
この設定をすると、Enterキーだけで余分なすき間のない改行ができます。

●読みやすい文章にこだわりたい方

→目次の「4.改行を使い分ける」の通りに設定すると、理想的な行間と段落のすき間を作ることができます。
さらに文と文のすき間をShiftキー1つで簡単に使い分けられます!

Shift+Enterで普通の改行(狭いすき間)、
Enterのみで新しい段落(広いすき間)ができる

 

最後に

行間に限らず、見やすいブログを作るにはいろんなことを気にする必要があります。
は何色を使うべきか?
・本文、見出しのフォントは何がいい?
・キレイな画像を作る方法は?

せっかくHTMLやCSSの知識を身に付けても、デザインの知識がなければカスタマイズに生かしきれなくなってしまいます。

こちらの本にはデザインの仕方が論理的に書かれているので、ブロガーさんにおすすめしたい一冊です▽


関連記事▽
センスがなくてもOK!ブログを論理的にデザインする方法 
アドセンスを非表示に!横並びにも対応させる方法 

おやすみ星人ってどんな人?▽
初めまして&ブログを始めた理由
26歳女が無職になった理由「何もない自分を信じたかった」
私が「やりたいこと」を忘れた理由