サイト全体の行間や改行幅をCSSで一括設定する方法!WordPressでPCとスマホで別々の行間設定をする場合にも。

CSSで行間と改行幅を設定する方法_eyecatch

WordPressなどで作成されたサイトの行間や改行幅をCSSで変更する方法です。

テキストがメインの「読み物」であるブログの場合、文章の見やすさや読みやすさはユーザビリティに直結するため非常に大切です。

CSSで簡単に調整できるので様々なWebページに使用できる方法です。
モバイルファーストの時代ですので、画面サイズが異なるPCとスマートフォンでそれぞれ行間や改行幅を分けて設定する方法も記述しました。

WordPressの場合はテーマに行間設定が用意されている場合がほとんどです。
改行幅はテーマで設定できない場合があり、この場合はCSSにて設定します。

行間と改行幅をCSSで設定する方法

まず段落、行間と改行幅(段落幅)はどの部分なのかを確認しておきます。

文字周りの余白であることは分かりますが、言葉が少しややこしいですよね…

CSSで行間と改行幅を設定する方法_001

段落と行間と改行幅について

段落とは?
Webサイトでの段落とはPタグ(<p></p>)で囲まれた部分です。
1つの文章の塊で、見やすいように改行を入れてある部分です。
(上の画像では黒枠の部分)

行間とは?
行間は文字の上下にあるスペースです。
行が横、列が縦ですので「横(行)」と「横(行)」の間の部分です。
(上の画像では緑色の部分)

改行幅(段落幅)とは?
改行幅とは段落と段落の間にあるスペースです。
Pタグで囲まれている1つの文章の塊同士の間隔です。
(上の画像では赤色の部分)

CSSで行間と改行幅を一括設定する

CSSでこれらの文字周りの余白を調整する方法は簡単です。

ポイント

行間には「line-height」を使う。
改行幅には「margin-bottom」を使う。

値にはpxやemなどフォントサイズと同じものが使用できます。
指定しない場合(初期値)はブラウザによって自動決定されます。

Pタグに対してCSSプロパティを設定すれば、一括で行間と改行幅の設定ができます。

p {
line-height: 20px;
margin-bottom: 1.5em;
}

ただしこのコードには注意点があり、サイト全体のPタグに影響してしまいます。
記事本文以外にPタグが使用されている場合、サイトのデザインが崩れてしまう可能性があるので良くありません。

記事ページ内の本文にあるPタグのみを調整するためには、
「article」など、文章全体を囲んでいるidかclassを使います。

CSSで行間と改行幅を設定する方法_002基本的に本文はarticleというクラス名が付いているはずですが、
念のためブラウザの開発者ツールを使用して確かめておいた方が安心です。

CSSで行間と改行幅を設定する方法_003WordPressの場合はタイトルを除いた、本文の部分のみを囲むクラスを使用しているテーマが多いのでコチラを使う方が良いかも。

AFFINGER5、Cocoon共に「entry-content」というクラス名が使用されていました。

行間、改行幅を調整するCSSコード

以下のコードをstyle.cssなどのスタイルシートに保存すればOKです!
(値はサイトに合わせて変更してください。)

クラス名「article」を使う場合。

.article p {
line-height: 20px;
margin-bottom: 1.5em;
}

クラス名「entry-content」を使う場合。

.entry-content p {
line-height: 20px;
margin-bottom: 1.5em;
}

line-heightで行間を指定、margin-bottomで改行幅を指定しています。

margin-bottomのみでうまくいくと思いますが、
エディターの改行などでダメな場合は「margin-top:0;」を追加してください。

.article p {
line-height: 20px;
margin-top: 0;
margin-bottom: 1.5em;
}

当サイトの場合「margin-top:0;」を使うと画像下に表示しているキャプションが画像とくっつくので指定していません。

PCとスマホでCSSを分ける場合

パソコンの画面は横長が多く、画面サイズが大きいので行間や改行幅を広く設定すると文章が読みやすくなります。

CSSで行間と改行幅を設定する方法_004

パソコンの場合、行間や改行幅は広くても見やすい

しかし、画面が縦長で画面サイズも狭いスマートフォンで同じ行間や改行幅を使用すると文章が読みにくいといった状況になります。

CSSで行間と改行幅を設定する方法_005

スマホの場合、行間や改行幅が広いと見にくい

そこでCSSでパソコンとスマホ(タブレット)のアクセスに応じて読み込むCSSを変更し、行間と改行幅を別々に設定する方法です。

ポイント

メディアに応じてCSSのスタイルを分けたい場合は
「@media only screen and (○○-width: ○○px)」を使う。

CSSスタイルシートに記述できる@media only screenを使って画面サイズに応じてCSSを分けます。

/* スマホのみに適用(599px以下) */
@media only screen and (max-width: 599px) {
  .article p{
  line-height: 30px;
  margin-bottom: 1.0em;
  }
}
/* タブレットのみに適用(600px~959px) */
@media only screen and (min-width: 600px) and (max-width: 959px) {
  .article p{
  line-height: 25px;
  margin-bottom: 1.2em;
  }
}
/* PCのみに適用(960px以上) */
@media print, screen and (min-width: 960px) {
  .article p{
  line-height: 30px;
  margin-bottom: 1.4em;
  }
}

一例としてこんな感じです。
各pxとemは分かりやすいようにしてますので変更必須です。

最近はスマホの画面サイズも大きくなりましたので、480pxではなく599pxに設定。
PCは画面サイズが960px以上。
スマホとPCの間の画面サイズがタブレットという扱いになります。

CSSで行間と改行幅を設定する方法_006

調整後のスマホ画面

スマホの画面サイズでは、文字周りの余白は少ない方が読みやすいと思います。
フォントサイズも小さめがオススメ!

まとめ

CSSを使って文字周りのスペースを調整する方法のまとめでした!

WordPressの場合テーマ側に行間設定が付いているものが多いですが、改行幅の設定が付いているテーマは少ないように思います。

字体やフォントサイズを変更した場合、行間と改行幅の調整は必須です。
スマホとPCでも分けておいた方が親切です。

スマホで見てもパソコンで見ても全く違和感なく読みやすい文章を作っている人って改行の使い方がめちゃくちゃ上手ですよね~

画面の端で折り返すよりも先に改行してたり...
僕も気にしてはいるのですが、パソコンの画面に合わせて書くことが多いのでどうしてもスマホ閲覧では違和感が残ってしまいます…
そもそもPCで執筆するからか!?

1か所だけ行間を調整したい場合はコチラ。
【関連記事】
CSSでdiv内の行間を一か所だけ個別に設定する方法。pタグ前後の改行は意外と悩む?

-サイト構築
-

© 2021 ソロ学