WordPressで行間を詰める方法と開ける方法を徹底解説します

WordPressで記事を書いていて「行間がスカスカだな」「逆にギュッと詰まりすぎて読みにくいな」と感じたことはありませんか。

この記事では、WordPressで行間を詰めるとき、そしてワードプレスの行間を開けるときに使える具体的な方法を、できるだけ専門用語を避けながら説明していきます。

WordPressで行間を詰める・開けるときの全体像

文章の「行間」と「段落の余白」の違いをざっくり整理

行間調整でよくあるのが、「行と行のスキマ」と「段落と段落のスキマ」をごちゃまぜにしてしまうパターンです。この2つは、見た目は似ていますが、実際には別の設定で動いています。

イメージしやすいようにまとめると、次のような感じです。

項目	どこのスキマか	主に効く設定	典型的な例
行間（line-height）	同じ段落の1行目と2行目の間	line-height	1行1行がびっしり詰まって見える、またはスカスカに見える
段落の余白（margin）	段落と段落の間	margin-top / margin-bottom	段落ごとの間隔が広すぎて、縦に間延びして見える
内側の余白（padding）	枠の内側のスキマ	padding	ボックスや吹き出し内の文字が枠にぴったりくっついてしまう

WordPressで行間を詰める、あるいはワードプレスの行間を開けるときは、「行の中を調整したいのか」「段落同士の距離を変えたいのか」を切り分けるところから始めると、迷いにくくなります。

なぜ行間調整が読みやすさやSEOにも効いてくるのか

行間や段落の余白は、見た目の好みだけでなく、読者の読みやすさにも直結します。行間が狭すぎると、文字のかたまりに見えてしまい「読む前から疲れそう」と感じられがちです。逆に、行間や段落の余白を開けすぎると、スクロール量が増えて途中離脱のきっかけになります。

結果として、ページの滞在時間や読了率、内部リンクのクリック率などにも影響し、それが間接的にSEOの評価にもつながってきます。行間調整は「おしゃれのための微調整」ではなく、「最後まで読んでもらうための仕掛け」と考えるとイメージしやすいと思います。

この記事でやる「行間を詰める／開ける」の優先順位

これから紹介する内容の優先順位は、次のようなイメージです。

• まずは改行（Enter／Shift+Enter）の使い方を整える
• 次にブロックエディターやテーマの設定で行間・余白を調整する
• それでも足りない部分だけCSSで細かく微調整する

いきなりCSSに飛びつくより、WordPress本体やテーマがもともと持っている機能でどこまで行間を詰める・開けるか試してみた方が、トラブルも少なく保守もしやすくなります。

改行と段落を理解してWordPressの行間をコントロールする

EnterとShift+Enterで行間がどう変わるか

ブロックエディターの段落ブロックで、普通にEnterキーを押すと、新しい段落が作られます。すると段落と段落の間に、テーマが用意しているだけの余白が自動で入ります。

一方、Shiftキーを押しながらEnterを押すと、同じ段落のまま下の行に移動します。このときは新しい段落にはならないので、段落同士の大きなスキマは入らず、「行間だけ少し詰まった状態」で改行されます。

ざっくりまとめると、次のような使い分けになります。

• Enterだけ：段落を区切るときに使う。段落同士の余白がしっかり入る。
• Shift+Enter：同じ段落の中で行を変えたいときに使う。行間だけ短くなる。

プロフィールの住所や略歴を縦に並べたいときなど、全部をEnterだけで改行するとスカスカになりがちです。そういうときは、1つの段落の中でShift+Enterを使って行間を少し詰めてあげると、読みやすさがぐっと変わります。

ブロックエディターのスペーサーで段落間を開ける

逆に「ここは少し間を空けて、流れを切りたい」という場面もあります。そんなときに便利なのが、ブロックエディターにある「スペーサー」ブロックです。

スペーサーブロックは、その名の通り「空白だけが入るブロック」で、高さをスライダーなどで自由に調整できます。

• 見出し直下にちょっとだけ余裕を持たせたい
• ボタンの上下だけ余白を多めに取りたい
• 画像と本文の距離を少し離したい

こういった場所にスペーサーを1つ挟むだけで、「ここで内容が切り替わる」というのが視覚的に伝わり、ワードプレスの行間を開ける効果が出ます。

ただし、スペーサーを乱発すると「どこにいくつ入っているのか」が分からなくなりやすく、全体の整合性も取りづらくなります。あくまで「部分的な微調整用」と割り切って使うのがおすすめです。

箇条書き・見出し周りの行間を整えるコツ

箇条書きや見出しは、読者の視線がよく止まるポイントなので、行間や余白の違和感が特に目立ちます。

• 箇条書きの1行を詰め込みすぎず、適度な長さで改行する
• 見出し直後は、1行分くらい余白を作ってから本文を始める
• 見出しの上下の余白は、本文同士の余白より少し広めにする

このあたりを意識するだけでも、WordPressの行間が整って見え、読みやすさがぐっと上がります。

テーマ設定だけでワードプレスの行間を開ける・詰める方法

テーマカスタマイザーで行間や行の高さを変更する流れ

多くのテーマには、「フォントサイズ」や「行の高さ（line-height）」「段落の余白」などをまとめて調整できる項目があります。

大まかな流れは次の通りです。

• 管理画面の「外観」→「カスタマイズ」を開く
• 「タイポグラフィ」「デザイン」「本文レイアウト」などの項目を探す
• 本文テキストや見出しテキストに対する行の高さや余白の設定があれば、そこで数値を少しずつ調整する

このとき、いきなり極端な数値に変えるのではなく、少し動かしてはプレビューで確認する、を繰り返すのが安全です。わずかな違いでも、スマホで見ると印象が大きく変わることがあります。

よくある国産テーマでの行間まわりの設定ポイント

国産テーマや有料テーマでは、行間や余白をいじるための独自機能が用意されていることも多いです。

• 本文や見出しごとに「行の高さ」を調整できる
• 段落の上下マージンをスライダーで設定できる
• ブロックごとの「下の余白量」を「小・中・大」といった単位で選べる

こうした項目があれば、まずはそこを使って、ワードプレスの行間を開ける・詰める調整を試してみましょう。名前はテーマごとに違いますが、「line-height」「行の高さ」「段落の余白」「ブロック下の余白」などの言葉が手がかりになります。

テーマ更新で行間が変わったときのチェック表

テーマをアップデートしたあとに「なんだか行間が変わった気がする」ということもあります。そんなときは、原因を切り分けるために、次のチェック表を順に見ていくと整理しやすいです。

チェック項目	見る場所	確認のポイント
テーマのタイポグラフィ設定	外観 → カスタマイズ	行の高さや段落の余白の初期値が変わっていないか
追加CSS	外観 → カスタマイズ → 追加CSS	line-heightやmarginをテーマの値とは別に上書きしていないか
子テーマのCSS	子テーマのstyle.css	親テーマの更新内容とぶつかる指定が残っていないか
プラグインのスタイル	プラグインの設定画面や説明	ブロック追加系プラグインが独自の行間設定を当てていないか

アップデートのたびに、ざっとこれらをチェックしておくだけでも、WordPressの行間が急に変わってしまうトラブルはかなり防げます。

CSSでサイト全体の行間を一括で調整する

line-heightで「1行の中の行間」を詰める・開ける

CSSで行間と聞いて、まず出てくるのがline-heightです。これは文字の高さを何倍にするかを指定するプロパティで、「行と行の間隔をどれくらい空けるか」の目安になります。

例えば、本文を包んでいるクラスに対して、次のようなイメージで指定します。

例）
main-contentの中の段落に対して行間を指定する場合

main-content内のpにline-height: 1.7;を指定すると、「本文の行間をフォントサイズの1.7倍にする」という意味になります。数字を小さくすれば行間が詰まり、大きくすれば行間が広くなります。

• 1.2〜1.4くらい：かなり詰まった印象になり、文字量が多いと息苦しくなりがち
• 1.5〜1.8くらい：ブログやコラムで読みやすいと感じる人が多いゾーン
• 2.0以上：ゆったりとした印象になるが、縦に長くなりやすい

WordPressで行間を詰めるなら1.3〜1.5前後、ワードプレスの行間を開けるなら1.6〜1.8あたりを目安に、サイトの雰囲気やターゲット読者に合わせて調整してみるとよいと思います。

marginとpaddingで「段落同士のスキマ」を整える

段落と段落の間が広すぎる、または狭すぎると感じるときは、marginとpaddingの出番です。それぞれ役割が違うので、ざっくり押さえておきましょう。

プロパティ	スキマの場所	よく使う用途
margin	ボックスの外側の余白	段落同士、見出しと本文の距離を調整する
padding	ボックスの内側の余白	吹き出しやボックス内の文字を枠から離す

例えば「段落と段落のスキマを少し狭めたい」というときは、本文のpに対してmargin-bottomを指定します。数字を変えながら、PCとスマホの両方で見てバランスを取っていくイメージです。

スマホだけWordPressの行間を変えたいときの考え方

スマホ表示では、PCより文字が小さく、1行あたりの文字数も減ります。そのため、同じline-heightでも、スマホでは詰まって見えたり、逆に間延びして見えたりすることがあります。

そんなときは、「一定の画面幅以下なら、行間や余白の値を少し変える」といったスマホ用のCSSを追加するイメージで考えると分かりやすいです。

• 本文テキストは、スマホでは行間をほんの少し広めにする
• 見出しの文字サイズは、スマホではやや小さく、行の高さも合わせて調整する
• 段落間のmargin-bottomは、スマホでは少しだけ小さめにする

このような調整をしておくと、パソコンでもスマホでも極端に読みづらくならず、ワードプレスの行間を開ける・詰めるバランスを端末ごとに最適化しやすくなります。

WordPressの行間を詰めるときにやりがちなNG例

Enter連打で余白を作るのはなぜ危険か

「ここはちょっと間を空けたいな」と思ったときに、なんとなくEnterキーを何回も押して空白行を作るやり方、やったことがある方も多いと思います。私も以前はつい楽をして、よく多用していました。

ただ、この方法にはデメリットが多いです。

• どの場所で何回Enterを入れたのか、あとから自分でも分からなくなる
• スマホとPCで空き具合が変わり、デザインが崩れて見えることがある
• テーマやエディターが変わったときに、空白行の見え方が変わってしまう

行間や段落の余白は、できるだけCSSやブロックの設定で管理した方が、長期的に見ると圧倒的に楽です。

brタグを多用してしまう問題

HTML上で<br>タグをどんどん足して、無理やり行間を調整してしまうケースもよくあります。部分的に使うだけならまだしも、全体のレイアウトを<br>で整えはじめると、一気に管理しづらくなります。

• 途中の行だけ微妙に高さがズレてしまう
• 別の記事からコピペしたときに<br>が混ざり、整え直すのが面倒になる
• テーマを入れ替えたときに、思わぬレイアウト崩れの原因になる

どうしてもWordPressで行間を詰める必要がある一部分だけなら<br>を使うのもありですが、サイト全体の見た目を<br>頼みで調整するのは避けた方が無難です。

プラグインやテーマを重ねすぎて行間がぐちゃぐちゃになるパターン

行間や余白をいじれる便利なプラグインや、ブロックを追加するプラグインを次々に導入していくと、いつの間にかCSS同士がぶつかって「どこが何をしているのか分からない」状態になりがちです。

症状	よくある原因	対処の方向性
ページによって行間の広さがバラバラ	一部だけ別のブロックやショートコードを使っている	どのブロックがどんなCSSを持っているか整理し、できるだけ統一する
特定のプラグインのブロックだけ行間が詰まりすぎ	プラグイン側のCSSでline-heightが強く指定されている	プラグインの設定や追加CSSで上書きできるか確認する
テーマを変えたら全体の行間が崩れた	旧テーマ前提のカスタマイズがそのまま残っている	子テーマや追加CSSを見直し、不要な上書きを片付ける

新しいプラグインやテーマを入れるときは、「この子は行間や余白にどんなCSSを当ててくるのか」を一度確認してから導入すると、ワードプレスの行間を開ける・詰める調整で悩む時間をかなり減らせます。

読みやすい行間にするための具体的な数値目安とチェックリスト

本文・見出し・リストの行間バランスの目安

行間は本文だけを見ても決まりません。見出しやリストも含めて「セットでどう見えるか」を見ると、調整しやすくなります。

要素	line-heightの目安	ポイント
本文テキスト（p）	1.6〜1.8	読み物系の記事で、多くの人が読みやすいと感じやすいゾーン
小見出し（h2〜h3）	1.3〜1.5	文字サイズが大きいので、少し詰め気味でも読みやすい
リスト（ul, olのli）	1.6前後	本文と同じか、少しだけ詰めるくらいがバランスを取りやすい
ボタン内テキスト	1.2〜1.4	行間が広すぎるとボタンが縦に伸びすぎるので控えめに

まずは本文のline-heightを決め、その後に見出しやリストを相対的に調整していくと、WordPressで行間を詰める・開けるときのバランスが取りやすくなります。

ブログ・LPなど目的別におすすめの行間イメージ

サイトの目的によっても、「ちょうどいい行間」の感覚は少し変わります。ざっくりしたイメージを表にすると、次のようになります。

サイトのタイプ	行間のイメージ	おすすめの考え方
情報ブログ・コラム	ややゆったりめ	長文が続くので、行間を少し広めにして読むストレスを減らす
商品LP・セールスページ	やや詰め気味	テンポよく読ませたいので、詰めすぎない範囲で行間を抑える
ポートフォリオ・ブランドサイト	メリハリ重視	本文は標準〜やや広め、見出しやキャッチは少し詰めるなど強弱を付ける
マニュアル・ヘルプページ	標準〜やや広め	説明文が多いので、詰めすぎず落ち着いて読める行間を意識する

ワードプレスの行間を開けるか、逆に詰めるか迷ったときは、「読者にどんなテンポで読んでほしいか」を基準に考えると決めやすいです。

私が案件でチェックしている行間チェックリスト

最後に、私が実際にサイトをチェックするときに見ているポイントを、チェックリストとしてまとめます。

このあたりを一度見直すだけでも、WordPressで行間を詰める・ワードプレスの行間を開ける調整の精度は一気に上がります。

よくある質問：WordPressで行間を詰める・ワードプレスで行間を開けるときの疑問

Q1. WordPressの行間を詰めるとき、Shift+Enterだけで対応しても大丈夫ですか？

A. 部分的な調整に使う分には問題ありませんが、「全部それでやる」のはあまりおすすめしません。

Shift+Enterを使うと、確かにWordPressで行間を詰めることはできます。ただ、多用すると「どこが段落で、どこが行間の微調整なのか」が見分けづらくなり、あとから編集するときに混乱のもとになります。

おすすめは次のようなルールです。

• 文章のまとまりを分けたいときは普通のEnterで段落を分ける
• 1つの段落の中で、住所や肩書きなどを縦に並べたいときだけShift+Enterを使う

この程度にとどめておくと、後から見返したときにも構造が分かりやすく、修正も楽になります。

Q2. ワードプレスの行間を開けるとき、スペーサーブロックとCSSどちらを使えばいいですか？

A. 基本の考え方は、「全体のルールはCSS」「例外的な調整はスペーサー」です。

それぞれ向いている用途を整理すると、次のようになります。

方法	向いている用途	メリット	デメリット
CSSで行間・余白を調整	サイト全体の行間ルールを決めたいとき	一括で管理でき、デザインの統一感が出る	CSSに慣れていないと少しハードルが高い
スペーサーブロック	特定のセクションだけ余白を増やしたいとき	見た目を確認しながら高さを調整しやすい	多用するとどこにいくつ入っているか把握しづらい

ワードプレスの行間を開ける基本設計はCSSやテーマ設定で決めておき、その上で「ここだけもう少し間を取りたい」という場所にスペーサーを使う、というイメージで使い分けると、あとから崩れにくくなります。

Q3. テーマを変えたら行間が大きく変わりました。どこから手を付ければいいですか？

A. まずは「新しいテーマの標準値を知る」ところから始めるのがおすすめです。

テーマごとに、本文や見出しのline-height、段落間の余白の初期設定が違います。余計なカスタマイズをする前に、何も追加していない状態で次のあたりを確認してみてください。

• 本文テキストのline-heightがどれくらいになっているか
• 段落と段落の間のmarginがどのくらいか
• 見出しの上下の余白が、本文と比べてどうか

その上で、追加CSSや子テーマのCSSを使って、WordPressの行間を詰める・ワードプレスの行間を開ける調整を行っていくと、迷いにくくなります。

まとめ：今日からできるWordPressの行間調整の一歩

ここまでの内容を整理します

今日からできる最初の一歩としては、まず自分のサイトをスマホで開き、本文・見出し・箇条書きの行間を眺めながら「読みにくい」と感じるところをメモしてみてください。

そのメモをもとに、改行の使い方を見直し、テーマのタイポグラフィ設定をチェックし、必要であればCSSでline-heightやmarginを少しだけ調整していく。この三段階で少しずつ手を入れていけば、あなたのWordPressサイトの読み心地は、確実に今より良くなっていきます。