CSS カスタマイズ line-height ~行間を調整する ~【 WordPress 】
Webページの文章での余白のバランスは文章の読みやすさに 大きく影響を与える項目になります。
余白の設定には 改行と行間の二つの設定があり、行間の調整とは
" 隣り合わせる文章の余白 “を指定するというもので 改行とは異なる設定になります。
この行間の設定は line-height ( ラインハイト )といい、
たとえば 長いひとつの文章が2行以上に渡った場合の文章同士の間隔、
隣り合わせる文章の余白を設定するといった設定です。
ルクセリタスでのデフォルトの行間指定は1.9 となっていますが 全体のバランスをみて設定していきたいと思います。
余白と行間について
隣り合わせる文章。とは 正確には 同じブロック内での文章のことを指しています。
余白の設定には 行間と段落によって発生する上下間の余白の2通りあります。
上の図の 黄色枠で囲われているのが ブロックとした場合、
ひとつの文章が続いているけれど 行が変わるときなどの 上下の文章の余白が 行間 line-height(ライン ハイト)
隣り合わせた文章などの ブロック間に発生する 上下間の余白は
margin(マージン)というコードを使用し余白を調整します。
全体のバランスを見るためにも line-height と margin の両方の設定が大事です。
投稿の行間設定 – 外観カスタマイズ
ルクセリタスの場合、外観カスタマイズから簡単に 行間設定することができます。
投稿の行間からの設定では 上下のマージンも同じ画面にあり、サイト画面を確認しながら設定していけます。
追加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(エム) というイメージで使い分ければいいでしょう。