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

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

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

こんにちは、Waringo88です。

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

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

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

  1. Bloggerダッシュボード→テンプレート→「HTMLの編集」を選択
  2. 「HTMLの編集」画面内を検索(ctrl+F)して「.post-body {}」の部分を探す
  3. マーカー部分(line-height)の値を変更する
    .post-body {
    font-size: 110%;
    line-height: 1.4;
    position: relative;
    }
  4. 「テンプレートを保存」で完了

「line-height」の考え方

「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)

スポンサーリンク
スポンサーリンク
  • ?±??G???g???[?d????u?b?N?}?[?N???A