Bloggerで行間と文字の間隔を調整する方法


Bloggerで行間や文字の間隔を調整する方法について解説します。

行間や文字の間隔はブログの重要なデザインの一つです。

これを調整して本文を読みやすくすることで、よりたくさんの記事を読んでもらうことが期待できます。

行間・文字の調整に関するCSSは、こちらの記事でわかりやすく解説しています。

>>【図解】CSSで文字のバランスを調整する方法まとめ

行間の調整

行間を調整するには、line-heightプロパティを使います。

line-heightについて、詳しくはこちらをご覧ください。

>>【図解】CSSで文字のバランスを調整する方法まとめ

line-heightプロパティの値は、フォントサイズと上下の余白を足したものになります。

line-heightプロパティの値には、『normal』、『px』、『数値のみ』、『em』、『%』などの指定方法があります。

今回は、一番おすすめの『数値のみ』を使って設定します。

line-heightの値は『1.5 ~ 1.8』あたりが最適なラインとされています。

.entry-content {
line-height: 数値;
}

この数値の部分をそれぞれで変えて、テーマデザイナーから貼り付けましょう。

テーマデザイナーの使い方を簡単に説明します。

まずBloggerの管理画面から『テーマ』→『カスタマイズ』→『上級者向け』へ移動します。


『上級者向け』の一番下に、『CSSを追加』の項目があるので、選択します。

あとはこのスペースに貼り付ければCSSが上書きされ、適用されます。

文字間隔の調整

文字間隔を調整するには、letter-spacingプロパティを使います。

letter-spacingについて、詳しくはこちらをご覧ください。

>>【図解】CSSで文字のバランスを調整する方法まとめ

letter-spacingは、文字どうしの幅を調整するものです。

letter-spacingプロパティの値として、『normal』、『px』、『em』などの指定方法があります。

letter-spacingの値は、『0 ~ 0.1em』が最適とされています。

特にこだわりがない場合は0でも大丈夫ですが、ほんの少しつけてあげると文字が読みやすくなります。

.entry-content {
letter-spacing: 数値em;
}

この数値をそれぞれで変えて、テーマデザイナーの『CSSを追加』のところに貼り付けてください。

テーマデザイナーの使い方は、一つ前の項目をご覧ください。

まとめ

行間・文字の間隔は好みの問題もあるので、どれがベストとは言えません。

しかし、客観的にみて読みやすいように調整することは大事です。

フォントサイズやフォントの種類も考えて、より良いバランスを意識しましょう。

コメント