【CSS】WordPressで行間と改行幅を調整する方法

ブログを書いていると行間幅を調整したくなることはありませんか。

行間がきつきつだったりスカスカだったりすれば読者にとっても読みづらい記事になってしまいます。

そこで、CSSを使ってWordPressで行間と改行幅を調整する方法を紹介していきます。

行間と改行幅とは

まず、行間と改行幅についてです。

行間:行と行の間隔のこと

改行幅:改行したときにできる感覚のこと(段落と段落の間隔)

行間や行間幅をカスタマイズするためには、CSSでこれらのパラメーターがどのように書かれているか確かめる必要があります。

CSSファイルから行間と行間幅のパラメーターを探す

WordPress「テーマの編集」のCSSファイルから、行間と行間幅のパラメーターを探す必要がありますが、WordPressテーマによって書かれている場所が異なります。

一概に言えませんが、下記のようなパラメーターで書かれている場合が多いです。

そして「.line-height」と「.margin」の数字を変更することで行間と行間幅を調整することが可能です。

※「.margin」は1emの値を変更します。

.entry-content p {
     line-height: 2.0;
     margin: 1em 0;
}

or

.post-content p {
     line-height: 2.0;
     margin: 1em 0;
}

「line-height:」の値を変更すれば行間を、「margin:」の値を調整すれば改行幅の調整が可能なので、少しずつ数字を調整してみてブログが見やすくなる値を見つけてみてください。

「line-height:」は、1.5~2.0の間が見やすと言われています。

line-height:  行間を調整

margin:   改行幅を調整

デベロッパーツールでパラメーターの確認

パラメーターがよくわからん、という方はでデベロッパーツールを使ってパラメーターを確かめることができるでしょう。

管理人のブラウザはChromeなので、Chromeでの説明になります。

1.自分のサイトで「右クリック」→「検証」を選択してデベロッパーツールを立ち上げます。

2.「①矢印」をクリックしてブログの「②文章」を選択します。デベロッパーツール画面から「③Inherited form p」を確認します。

当ブログ記事の行間と行間幅には「.post-content p {}」というパラメーターが使われていることがわかりました。

WordPressの追加CSS機能を使用する

CSSファイルを直接変更するのが難しかったり、不安な場合は、WordPressの追加CSS機能を使用しましょう。

WordPressの追加CSS機能を使用すれば、誤って他のパラメーターを変更してしまうこともないので安心して調整できます。

1.WordPressテーマのカスタマイズ画面から「追加CSS」を選択します。

2.コード欄に、行間と行間幅のパラメーターを追記して、数字を調整してみてください。

これで調整は完了です。

 

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

Twitter でtwo_audioをフォローしよう!