 |
ブログを書く人『う～ん、、記事内テキストの行間をいい感じに調整したいけど、CSSもよくわからないし、やり方がわかりません。行間を調整して読みやすい記事にしたいです。教えてください。』 |
こんな疑問にお答えします。
この記事では、記事のメインコンテンツの行間を変更する方法を解説していきます。
- CSSで行間を調節する「line-height」の使い方
- WordPressテーマにおける行間の変更方法
行間の広さが適切だと、読みやすい記事になる！
ブログを書いていく上で、テキスト間の行間の値は非常に重要といえます。
行間が狭すぎるとかなり見にくい記事になり、目が疲れて離脱されてしまいます。逆に行間が広すぎても読んでいて疲れます。内容にまとまりがないように思われるかもしれません。
たとえば、以下のテキストをご覧ください。見やすいですか？
これだと行間が広すぎて、なんか文章の内容が頭に入ってこない気がします。
それでは、以下のテキストはどうですか？
今度は行間がほぼなく、文字同士がぴったりくっついていて、ちょっと読みにくいかと。とくに文章が多いサイトで行間がピッタリだと、読んでいてかなり目が疲れます。
僕みたいに視力が悪くて目が疲れやすいユーザーにとってはとくに辛いです。
最後に以下のテキストはどうでしょうか。
これくらいがちょうど良い気がします。もちろん人によってちょうど良い行間の感覚があると思うので、一概には言えませんが、広すぎもなく、狭すぎもしないあたりかと。
ということでご覧いただいた通り、行間は狭すぎもせず、広すぎもせず、適切な値を設定してあげる必要があります。
一般的には、行間は文字の大きさの70%前後（0.7文字ほど）に設定すると見やすいようです。このブログの行間も文字サイズの70%を目安としています。
CSSで行間を調整する方法：line-height
行間の値はCSSで設定してあげる必要があります。行間は「line-height」で調整します。CSSでは次のように指定します。
line-height: 1.7em;
}
上の記述だと、pタグ（<p></p>）で囲まれた文章（段落）内のテキストについて、行間を1.7emに指定しています。
emというのは文字サイズの単位でして、「1em = 1文字分の長さ」を表します。この場合、ブラウザの文字サイズ（font-size）の1.7文字分の長さということになります。
行間は「line-height」から「font-size」を差し引いて決定する
ちなみに、行間そのものは「行の高さ：line-height」から「文字の大きさ：font-size」を差し引くことで決定されます。
式で表すと、次の通りです。
ちょっと複雑なので、この関係を図で表したのが下図です。
このとおり、行間の広さを決定する場合、行の高さ（line-height）と文字の大きさ（font-size）の2つの値が関わってくるのです。
行間をいろいろ変えてみる：実行結果
それでは、上でご紹介したline-heightの値を色々変えてみて、その実行結果を見てみましょう。以下の3パターンをご覧いただきます。
- line-height: 3.0em（広すぎ）
- line-height: 1.0em（狭すぎ）
- line-height: 1.7em（普通）
まずline-height: 3.0emの場合です。実行結果を以下に示します。
※以降の実行結果について、スマホで[Result]画面が見にくい場合は、右上のクモの巣みたいなマーク（ロゴ）をクリックした先でご覧ください。
See the Pen
aedNMQ by takajin092 (@takajin092)
on CodePen.
続いて、line-height: 1.0emの場合です。実行結果を以下に示します。
See the Pen
KOVzLX by takajin092 (@takajin092)
on CodePen.
続いて、line-height: 1.7emの場合です。実行結果を以下に示します。
See the Pen
JgGXqz by takajin092 (@takajin092)
on CodePen.
どうですか？どの行間が一番見やすいでしょうか。このとおり行間は簡単なCSSで自由に変更できるので、色々自分好みになるよう試してみてください。
たかじん 僕はこのブログの他にも法律系ブログを書いてますが、メインとなるユーザー層や年齢を考慮し、文字サイズや行間を設定しています。
WordPressのテーマ別：行間を変更する方法
WordPressのテーマもCSSを編集することで、行間を自由に変更できます。ここでは、以下2テーマに関して行間の設定方法をご紹介していきます。
- Twenty Seventeen：WordPress標準テーマ
- 賢威8：有料人気テーマ
「Twenty Seventeen」で行間を変更する方法
WordPressに標準搭載されているテーマ「Twenty Seventeen」にて、行間の設定を変更する方法をご紹介します。
WordPressの[外観]→[テーマエディター]と進み、スタイルシート（style.css）を選択します。
実際に変更する箇所ですが、以下の記述を探してください。
「@media screen and (min-width: 48em)」で検索をかけるとすぐ発見できるかと。
上で解説してきた行間の決定方法を参考にして、line-heightの値を変更してみてください。これでテーマ「Twenty Seventeen」でのメインコンテンツ部分の行間設定は完了です。
たかじん CSSを編集する場合には、子テーマを事前に作成し、子テーマで編集されることをおすすめします。親テーマを直接いじると、テーマのアップデートなどで上書きされる心配があるからです。
「賢威8」で行間を変更する方法
テーマ「賢威8」にて行間の設定を変更する方法をご紹介します。賢威8は有料テーマですが、HTMLやCSSの知識がなくともプロ並みのサイトが作れるので、人気ですよね。
まずWordPressの[外観]→[テーマの編集]に進んでください。そしてbase.cssを開きます。
base.cssの中から、以下の記述を探してください。
「メインコンテンツの文字サイズや行間の設定」というコメント文が挿入されているため、これを目印にしてください。
line-heightの値を好きな行間となるよう変更します。
たかじん 同様に、編集する場合は子テーマを編集することをおすすめします。とはいえ、親テーマを編集してアップデートで上書きされても、もう一度同じ編集を加えれば解決ですが。。
まとめ
記事の見た目、読みやすさを良くするために、行間の広さを変更するCSS、テーマ別の方法を解説してきました。些細なことかもしれませんが、やっぱりユーザー目線でデザインしていくべきなので、ぜひ活用してみてください。
おすすめのプログラミングスクール
本気でプログラミングを学び、IT企業転職、フリーランスで稼ぎたい方向け。元プログラマーおすすめのプログラミングスクールを４社（無料体験あり）ご紹介します。
