CSS カスタマイズ line-height ～行間を調整する ～【 WordPress 】

行間の調整とは 隣り合わせる文章の余白を指定するというもので
文章の読みやすさに 大きく影響を与える項目になります。

この行間の設定 line-height ( ラインハイト ) について まとめていきます。

余白と行間について

隣り合わせる文章。といいましたが 正確には 行間とは 同じブロック内での文章のことを指しています。

余白の設定には 行間と 段落によって発生する上下間の余白の２通りあります。

上の図の 黄色枠で囲われているのが ブロックとした場合
ひとつの文章が続いているけれど 行が変わるときなどの 上下の文章の余白が 行間  line-height（ライン ハイト）

隣り合わせた文章などの ブロック間に発生する 上下間の余白は
margin（マージン）というコードを使用し余白を調整します。

全体のバランスを見るためにも line-height と margin の両方の設定が大事です。

投稿の行間設定 – 外観カスタマイズ

ルクセリタスの場合、外観カスタマイズから簡単に 行間設定することができます。

投稿の行間からの設定では 上下のマージンも同じ画面にあり、サイト画面を確認しながら設定していけます。

追加CSSから設定

バージョンによっては 外観カスタマイズ に表示されていないものもありますので
その場合、追加CSSにコードを記述しカスタマイズしていきます。

追加CSSは カスタマイズ項目を一番下。
追加CSSを開き こちらに必要な CSSを記述していきます。

行間調整の プロパティ ” line-height ”

ｐは 先ほどの 段落ｐのパラグラフ　一つの文章に対しての行間の値は サイズ指定なしの 数字のみで表します。
デフォルトでは 1.9 となっていましたが、ここでは 2 と指定しました。

数字の基準は 記事用に指定した文字サイズを １として 1.5倍・２倍 といった感じで表します。

上段の　/* */  で囲われた文章は
記述したCSSコードを 管理するためのタイトルで 何のコードなのか 分かりやすくタイトルを付けておきます。

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

通常、数字の指定には px ・ % ・ em などの単位を用いますが
行間には ‟値” の単位は指定しません。

記事中に強調させたい文字などをサイズ変更した場合など
文字が重なってしまうなど画面上の問題が起こるため
単位なしにすることで文字のトラブルを防ぎます。

px ・ % ・ em それぞれの単位ですが、
px は画像、文字のサイズの設定には　em（エム） というイメージで使い分ければいいでしょう。