【賢威8】行間を変更する方法

賢威8で行間(行と行の隙間、スペース)を変更する方法について説明していきます。
賢威8では親テーマに行間を変更するCSSがあらかじめ用意されています。
それらを投稿や固定ページ、テーマを編集する際に使用することができます。

あらかじめ用意されているCSS

/*行間の設定*/
.lh10{ line-height: 1.0!important; }
.lh11{ line-height: 1.1!important; }
.lh12{ line-height: 1.2!important; }
.lh13{ line-height: 1.3!important; }
.lh14{ line-height: 1.4!important; }
.lh15{ line-height: 1.5!important; }
.lh16{ line-height: 1.6!important; }
.lh17{ line-height: 1.7!important; }
.lh18{ line-height: 1.8!important; }
.lh19{ line-height: 1.9!important; }
.lh20{ line-height: 2.0!important; }

使用方法(例)

行間(line-height)1.0

<div class="lh10">ここに行間を変更したい文章を入れてください。ここに行間を変更したい文章を入れてください。ここに行間を変更したい文章を入れてください。ここに行間を変更したい文章を入れてください。</div>

実際に表示されるHTML

ここに行間を変更したい文章を入れてください。ここに行間を変更したい文章を入れてください。ここに行間を変更したい文章を入れてください。ここに行間を変更したい文章を入れてください。

行間(line-height)1.5

<div class="lh15">ここに行間を変更したい文章を入れてください。ここに行間を変更したい文章を入れてください。ここに行間を変更したい文章を入れてください。ここに行間を変更したい文章を入れてください。</div>

実際に表示されるHTML

ここに行間を変更したい文章を入れてください。ここに行間を変更したい文章を入れてください。ここに行間を変更したい文章を入れてください。ここに行間を変更したい文章を入れてください。

行間(line-height)2.0

<div class="lh20">ここに行間を変更したい文章を入れてください。ここに行間を変更したい文章を入れてください。ここに行間を変更したい文章を入れてください。ここに行間を変更したい文章を入れてください。</div>

実際に表示されるHTML

ここに行間を変更したい文章を入れてください。ここに行間を変更したい文章を入れてください。ここに行間を変更したい文章を入れてください。ここに行間を変更したい文章を入れてください。

あたらしくスタイルを定義する

あたらしくスタイルを定義するには2つの方法がございます。

HTMLに直接記述する

行間(line-height)を3.5にする場合

<div style="line-height: 3.5;">ここに行間を変更したい文章を入れてください。ここに行間を変更したい文章を入れてください。ここに行間を変更したい文章を入れてください。ここに行間を変更したい文章を入れてください。</div>

CSSファイルに新しいスタイルを定義

行間(line-height)を3.5にする場合

.任意のクラス名{
    line-height: 3.5;
}