<>

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

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

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

余白と行間について

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

行間の余白部分についての説明画像

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

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

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

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

関連記事はこちら

段落<p>に関してはこちらに書いてます。↓
改行と 段落Pの違い Webサイトで文章を正しく表示する方法【記事作成の基本】

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

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

行間設定のしかた-外観カスタマイズから投稿の行間設定へ

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

追加CSSから設定

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

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

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

行間CSS-コードを分かりやすく図解
は 先ほどの 段落pのパラグラフ 一つの文章に対しての行間の値は サイズ指定なしの 数字のみで表します。
デフォルトでは 1.9 となっていましたが、ここでは 2 と指定しました。

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

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

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

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

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

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