CSS カスタマイズ line-height ~行間を調整する ~【 WordPress 】
行間の調整とは 隣り合わせる文章の余白を指定するというもので
文章の読みやすさに 大きく影響を与える項目になります。
この行間の設定 line-height ( ラインハイト ) について まとめていきます。
余白と行間について
隣り合わせる文章。といいましたが 正確には 行間とは 同じブロック内での文章のことを指しています。
余白の設定には 行間と 段落によって発生する上下間の余白の2通りあります。
上の図の 黄色枠で囲われているのが ブロックとした場合
ひとつの文章が続いているけれど 行が変わるときなどの 上下の文章の余白が 行間 line-height(ライン ハイト)
隣り合わせた文章などの ブロック間に発生する 上下間の余白は
margin(マージン)というコードを使用し余白を調整します。
全体のバランスを見るためにも line-height と margin の両方の設定が大事です。
段落<p>に関してはこちらに書いてます。↓
改行と 段落Pの違い Webサイトで文章を正しく表示する方法【記事作成の基本】
投稿の行間設定 – 外観カスタマイズ
ルクセリタスの場合、外観カスタマイズから簡単に 行間設定することができます。
投稿の行間からの設定では 上下のマージンも同じ画面にあり、サイト画面を確認しながら設定していけます。
追加CSSから設定
バージョンによっては 外観カスタマイズ に表示されていないものもありますので
その場合、追加CSSにコードを記述しカスタマイズしていきます。
追加CSSは カスタマイズ項目を一番下。
追加CSSを開き こちらに必要な CSSを記述していきます。
行間調整の プロパティ ” line-height ”
pは 先ほどの 段落pのパラグラフ 一つの文章に対しての行間の値は サイズ指定なしの 数字のみで表します。
デフォルトでは 1.9 となっていましたが、ここでは 2 と指定しました。
数字の基準は 記事用に指定した文字サイズを 1として 1.5倍・2倍 といった感じで表します。
1 2 3 4 |
/*文字の行間*/ p { line-height: 2 ; } |
上段の /* */ で囲われた文章は
記述したCSSコードを 管理するためのタイトルで 何のコードなのか 分かりやすくタイトルを付けておきます。
‟値” に使用する単位について
通常、数字の指定には px ・ % ・ em などの単位を用いますが
行間には ‟値” の単位は指定しません。
記事中に強調させたい文字などをサイズ変更した場合など
文字が重なってしまうなど画面上の問題が起こるため
単位なしにすることで文字のトラブルを防ぎます。
px ・ % ・ em それぞれの単位ですが、
px は画像、文字のサイズの設定には em(エム) というイメージで使い分ければいいでしょう。