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

Webページの文章での余白のバランスは文章の読みやすさに 大きく影響を与える項目になります。

余白の設定には 改行と行間の二つの設定があり、行間の調整とは
" 隣り合わせる文章の余白 “を指定するというもので 改行とは異なる設定になります。

この行間の設定は line-height ( ラインハイト )といい、
たとえば 長いひとつの文章が２行以上に渡った場合の文章同士の間隔、
隣り合わせる文章の余白を設定するといった設定です。

ルクセリタスでのデフォルトの行間指定は1.9 となっていますが 全体のバランスをみて設定していきたいと思います。

余白と行間について

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

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

上の図の 黄色枠で囲われているのが ブロックとした場合、
ひとつの文章が続いているけれど 行が変わるときなどの 上下の文章の余白が 行間  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（エム） というイメージで使い分ければいいでしょう。