WordPressで記事を書いていると、
- 行間が空きすぎて読みづらい
- 改行すると余白が広すぎる
- デザインがスカスカになる
このような悩みを感じたことはありませんか？
特にブロックエディター（Gutenberg）では、段落ごとに余白が設定されているため、
改行するだけで大きな隙間ができてしまうことがあります。
この記事では、
- WordPressの行間が空きすぎる原因
- 行間を狭く詰める簡単な方法
- CSSで余白を調整する方法
を初心者でも分かるように解説します。
稼ぐためのレビューの“型”をAIが自動生成！テンプレメーカー始動
WordPressの行間が空きすぎる原因
WordPressの行間が広くなる主な原因は、段落タグ（pタグ）の余白設定です。
WordPressでは文章を書くと、基本的に以下のHTML構造になります。
<p>文章</p>
<p>文章</p>
この「pタグ」には、テーマ側で以下のようなCSSが設定されています。
p {
margin-bottom: 1.5em;
}
つまり、段落の下に余白が自動で入る仕組みになっています。
そのため改行すると、
- 行間が広くなる
- 隙間ができる
- スカスカなレイアウトになる
という状態になるのです。
ちょっと、スカスカして読みづらい記事になりますね。
方法① Shift＋Enterで改行する（最も簡単）
一番簡単な方法は、Shift＋Enterで改行することです。
通常のEnterは
- 新しい段落
- 大きな余白
になります。
しかしShift＋Enterを使うと、
- 同じ段落内で改行
- 行間が狭くなる
という違いがあります。
例
通常改行（Enter）
文章
（大きな余白）
文章
Shift＋Enter
文章
文章
ちょっとした改行なら、Shift＋Enterを使うのが最も簡単な解決方法です。
画像引用 【簡単】WordPressの行間が空きすぎ！隙間を開けずに狭く詰める方法
方法② スペーサーブロックを削除する
WordPressでは、知らない間にスペーサーブロックが入っていることがあります。
スペーサーとは、余白を作るためのブロックです。
確認方法
- ブロックをクリック
- 「スペーサー」と表示されていないか確認
- 不要なら削除
これだけで、余計な隙間が消えることがあります。
方法③ CSSで行間を調整する（おすすめ）
記事全体の行間を調整するなら、CSSで設定するのが一番おすすめです。
WordPress管理画面から
外観 → カスタマイズ → 追加CSS
p {
margin-bottom: 0.5em;
line-height: 1.6;
}
意味は次の通りです。
| CSS | 意味 |
|---|---|
| margin-bottom | 段落の下の余白 |
| line-height | 行間 |
数値を調整することで、自分好みの行間に変更できます。
例
余白をさらに詰める
p {
margin-bottom: 0.3em;
}
これで、スッキリした文章レイアウトになります。
方法④ テーマの設定を確認する
WordPressテーマによっては、行間設定が最初から用意されています。
特に次のようなテーマでは設定可能です。
特に次のようなテーマでは設定可能です。
- SWELL
- AFFINGER
- Cocoon
確認方法
外観
↓
カスタマイズ
↓
タイポグラフィ
ここで
- 行間
- 段落余白
を変更できる場合があります。
CSSを触りたくない場合は、テーマ設定をチェックするのがおすすめです。
WordPressで読みやすい行間の目安
ブログでおすすめの行間は次の通りです。
| 項目 | おすすめ |
|---|---|
| line-height | 1.6〜1.9 |
| 段落余白 | 0.5〜1em |
行間が狭すぎると
- 読みにくい
- 圧迫感がある
逆に広すぎると
- スカスカ
- スマホで読みづらい
適度な余白を意識すると、読者に優しいブログになります。
まとめ｜読者に読みやすい行間でアクセスアップ！
WordPressの行間が空きすぎる場合は、次の方法で解決できます。
- Shift＋Enterで改行する
- スペーサーブロックを削除する
- CSSで余白を調整する
- テーマ設定を確認する
特におすすめなのは、CSSで段落の余白を調整する方法です。
少し設定を変えるだけで、記事の読みやすさは大きく変わります。
ぜひ今回紹介した方法を試して、
スッキリした読みやすいブログ記事を作ってみてください。
