行間を修正する

このブログはMinimalismというテーマを使っています。 シンプルですっきりしていて、スマホやタブレットにも対応しているレスポンシブデザイン。 とても気に入って使わせて頂いているのですが、一つだけ気になることが。

恐らくMinimalismだからではないと思いますが、記事内の行間が広すぎるというか。 今までは、パラグラフ（段落）を変える時はenterキーを、改行はshift＋enterを使ってましたが、ちょっと面倒です。

「はてなブログ 行間」等で検索すると、はてなブログの行間が広すぎるという記事が出てきます。 やっぱりみんな気になっていたんですね。

ということで、行間のスペースを少し狭くすることにしました。

pタグで調節する 

はてなブログは、記事を書く時、書き始めから改行までをpタグで囲むようになっています（記事を書いてから、HTML編集画面で見るとわかると思います）。 pタグとはParagraph（パラグラフ）のことで、一つの段落としてみているということです。 

enterキーを押すと新たな段落を始めることになり、広めの行間があくことになります。

文章が記事幅の端までいっていない時にenterキーを押すと、新しい段落でもないのに広い行間が出来上がってしまうというわけです。 こういう場合はshift+enterを使って改行すれば広めの行間を作ることなく改行できますが、面倒です。

このpタグを調節する方法がこちら（↓）のサイトで紹介されています。

簡単に説明すると、

ダッシュボード → デザイン → スパナマーク → デザインcssと進み、デザインcssに以下のコードを入力します。

.entry-content p { margin:0}

このコードを入力後、確かに行間は狭くなりました。 ただ、当ブログの場合、「enterキーを押して新しい段落を始める」という方法をとっていた為、以前の記事を見ると、段落と段落の境目が文章の行間と同じ広さになってしまい、どこからどこまでが一つの段落なのかわからなくなってしまいました。

line-heightで調節する

もともと、行間を指定する時に使うline-heightを使うことにしました。 このサイト（↓）には上記のpタグを使う方法の他、line-heightやfont-sizeを使って行間やフォントサイズを調節する方法が説明されています。

わたしもこのサイトにあった

.entry-content {
line-height : 1.7em ;
font-size:17px;
}

というコードを上記同様デザインcssに書き込みました。

すると、文字も小さすぎず、行間の幅も広すぎず、段落間もしっかりわかるようになりました。 もっと早くやればよかった。