【WordPress】 CSS カスタマイズ ~行間を調整する ~

行間を調整するためのプロパティ  ” line-height ” (ライン ハイト)
サイト全体の見やすさを決める重要な項目です。

正しい行間の設定

行間とは隣り合わせる文章の間にどれくらいの余白を空けるか、
ということを決めるための設定です。

一行ごとの 行間と 一つの文章ごと の余白は別になります。

一行ごとの行間の調整は line-height(ライン ハイト)
文章は ひとつの文章ごとに 段落<p> というブロックに分けられ
段落 ごとの余白の調整は margin(マージン)というコードを使用します。

まずこの 段落<p> のブロックの 行間を設定して
全体の余白のバランスを決めていくことをおすすめします。

関連記事はこちら

段落<p>に関してはこちらに書いてます。↓
【記事作成の基本】 知っておきたい 段落P の正しい使い方

行間のCSSコード

行間CSS-コードを分かりやすく図解
は 先ほどの 段落pのパラグラフ 一つの文章に対しての
行間の設定は 2 としています。
2 とは倍数の意味で通常の文字と同じ幅の行間という意味になります。

上段の /**/  で囲われた文章は
記述したCSSコードに分かりやすくタイトルを付けてあげているもので
カスタマイズには何ら影響のないものです。
カスタマイズが増えていくと、どこに何を記述したのか
探すのが大変なので分かりやすく記述しておくといいでしょう。

‟値” に使用する単位について

今回の行間には ‟値” が設定されていません。

記事中に強調させたい文字などをサイズ変更した場合など
文字が重なってしまうなどのトラブルが出ることがあるのです。
単位なしにすることで文字のトラブルを防ぐことができます。

また、画像などによく利用される px (ピクセル)という単位。
文字にも使用されることがあるのですが
文字のサイズの設定には em(エム) という単位を
使用することをお勧めします。

それはブラウザには画面の文字サイズを変更する機能があるのですが
Internet explorer では px (ピクセル)という単位は
拡大や縮小に対応されていないようです。
(このような時にも文字が重なり画面がちゃんと表示されなくなってしまいます。)

追加 CSS の記述のしかた

CSSの記述ですが、WordPress の場合、
外観カスタマイズの 追加CSS から記述することが出来ます。
ダッシュボード画面から外観カスタマイズの開け方の図
Luxeritas か外観 から外観カスタマイズへ移動します。

外観カスタマイズ-項目一覧画面
カスタマイズ項目を一番下までスクロールします。

外観カスタマイズ-追加CSS記述画面
こちらに必要なCSSを記述していきます。

Luxeritas の子テーマの編集 という画面からも記述することはできますが
始めは 何度もバランスを見ながらサイズ変更したくなるものなので
外観カスタマイズから記述しておいて
最終的に「これでいい!」 と思えるカスタマイズになったら
子テーマの編集画面に記述すればいいかと思います。