ワードプレスの行間を調整する方法｜広すぎる・狭い原因と簡単な直し方
はじめに
ワードプレスで記事を書いていると、「本文の行間が広すぎる」「改行すると余白が空きすぎる」「スマホだけ文章が詰まって見える」といった悩みが出てくることがあります。
行間は、記事の読みやすさに大きく影響する重要なデザイン要素です。内容がよくても、文字が詰まりすぎていたり、逆に余白が広すぎたりすると、読者はストレスを感じて離脱しやすくなります。
ただし、ワードプレスの行間トラブルは、「行間そのもの」が原因とは限りません。実際には、段落間の余白、テーマのCSS、ブロックエディターの設定、コピペ時の不要な改行などが影響しているケースも多くあります。
この記事では、ワードプレスの行間を調整する方法を、初心者にもわかりやすく解説します。CSSを使わない簡単な直し方から、追加CSSで本文全体・特定ページ・スマホ表示だけを調整する方法まで紹介します。
1. ワードプレスの行間とは？まず確認すべき「行間」と「段落間」の違い
ワードプレスの行間を直す前に、まず確認したいのが「行間」と「段落間」の違いです。
この2つを混同すると、CSSを変更しても思ったように余白が変わらなかったり、必要以上にレイアウトが崩れたりすることがあります。
1-1. 行間は文字の上下間隔、段落間はブロック同士の余白
行間とは、同じ段落内で複数行になったときの、文字と文字の上下の間隔です。
たとえば、1つの段落が長くなって2行、3行に折り返されたとき、それぞれの行の間にできる余白が行間です。CSSでは主にline-heightで調整します。
一方、段落間とは、段落ブロックと段落ブロックの間にある余白のことです。ワードプレスのブロックエディターでは、段落ごとにブロックが分かれるため、Enterキーで段落を分けると、そのブロック同士の間に余白が入ります。
段落間は、CSSでは主にmargin-bottomやmargin-topで調整されます。
つまり、文章の中の行同士が詰まっているならline-height、段落と段落の間が広すぎるならmarginを確認する必要があります。
1-2. EnterとShift＋Enterで余白が変わる理由
ワードプレスでは、Enterキーを押すと新しい段落ブロックが作成されます。そのため、前後の段落ブロックに設定されている余白が反映され、文章の間隔が広く見えることがあります。
一方、Shift＋Enterを押すと、同じ段落内で改行されます。新しい段落ブロックは作成されないため、段落間の余白は追加されません。
たとえば、次のような違いがあります。
Enterの場合は、段落が分かれるため余白が広くなります。
これは1つ目の段落です。
これは2つ目の段落です。
Shift＋Enterの場合は、同じ段落内で改行されるため余白は小さくなります。
これは1行目です。
これは2行目です。
「改行しただけなのに余白が広すぎる」と感じる場合は、Enterで段落を分けていることが原因かもしれません。
1-3. 行間が広すぎる・狭いと読みにくくなる原因
行間が広すぎると、文章のまとまりが弱くなり、読者が次の行へ視線を移しにくくなります。特にスマホでは、画面内に表示される文字数が少なくなり、スクロール量が増えてしまいます。
反対に、行間が狭すぎると、文字が詰まって見えて圧迫感が出ます。長文記事では読み疲れしやすく、離脱の原因になることもあります。
ワードプレスの本文では、一般的にline-height: 1.6;〜1.9;程度が読みやすい目安です。ただし、フォントサイズ、フォントの種類、記事幅、デザインによって最適な数値は変わります。
2. ワードプレスの行間が広すぎる・狭すぎる主な原因
ワードプレスの行間が思ったようにならない原因は、1つとは限りません。テーマ、ブロック、CSS、プラグイン、編集方法など、複数の要素が関係している場合があります。
2-1. 段落ブロックの自動余白が影響している
ワードプレスのブロックエディターでは、段落ブロックごとに余白が設定されています。
そのため、Enterキーで段落を分けるたびに、段落下の余白が追加されます。本文の行間が広いと思っていても、実際には段落ブロック同士の余白が広いだけというケースはよくあります。
特に、短い文章を1文ごとにEnterで区切っている場合、記事全体の余白がかなり広く見えます。
この場合は、行間ではなく段落間を調整する必要があります。
2-2. テーマ側のCSSでline-heightやmarginが指定されている
ワードプレスのデザインは、使用しているテーマのCSSによって大きく変わります。
テーマ側で本文に以下のような指定がされていると、行間や段落間が広くなったり狭くなったりします。
CSSp {
line-height: 1.8;
margin-bottom: 1.5em;
}
line-heightは行間、margin-bottomは段落下の余白を指定するCSSです。
テーマによっては、本文エリアだけでなく、見出し、リスト、引用、テーブルなどにも個別の余白設定があります。そのため、段落だけを直しても、リストや見出し周りの余白が変わらないことがあります。
2-3. ブロックエディターやテーマ独自機能の余白設定
最近のワードプレステーマには、ブロックごとに余白を調整できる機能が用意されていることがあります。
たとえば、段落ブロックやグループブロック、カラムブロックなどに「余白」「マージン」「パディング」「ブロック下の余白」といった設定項目がある場合です。
また、SWELLやCocoonなどの人気テーマでは、テーマ独自のデザイン設定によって本文の余白や行間が調整されていることがあります。
CSSを追加する前に、まずはテーマ設定やブロック設定で調整できないか確認しましょう。
2-4. コピペした文章に不要な改行や空白が入っている
Googleドキュメント、Word、メモアプリ、他サイトなどから文章をコピーしてワードプレスに貼り付けると、不要な改行や空白が入ることがあります。
見た目ではわかりにくくても、HTML上では余分なタグや空の段落が入っている場合があります。
たとえば、空の段落ブロックが複数入っていると、本文中に不自然な余白ができます。
コピペ後に余白が急に広がった場合は、エディター上で空白ブロックや不要な改行が入っていないか確認してください。
2-5. 追加CSSやプラグインの設定が干渉している
過去に追加したCSSや、デザイン系プラグインが行間に影響しているケースもあります。
たとえば、以下のようなCSSが追加されていると、本文全体の行間や段落間が変わります。
CSS.post-content p {
line-height: 2;
margin-bottom: 2em;
}
また、ブロック拡張プラグイン、ページビルダー、目次プラグイン、装飾系プラグインなどが独自のCSSを読み込んでいる場合もあります。
行間が突然変わった場合は、最近追加したCSSやプラグインがないか確認しましょう。
3. まず試したい簡単な直し方｜エディターで行間を調整する方法
CSSを編集する前に、まずはワードプレスのエディター上でできる簡単な直し方を試してみましょう。
行間の悩みは、CSSを触らなくても解決できることがあります。
3-1. EnterではなくShift＋Enterで改行する
文章を少しだけ改行したい場合は、EnterではなくShift＋Enterを使います。
Enterを押すと新しい段落ブロックが作られるため、段落間の余白が入ります。Shift＋Enterなら同じ段落内で改行されるので、余白を広げずに行を変えられます。
ただし、Shift＋Enterを使いすぎると、文章構造がわかりにくくなることがあります。見た目だけを整える目的で多用するのではなく、同じ意味のまとまりの中で改行したい場合に使うのがおすすめです。
文章の意味が変わるところではEnter、同じ段落内で見た目だけ改行したいときはShift＋Enter、と使い分けましょう。
3-2. 不要な空白ブロックや改行を削除する
本文の途中に不自然な余白がある場合は、空白ブロックや不要な改行が入っていないか確認します。
ブロックエディターでは、空の段落ブロックがあると余白として表示されることがあります。
確認するポイントは以下です。
・文章と文章の間に空の段落ブロックがないか
・スペーサーブロックが意図せず入っていないか
・コピペした文章に不要な改行が入っていないか
・HTML編集画面に余分なタグがないか
空白ブロックを削除するだけで、行間が直ったように見えることもあります。
3-3. スペーサーブロックで段落間の余白を調整する
意図的に余白を入れたい場合は、空の段落を連続して入れるのではなく、スペーサーブロックを使いましょう。
スペーサーブロックを使うと、余白の高さを数値で調整できます。空白行を何度も入れるよりも、デザインが安定しやすくなります。
ただし、本文中のすべての段落間をスペーサーブロックで調整するのはおすすめしません。管理が大変になり、記事全体のデザインも崩れやすくなります。
スペーサーブロックは、見出し前やCTA前など、特定の場所に余白を作りたいときに使うのが適しています。
3-4. ブロック下の余白設定があるテーマで調整する
使用しているテーマによっては、各ブロックに「ブロック下の余白」や「余白量」を設定できる場合があります。
この機能があるテーマでは、CSSを書かなくても段落や見出しの余白を調整できます。
確認する場所は、主に以下のような項目です。
・ブロックのサイドバー設定
・テーマ独自のブロック設定
・投稿編集画面のデザイン設定
・外観カスタマイズ内の本文設定
・サイトエディターのスタイル設定
テーマ側で調整できる場合は、まずその設定を使うと安全です。CSSを追加するよりも管理しやすく、テーマのデザインともなじみやすくなります。
4. CSSでワードプレスの行間を調整する方法
エディター上の調整だけでは直らない場合は、CSSで行間を変更します。
CSSを使うと、本文全体、段落間、特定の記事、スマホ表示など、細かく調整できます。
4-1. 追加CSSを開く手順
ワードプレスでCSSを追加する一般的な方法は、「追加CSS」を使うことです。
多くのテーマでは、以下の手順で開けます。
ワードプレス管理画面にログインする
「外観」を開く
「カスタマイズ」をクリックする
「追加CSS」を開く
CSSを入力して公開する
ブロックテーマを使っている場合は、サイトエディターの「スタイル」から追加CSSを設定する場合もあります。テーマによって場所が異なるため、「外観」内の項目を確認してください。
CSSを追加する前には、現在のCSSをメモ帳などにコピーしておくと安心です。
4-2. 本文全体の行間をline-heightで変更する
本文全体の行間を調整したい場合は、line-heightを使います。
たとえば、本文の段落の行間を少し広げたい場合は、以下のように指定します。
CSS.entry-content p {
line-height: 1.8;
}
line-heightの数値が大きくなるほど行間は広くなり、小さくなるほど詰まります。
目安としては、以下のようになります。
・line-height: 1.5; やや詰まった印象
・line-height: 1.6; 標準的
・line-height: 1.7; 読みやすい
・line-height: 1.8; ゆったり
・line-height: 2; かなり広め
ブログ記事では、1.6〜1.8あたりから試すのがおすすめです。
4-3. 段落間の広さをmargin-bottomで変更する
段落と段落の間が広すぎる場合は、line-heightではなくmargin-bottomを調整します。
CSS.entry-content p {
margin-bottom: 1em;
}
margin-bottomは、段落の下にできる余白です。
行間を変えたいのか、段落間を変えたいのかによって、使うCSSが変わります。
文章の折り返し行同士の間隔を変えたいならline-height、Enterで分かれた段落同士の余白を変えたいならmargin-bottomです。
4-4. 特定の記事・固定ページだけ行間を変更する
特定の記事だけ行間を変えたい場合は、記事ごとのIDを使ってCSSを指定します。
ワードプレスの投稿ページには、通常postid-123のようなクラスが付与されます。固定ページの場合はpage-id-123のようなクラスが使われます。
投稿IDが123の記事だけ本文の行間を変える場合は、以下のように指定します。
CSS.postid-123 .entry-content p {
line-height: 1.8;
}
固定ページIDが456のページだけ変更する場合は、以下のようにします。
CSS.page-id-456 .entry-content p {
line-height: 1.8;
}
投稿IDは、投稿編集画面のURLに表示されるpost=123の数字で確認できます。
4-5. 見出し・リスト・引用などパーツ別に行間を調整する
本文の段落だけでなく、見出し、リスト、引用などの行間を個別に調整したい場合もあります。
たとえば、リストの行間を調整する場合は以下のように指定します。
CSS.entry-content li {
line-height: 1.8;
}
引用ブロックの行間を調整する場合は、以下のようにします。
CSS.entry-content blockquote {
line-height: 1.8;
}
見出しの行間を調整する場合は、以下のように指定できます。
CSS.entry-content h2,
.entry-content h3 {
line-height: 1.4;
}
見出しは本文よりも文字サイズが大きいため、本文と同じline-heightにすると間延びして見えることがあります。見出しは1.3〜1.5程度を目安にするとバランスが取りやすくなります。
5. 行間を広げる・詰めるCSSの具体例
ここからは、ワードプレスの行間を調整するときに使いやすいCSS例を紹介します。
使用しているテーマによって本文エリアのクラス名が異なるため、反映されない場合は.entry-contentの部分をテーマに合わせて変更してください。
5-1. 行間を少し広げたい場合のCSS
本文の行間を少し広げたい場合は、以下のCSSを追加します。
CSS.entry-content p {
line-height: 1.8;
}
現在の行間が詰まって読みにくい場合は、まず1.7または1.8を試してみましょう。
さらにゆったり見せたい場合は、以下のようにします。
CSS.entry-content p {
line-height: 1.9;
}
ただし、行間を広げすぎると文章のまとまりが弱くなります。特にスマホではスクロール量が増えるため、広げすぎには注意しましょう。
5-2. 行間を狭く詰めたい場合のCSS
本文の行間が広すぎる場合は、line-heightの数値を小さくします。
CSS.entry-content p {
line-height: 1.6;
}
より詰めたい場合は、以下のように指定します。
CSS.entry-content p {
line-height: 1.5;
}
ただし、1.4以下にすると、文章が詰まりすぎて読みにくくなる可能性があります。長文ブログでは、最低でも1.5以上を目安にするのがおすすめです。
5-3. 段落間だけを狭くするCSS
行間はちょうどよいのに、段落と段落の間だけが広すぎる場合は、margin-bottomを調整します。
CSS.entry-content p {
margin-bottom: 0.8em;
}
段落間をさらに詰めたい場合は、以下のようにします。
CSS.entry-content p {
margin-bottom: 0.5em;
}
ただし、段落間を完全になくすと文章の区切りがわかりにくくなります。
CSS.entry-content p {
margin-bottom: 0;
}
このような指定は、特別なデザイン意図がある場合を除き、本文全体にはあまりおすすめしません。
5-4. スマホだけ行間を変えるCSS
スマホ表示だけ行間を変更したい場合は、メディアクエリを使います。
たとえば、画面幅が768px以下のときだけ本文の行間を調整する場合は、以下のようにします。
CSS@media screen and (max-width: 768px) {
.entry-content p {
line-height: 1.7;
}
}
スマホで行間が広すぎる場合は、以下のように少し詰めます。
CSS@media screen and (max-width: 768px) {
.entry-content p {
line-height: 1.6;
margin-bottom: 0.8em;
}
}
スマホでは1行の文字数が少ないため、PCよりも行間が広く見えることがあります。PCと同じ数値でも印象が変わるため、必ず実機またはブラウザのスマホ表示で確認しましょう。
5-5. CSSが反映されないときの確認ポイント
追加CSSを入れても行間が変わらない場合は、以下を確認してください。
・キャッシュが残っていないか
・CSSのセレクタがテーマに合っているか
・別のCSSで上書きされていないか
・入力したCSSに記述ミスがないか
・対象が段落ではなくリストや見出しではないか
特に多いのは、テーマによって本文エリアのクラス名が違うケースです。
たとえば、テーマによっては.entry-contentではなく、.post_contentや.c-entry__contentなどが使われている場合があります。
反映されない場合は、ブラウザの検証ツールで本文にどのクラスが付いているか確認しましょう。
6. テーマ・プラグインで行間を調整する方法
ワードプレスの行間は、CSSだけでなくテーマやプラグインの機能で調整できる場合もあります。
初心者の場合は、まずテーマ設定を確認し、それでも難しい場合にCSSを使う流れがおすすめです。
6-1. 使用中のテーマ設定で余白や本文デザインを確認する
多くのワードプレステーマには、本文デザインを調整する設定があります。
確認したい項目は以下です。
・本文フォントサイズ
・本文の行間
・段落下の余白
・ブロック間の余白
・見出し上下の余白
・スマホ表示の余白
・記事コンテンツ幅
テーマ設定で行間を変更できる場合は、CSSよりも簡単に調整できます。
ただし、テーマ設定で変更できる範囲は限られていることがあります。細かく調整したい場合は、追加CSSを使う方が向いています。
6-2. SWELL・Cocoonなどテーマ別の確認ポイント
SWELLやCocoonなどの人気テーマでは、テーマ独自の設定によって本文の余白やデザインが管理されています。
SWELLの場合は、カスタマイザーや投稿編集画面のブロック設定、テーマ独自の装飾設定を確認しましょう。ブロックごとの余白設定や、コンテンツ周りのデザイン設定が影響していることがあります。
Cocoonの場合は、Cocoon設定内の本文、インデックス、モバイル、エディター関連の設定を確認します。本文の余白やフォントサイズ、モバイル表示のデザインが影響している場合があります。
どのテーマでも共通して大切なのは、CSSを追加する前にテーマ側の設定を確認することです。テーマ設定と追加CSSの両方で同じ場所を調整すると、どちらが効いているのかわかりにくくなります。
6-3. ブロック拡張プラグインで余白を調整する方法
ブロック拡張プラグインを使うと、ブロックごとに余白、マージン、パディングなどを細かく設定できる場合があります。
たとえば、グループブロックやカラムブロック、装飾ボックスなどの余白を調整したいときに便利です。
ただし、プラグインで余白を調整すると、記事ごと・ブロックごとに設定が分散しやすくなります。後から全体のデザインを変更したいときに、管理が大変になることがあります。
本文全体の行間を統一したい場合は、プラグインよりもCSSでまとめて指定する方が効率的です。
6-4. プラグインよりCSS調整が向いているケース
以下のような場合は、プラグインよりCSSで調整する方が向いています。
・サイト全体の本文行間を統一したい
・段落間を一括で調整したい
・スマホだけ行間を変えたい
・特定の記事だけ行間を変えたい
・テーマの余白設定を細かく上書きしたい
・プラグインを増やしたくない
行間調整だけのためにプラグインを追加すると、サイトが重くなったり、他のCSSと干渉したりする可能性があります。
単純な行間調整であれば、追加CSSで対応するのがおすすめです。
7. 行間調整で失敗しないための注意点
ワードプレスの行間調整は、CSSを少し変えるだけでできます。ただし、適当に数値を変更すると、かえって読みにくくなったり、デザインが崩れたりすることがあります。
7-1. line-heightとmarginを混同しない
行間調整で最も多い失敗が、line-heightとmarginの混同です。
line-heightは、同じ段落内の行と行の間隔を調整します。
margin-bottomやmargin-topは、段落やブロック同士の余白を調整します。
段落間が広いのにline-heightを小さくしても、思ったように余白は詰まりません。逆に、文章の行間が詰まっているのにmargin-bottomを変更しても、行同士の間隔は変わりません。
まずは、広すぎる余白が「行間」なのか「段落間」なのかを見極めましょう。
7-2. !importantを多用しない
CSSが反映されないときに、以下のように!importantを付けたくなるかもしれません。
CSS.entry-content p {
line-height: 1.8 !important;
}
!importantを使うとCSSの優先度が上がるため、反映されやすくなります。
しかし、多用すると後から修正しにくくなります。テーマやプラグインのCSSとの関係も複雑になり、別のデザイン崩れを引き起こすことがあります。
どうしても必要な場合を除き、まずはセレクタを見直して対応しましょう。
7-3. PCとスマホの見え方を両方確認する
行間を調整したら、必ずPCとスマホの両方で確認しましょう。
PCでは読みやすくても、スマホでは行間が広すぎることがあります。反対に、スマホではちょうどよくても、PCでは詰まって見えることもあります。
特にブログ記事はスマホで読まれることが多いため、スマホ表示の確認は重要です。
確認するときは、以下をチェックしましょう。
・本文が詰まりすぎていないか
・段落間が広すぎないか
・見出し前後の余白が不自然でないか
・リストや引用の行間が読みやすいか
・スクロール量が多すぎないか
7-4. 読みやすい行間の目安を知っておく
本文の行間は、1.6〜1.8程度が使いやすい目安です。
文字サイズが小さい場合は、少し広めにすると読みやすくなります。文字サイズが大きい場合は、広げすぎると間延びして見えるため、少し控えめにするとバランスが取れます。
たとえば、本文フォントサイズが16px前後なら、line-height: 1.7;あたりから試すとよいでしょう。
見出しは本文よりも行間を狭めにするのが一般的です。見出しにline-height: 1.8;を指定すると、2行になったときに余白が広すぎる場合があります。
7-5. テーマ更新やキャッシュの影響に注意する
テーマを更新したあとに、行間や余白の見え方が変わることがあります。
テーマ側のCSSが変更されたり、以前の指定が上書きされたりするためです。
また、キャッシュ系プラグインやブラウザキャッシュが残っていると、CSSを変更してもすぐに反映されないことがあります。
CSSを変更したら、以下を確認しましょう。
・ブラウザキャッシュを削除する
・キャッシュプラグインのキャッシュを削除する
・サーバーキャッシュを削除する
・スマホ実機で再読み込みする
・シークレットウィンドウで確認する
8. ワードプレスの行間が直らないときのチェックリスト
CSSを追加してもワードプレスの行間が直らない場合は、原因を順番に確認していきましょう。
やみくもにCSSを増やすより、どこで指定が効いているのかを確認する方が確実です。
8-1. キャッシュを削除する
まず確認したいのがキャッシュです。
ワードプレスでは、キャッシュプラグイン、サーバーキャッシュ、ブラウザキャッシュなどが影響して、変更前のCSSが表示され続けることがあります。
CSSを変更したら、以下のキャッシュを削除しましょう。
・キャッシュプラグインのキャッシュ
・サーバー側のキャッシュ
・CDNのキャッシュ
・ブラウザキャッシュ
また、スマホで確認する場合は、ページを再読み込みするだけでなく、別のブラウザやシークレットモードでも確認すると安心です。
8-2. CSSのセレクタが本文エリアに合っているか確認する
追加したCSSが反映されない原因として多いのが、セレクタがテーマに合っていないケースです。
たとえば、以下のCSSを追加しても、
CSS.entry-content p {
line-height: 1.8;
}
使用中のテーマが.entry-contentを使っていなければ、反映されません。
テーマによって本文エリアのクラス名は異なります。以下のようなクラスが使われている場合もあります。
CSS.post-content
.article-content
.c-entry__content
.p-entry__content
.wp-block-post-content
反映されない場合は、ブラウザの検証ツールで本文部分のHTMLを確認しましょう。
8-3. テーマやプラグインのCSSが上書きしていないか確認する
追加CSSを書いても、テーマやプラグインのCSSが後から読み込まれている場合、指定が上書きされることがあります。
また、より具体的なセレクタが使われている場合も、自分のCSSが負けることがあります。
たとえば、テーマ側で以下のようなCSSがあるとします。
CSSbody.single .entry-content p {
line-height: 2;
}
この場合、単純に以下を追加しても負ける可能性があります。
CSS.entry-content p {
line-height: 1.7;
}
その場合は、セレクタを少し具体的にします。
CSSbody.single .entry-content p {
line-height: 1.7;
}
ただし、むやみに複雑なセレクタを増やすと管理しにくくなるため、必要最小限にしましょう。
8-4. ブラウザの検証ツールで原因を確認する
原因がわからない場合は、ブラウザの検証ツールを使うと確認しやすくなります。
Google Chromeの場合は、調べたい文章の上で右クリックし、「検証」を選択します。すると、その文章にどのCSSが適用されているかを確認できます。
確認するポイントは以下です。
・本文にどのクラス名が付いているか
・line-heightがどこで指定されているか
・margin-bottomがどこで指定されているか
・自分の追加CSSが打ち消されていないか
・スマホ表示時に別のCSSが効いていないか
検証ツールを使うと、「行間が広い原因がline-heightなのか、marginなのか」が判断しやすくなります。
8-5. 変更前にバックアップを取る
CSSを編集する前には、必ず変更前の状態を保存しておきましょう。
追加CSSに書かれている内容をメモ帳などにコピーしておくだけでも、トラブル時に元に戻しやすくなります。
特に、複数のCSSを一度に追加すると、どの指定が原因で崩れたのかわかりにくくなります。
行間を調整するときは、以下の流れがおすすめです。
変更前のCSSをコピーする
1つずつCSSを追加する
PCとスマホで確認する
問題がなければ次のCSSを追加する
崩れたら直前の変更を戻す
安全に作業するためにも、一度に大きく変更しないことが大切です。
9. ワードプレスの行間調整に関するよくある質問
ここでは、ワードプレスの行間調整でよくある質問に回答します。
9-1. 行間を1記事だけ変更できますか？
はい、できます。
投稿IDを使えば、特定の記事だけ行間を変更できます。
たとえば、投稿IDが123の記事だけ本文の行間を変更する場合は、以下のCSSを使います。
CSS.postid-123 .entry-content p {
line-height: 1.8;
}
固定ページだけ変更したい場合は、page-id-123のようなクラスを使います。
CSS.page-id-123 .entry-content p {
line-height: 1.8;
}
投稿IDは、投稿編集画面のURLにあるpost=数字で確認できます。
9-2. CSSを使わずに行間を変更できますか？
テーマやブロックによっては、CSSを使わずに調整できます。
たとえば、テーマ設定に本文の行間や余白を変更する項目がある場合は、管理画面から設定できます。また、ブロックごとの余白設定があるテーマなら、エディター上で調整できることもあります。
ただし、ワードプレス標準の段落ブロックだけでは、細かい行間調整ができない場合があります。
サイト全体の本文行間を統一したい場合は、追加CSSを使う方法が確実です。
9-3. スマホ表示だけ行間が広い場合はどうすればいいですか？
スマホ表示だけ行間が広い場合は、メディアクエリを使ってスマホ用のCSSを指定します。
CSS@media screen and (max-width: 768px) {
.entry-content p {
line-height: 1.6;
margin-bottom: 0.8em;
}
}
スマホでは画面幅が狭く、1行あたりの文字数が少ないため、PCよりも行間が広く感じられることがあります。
PCとスマホで同じCSSを使うのではなく、必要に応じてスマホだけ別の数値に調整しましょう。
9-4. 改行すると余白が空きすぎるのはなぜですか？
Enterキーで改行している場合、新しい段落ブロックが作られるためです。
段落ブロックには上下の余白が設定されているため、Enterを押すたびに段落間の余白が入ります。
同じ段落内で改行したい場合は、Shift＋Enterを使います。
ただし、文章の意味が変わる場所では、Enterで段落を分けた方が読みやすくなります。見た目だけで判断せず、文章のまとまりも意識しましょう。
9-5. おすすめのline-heightの数値はどれくらいですか？
ブログ本文では、line-height: 1.6;〜1.8;程度がおすすめです。
標準的な読みやすさを重視するなら、まずは以下のCSSを試してみるとよいでしょう。
CSS.entry-content p {
line-height: 1.7;
}
ゆったり見せたい場合は1.8、少し詰めたい場合は1.6がおすすめです。
ただし、最適な数値はフォントサイズや記事幅によって変わります。PCとスマホの両方で確認しながら調整しましょう。
まとめ
ワードプレスの行間を調整するときは、まず「行間」と「段落間」の違いを理解することが大切です。
同じ段落内の行と行の間隔を変えたい場合はline-height、段落ブロック同士の余白を変えたい場合はmargin-bottomを調整します。
改行したときに余白が広すぎる場合は、Enterで段落が分かれていることが原因かもしれません。同じ段落内で改行したいときは、Shift＋Enterを使いましょう。
CSSで調整する場合は、まず以下のような指定から試すのがおすすめです。
CSS.entry-content p {
line-height: 1.7;
margin-bottom: 1em;
}
スマホだけ調整したい場合は、メディアクエリを使います。
CSS@media screen and (max-width: 768px) {
.entry-content p {
line-height: 1.6;
margin-bottom: 0.8em;
}
}
CSSが反映されない場合は、キャッシュ、セレクタ、テーマやプラグインの上書き、検証ツールでの確認を順番にチェックしましょう。
ワードプレスの行間は、少し調整するだけで記事の読みやすさが大きく変わります。本文全体、段落間、スマホ表示のバランスを見ながら、読者がストレスなく読める行間に整えていきましょう。