行間の変更（livedoorBlog編）

行間を変更する場合、スタイルシートを編集すると簡単に変更することができます。
では、具体的に、「エントリー本文」の行間を変更する方法を例に挙げて説明します。
テンプレートは、公式テンプレートの「デフォルト2005（ブルー）」を使用して説明します。

■ CSS（スタイルシート）の編集方法
「デフォルト2005（ブルー）」テンプレートのスタイルシートを見ていただくと、下記のような記述があります。

＜スタイルシート＞

.main,.mainmore,.article_tags{ 　　　　font-size:12px; 　　　　margin:10px 20px 0; 　　　　text-align:left; }

エントリー本文の行間を変更するには、.main,.mainmore,.article_tags内で、line-height というプロパティを追加して、行間を指定します。

＜スタイルシートの編集例＞

.main,.mainmore,.article_tags{ 　　　　font-size:12px; 　　　　margin:10px 20px 0; 　　　　text-align:left; 　　　　line-height: 1.5; }

初期設定では、blogbodyで「line-height : 130%;」とエントリー全体的に指定されています。
この「130%」という記述を変更することで、行間を変更することができますが、エントリー本文の行間だけを変更するには、上記のように個別に指定します。



行間の指定方法には、「15pt」のように絶対サイズで指定する方法、 「150%」のように相対サイズで指定する方法、「1.5」のように数値のみで指定する方法があります。

■ 絶対サイズで指定

line-height: 15pt;

文字サイズが 10pt のときに、行の高さを 15pt に指定すると、行間は 5pt になります。

（行間　＝　行の高さ　－　文字サイズ）

■ 相対サイズで指定

line-height: 150%;

文字サイズが 10pt のときに、行の高さを 150% （文字サイズ×1.5倍）に指定すると、行間は 5pt になります。

（行間　＝　行の高さ　－　文字サイズ）

■ 数値のみ（単位なし）で指定

line-height: 1.5;

文字サイズが 10pt のときに、行の高さを 1.5 （文字サイズ×1.5倍）に指定すると、行間は 5pt になります。

（行間　＝　行の高さ　－　文字サイズ）

絶対サイズ・相対サイズの単位

絶対サイズと相対サイズの各単位は、下記のような意味ですので、参考にしてください。

絶対サイズ	意味
in	インチ。1in = 25.4mm
cm	センチメートル
mm	ミリメートル
pt	ポイント。1pt = 1/72in
pc	パイカ。1pc = 12pt
px	ピクセル。表示上の1ドット幅 （※正確にはデバイス依存の相対サイズ）

相対サイズ	意味
em	基準書体の文字の高さ （英字の「M」の高さを基準とした大きさ）
ex	基準書体の文字の高さ （英字の「x」の高さを基準とした大きさ）
%	基準書体のサイズに対する百分率

行間の変更について、エントリー本文の部分を例として説明しましたが、エントリー本文だけでなく、他の部分の行間を変更したい場合は、その該当するクラスに「line-height」を指定することで変更することができます。

livedoorBlog「デフォルト2005（ブルー）」の主なクラスは、下記の通りですので、参考にしてください。

＜livedoorBlog 「デフォルト2005（ブルー）」テンプレート＞

クラス	該当箇所
.blogtitle	ブログのタイトル
.description	ブログの説明
#content	エントリー全体
.date	エントリーの日付
.title	エントリーのタイトル
.main,.mainmore	エントリーの本文
.posted	投稿者・投稿時間・コメントなど
#left	サイドメニュー全体（左側）
#right	サイドメニュー全体（右側）
side	サイドメニュー
.sidetitle	サイドメニューのタイトル
.link-note	RSSへのリンクや検索ボックス
.calendarhead	カレンダーのヘッダ
.caltblwk td	カレンダーの週
.caltblday td	カレンダーの日

以上、行間（行の高さ）の指定方法について説明しました。
是非、参考にして、読みやすい行間にカスタマイズしてくださいね。

[次の講義へ] → 文字間隔の調整

参考になりましたら、1クリックの応援お願いします。