Blogger 記事の行間をスタイルシートで調節する（line-height）

公開日： 2016年4月25日月曜日 Blogger CSS

こんにちは、Waringo88です。

Bloggerで文章と文章の高さ（行間）が詰まって読みづらいと感じていたので、CSS（スタイルシート）の「line-height」を使って調節してみました。

どこに記述すれば良いのか分かりにくかったので、やり方をメモしておきます。

行間をCSS「line-height」で調節する

マーカー部分（line-height）の値を変更する
.post-body {
font-size: 110%;
line-height: 1.4;
position: relative;
}

「line-height」は、行の高さを指定する時に使います。「line-height: 1.4;」とは、行の高さが「文字サイズの1.4倍」という意味です。

つまり、文字そのものを「1」として、上下それぞれに「0.2」ずつ空間が割り振られるので、合わせて0.4文字分の行間が空くことになります。

行間をどの程度空けるのか、「テンプレートをプレビュー」で表示画面を確かめながら、読みやすい値を探ってみると良いと思います。

「.post-body {}」で指定した「line-height」の値は、Blogger内の投稿記事の本文全体に適用されます。

「em」や「％」など単位をつけて値を指定することもできますが、高さが文字の大きさ（フォントサイズ）より小さな値の場合は、大きな文字が上下の行に重なってしまうため、単位をつけない方が無難なようです。

参考）
"レイアウト データ タグ", Blogger ヘルプ, https://support.google.com/blogger/answer/47270?hl=ja, (参照 2016 -4-24)