WordPress

改行しても反映されない？WordPressの空白行が消える理由と直し方

目安時間 14分

コピーしました

WordPressで「改行したのに反映されない」「空白行が詰まって表示される」と悩んだことはありませんか。

これは入力ミスではなく、WordPressの自動整形機能（wpautop）やテーマのCSS設定が原因で起きる自然な現象です。

この記事では、なぜ改行が消えるのかを仕組みから解説し、確実に空白行を維持するための具体的な対策を紹介します。

クラシックエディタ・Gutenbergの両方に対応しており、プラグイン・CSS・HTMLそれぞれの方法を詳しく解説。

この記事を読めば、どんなテーマでも思い通りのレイアウトを実現できるようになります。

WordPressで改行が反映されないのはなぜ？

WordPressで記事を書いていると、編集画面ではきれいに改行されているのに、公開後にはすべて詰まって見えることがあります。

これは多くの初心者が最初につまずくポイントで、原因を理解していないと何度修正しても元に戻ってしまいます。

ここでは、なぜ改行が反映されないのか、その仕組みをわかりやすく解説します。

自動整形機能「wpautop」とは？

WordPressには「wpautop」という自動整形機能が備わっています。

これは、記事中のテキストに自動的に段落（pタグ）や改行（brタグ）を挿入し、整ったHTML構造を作るための仕組みです。

HTMLを知らない人でも整ったページを作れる便利な機能ですが、裏ではWordPressが「どの行を段落と認識するか」を自動判断しています。

そのため、意図しない箇所でタグを削除したり、余分な空白を除去してしまうことがあるのです。

動作	WordPressの判断
空白だけの行	不要とみなし削除
通常の改行	段落（pタグ）として整形
Shift＋Enterの改行	改行（brタグ）として保持

特に空白だけの行は「意味がない」と判断され削除されるため、見た目の空白が消えることがあります。

空白行が削除される仕組みと原因

WordPressの自動整形に加え、テーマのCSS設定も関係します。

テーマ側で段落間の余白（margin-bottom）が「0」や「極端に狭い値」に設定されている場合、実際にはpタグがあっても見た目には詰まって見えることがあります。

たとえば以下のようなCSS指定です。

CSS設定例	見た目の影響
p { margin-bottom: 0; }	段落間の余白が消える
line-height: 1.0;	行間が狭くなり詰まって見える

つまり、「HTML上の改行が消えている」のではなく「CSSで余白が消えている」ことも多いのです。

見た目が崩れた場合は、HTML構造とCSSの両方を確認することが重要です。

クラシックエディタで改行を維持する基本テクニック

クラシックエディタを使っている場合、改行の仕方によって見た目が大きく変わります。

正しい方法を知っておくことで、空白行を自在にコントロールできるようになります。

Shift＋EnterとEnterの違い

ビジュアルモードでは、Enterを押すと段落（pタグ）が作られ、Shift＋Enterを押すと改行（brタグ）が入ります。

この違いを理解しておくと、思い通りの余白を作れます。

操作方法	挿入されるタグ	見た目の違い
Enter	<p></p>	段落の余白が入る
Shift＋Enter	<br>	1行分の改行

ビジュアル上で改行が反映されないときは、Shift＋Enterで改行するのが最も確実です。

また、見出しやリストの直後などでは自動整形が異なるため、プレビューで確認しながら調整しましょう。

テキストモードでの改行タグ入力方法

テキスト（HTML）モードで編集する場合、空白行を固定したいときは次のように入力します。

この記述であれば、WordPressが自動整形しても削除されません。

2行以上の空白を作りたい場合は、brタグを複数挿入するかCSSでmarginを設定します。

方法	効果
<br>を2つ入れる	2行分の空白
pタグで空白を入れる	確実に保持される

編集後にビジュアルモードへ戻すと再整形で消える場合があるため、テキストモードのまま更新するのが安全です。

空白行が消えるときの効果的な対処法4選

WordPressで改行や空白行がうまく反映されないとき、いくつかの具体的な解決策があります。

ここでは、初心者でも実践できる確実な4つの方法を紹介します。

この章を読めば、どんなテーマでも安定して空白を維持できるようになります。

「Advanced Editor Tools」プラグインを使う

旧TinyMCE Advancedとして知られる「Advanced Editor Tools」は、クラシックエディタを使う人に特におすすめのプラグインです。

このプラグインを導入すると、段落タグの保持や改行タグの削除防止を設定でき、WordPress標準よりも自由度が高まります。

設定項目	内容
「段落タグ（p）を保持」	空白行が削除されるのを防ぐ
「改行タグ（br）を削除しない」	意図した改行を維持

さらに、ツールバーをカスタマイズして「段落」「改行」などの操作を切り替えるボタンを追加することも可能です。

複数人で記事を編集するサイトでは、統一した設定で空白の崩れを防げます。

CSSで余白を調整する

見た目上の「空白が消えたように見える」問題は、実際にはCSSの余白設定が原因であることも多いです。

テーマや子テーマのstyle.cssに、以下のようなコードを追記してみましょう。

CSSコード例	効果
p { margin-bottom: 1.5em; line-height: 1.8; }	段落間に適度な空白を作る
h2, h3 { margin-top: 1.8em; }	見出しとの間隔を調整

特に、margin-bottomを設定しておくと、テーマ変更時にもデザインが安定します。

CSSを子テーマに書いておけば、テーマ更新の影響も受けません。

エディタ切り替えを最小限にする

クラシックエディタでは、ビジュアルモードとテキストモードの往復が空白行消失の原因になることがあります。

テキストモードで設定したタグが、ビジュアルモードに戻った際にWordPressの自動整形で削除されることがあるためです。

基本的に、一度HTMLを調整したらそのまま更新するのが安全です。

操作	リスク
ビジュアル→テキスト→ビジュアル	空白行の再整形（消失）
テキストで編集→そのまま更新	空白が保持される

編集はテキストモードで完結させるのがもっとも安全な運用方法です。

functions.phpでwpautopを制御する（上級者向け）

WordPressの自動整形機能「wpautop」を、特定条件下で無効化する方法です。

functions.phpに以下のようなコードを追記することで、記事本文のみに整形を適用・解除できます。

コード例	動作
remove_filter('the_content', 'wpautop');	投稿本文で自動整形を無効化
add_filter('the_content', 'wpautop');	再度有効化

ただし、完全に無効化するとHTML構造が崩れるリスクがあるため、初心者はプラグインでの管理をおすすめします。

テーマ変更やGutenbergで改行が崩れるときのチェックポイント

テーマを変更したり、ブロックエディタ（Gutenberg）に切り替えた際に改行が崩れるケースもあります。

ここでは、その原因と解決策を見ていきましょう。

Gutenbergで余白が反映されない原因

Gutenbergでは、ブロック間の余白設定がテーマやCSSによって左右されます。

特に段落ブロックとカスタムHTMLブロックを組み合わせると、意図しないスペースができたり詰まったりすることがあります。

現象	主な原因
ブロック間の余白が狭い	テーマのmargin設定
リストとテキストの間が広すぎる	ブロック構造の違い

これらは、Gutenbergの設定画面から「ブロック間の余白」を明示的に指定するか、CSSでmarginを調整することで解決できます。

余白をCSSで固定することで、テーマ変更時にも安定した表示が可能になります。

テーマのCSS設定を見直す方法

テーマによっては、余白を最小限に設定してデザインを引き締めている場合があります。

そのため、テーマを変更すると段落や見出し間の距離が変化してしまうことがあるのです。

対処方法	ポイント
p { margin-bottom: 1.5em; }	段落間の空白を一定に保つ
h2, h3 に margin-top を追加	見出し前後の余白を調整

子テーマにCSSを追加すれば、更新時にも設定が維持されます。

直接テーマのstyle.cssを書き換えるのはNGです。アップデート時に上書きされるため、必ず子テーマか「追加CSS」機能を使いましょう。

よくある質問（FAQ）

ここでは、WordPressの改行や空白行に関してよくある質問をまとめました。

初心者の方がつまずきやすいポイントを中心に、実践的な回答を紹介します。

Gutenbergとクラシックエディタの違いは？

Gutenberg（ブロックエディタ）は、1つひとつの段落や画像などを「ブロック」として管理する仕組みです。

そのため、クラシックエディタに比べて自動整形機能が改良され、余白が安定しやすい傾向にあります。

ただし、ブロック間の余白がテーマ依存になるため、見た目を統一するにはCSSでmarginを明示的に指定するのがおすすめです。

項目	クラシックエディタ	Gutenberg
改行の扱い	wpautopが強く影響	ブロックごとに制御
空白行の維持	pタグが削除される場合あり	比較的安定
編集の自由度	HTMLを直接編集可能	UIで調整

つまり、Gutenbergでは視覚的に余白を確認しながら調整できるため、初心者には扱いやすいエディタと言えます。

自動整形を完全に無効化しても大丈夫？

functions.phpで「remove_filter('the_content', 'wpautop');」を追加すれば、自動整形を無効化できます。

しかし、完全な無効化はおすすめしません。

なぜなら、すべての改行や段落を手動でHTML入力しなければならず、記事構造が崩れやすくなるためです。

設定方法	メリット	デメリット
wpautopを無効化	自動整形が入らない	全て手動でタグ挿入が必要
プラグインで制御	柔軟にON/OFF可能	多少の管理手間

最も安全なのは、Advanced Editor Toolsなどのプラグインを活用して整形を部分的に制御する方法です。

こうすることで、整形の安定性を保ちながら自由なレイアウトを維持できます。

まとめ｜空白行を自在にコントロールして読みやすい記事に

WordPressで改行や空白行が反映されない問題は、仕様やCSS設定によって起きる自然な現象です。

仕組みを理解すれば、焦らず正しく対処できます。

原因	主な対策
wpautopによる自動整形	Advanced Editor Toolsで制御
CSSの余白設定	margin・line-heightを指定
エディタ切り替え	テキストモードで完結
テーマ変更の影響	子テーマでCSSを固定