WordPressで改行しても反映されない？空白行が消える原因と解決方法

• コピーしました

空白行が消える原因と解決方法【クラシックエディタ対応】

WordPressで記事を書いていて、「改行を入れたのに反映されない」「空白行が詰まってしまう」という経験はありませんか？

 

多くの初心者が最初に戸惑うポイントで、文章を整えていたはずなのに公開後にはすべて詰まって表示されてしまうことがあります。

 

とくにクラシックエディタを使っている場合、プレビューではきれいに整って見えていたのに、更新ボタンを押すと空白が消えてしまい、意図したレイアウトが崩れてしまうというケースが頻発します。

 

こうした現象はWordPress特有の仕様や自動整形機能によるもので、単なる入力ミスではありません。対策を知らないと何度修正しても元に戻ってしまうため、非常にストレスを感じる人も多いでしょう。

 

本記事では、なぜこうした現象が起きるのか、その仕組みと背景を丁寧に解説しながら、確実に空白行を維持するための具体的な設定方法と実践的なテクニックを紹介します。

 

WordPress初心者の方はもちろん、すでに運営中の方も一度チェックしておくと今後の記事作成が格段にスムーズになります。

なぜ空白行が消えるのか？WordPressの自動整形（wpautop）の仕組み

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

 

この機能は、記事内のテキストに自動的に段落（タグ）や改行（タグ）を挿入し、整ったHTML構造にするためのものです。つまり、書き手がHTMLを知らなくてもきれいに整形されたページを生成できるように設計された、便利な自動補助機能です。

 

しかしその裏側では、WordPressが「どの行を段落として認識するか」「どの部分を不要な空白とみなすか」を自動的に判断しており、その過程で意図しないタグ削除や整形が起きることがあります。

 

特に空白だけの行は、WordPress側で「無意味なスペース」と判断され、自動的に削除されてしまうのです。結果として、編集画面でしっかり改行を入れても、保存後にはその空白がなくなってしまう現象が発生します。

 

また、テーマやプラグインのCSS設定によっては、段落間の余白（marginやline-height）がゼロ、または極端に狭く設定されている場合があります。

 

たとえば、ブログデザインをスッキリ見せるためにmargin-bottom: 0; が指定されているテーマでは、段落と段落の間に余白がほとんどなくなります。

 

見た目上は改行が消えたように見えてしまいますが、実際にはHTML上に段落タグは存在している、ということも多いです。

 

このように、見た目の"詰まり"は、WordPressの自動整形機能とCSSの双方が関係していることが多く、単純なバグではありません。

 

仕組みを理解することで、どこを修正すべきか（HTML側か、CSS側か）を正しく判断できるようになります。

改行や空白行を維持する4つの解決方法

ビジュアルエディタで正しく改行する

クラシックエディタのビジュアルモードでは、改行の方法によって動作が異なります。

 

多くの人が「Enter」を押すだけで段落を作ろうとしますが、WordPressではこの操作によって段落タグ（）が自動的に挿入される仕組みです。つまり、単純な改行ではなく、ひとつの段落を終了し新しい段落を始める命令になっています。

 

見た目には大きな余白ができるため、意図したより広い空白が生まれることもあります。

• Shift + Enter → 改行（）が挿入される（1行分の余白）
• Enterのみ → 段落（）が挿入される（段落間の余白）

もしビジュアル上で改行が反映されない場合は、「Shift＋Enter」で改行するのが最も簡単で確実です。

 

また、見出しやリストの直後など特定のブロックでは自動整形の挙動が異なるため、実際のプレビューを確認しながら微調整するのがおすすめです。慣れてくると、Shift + Enter のタイミングを意識するだけで全体の可読性が大きく向上します。

 

テキストエディタでHTMLタグを使う

確実に空白行を入れたい場合は、テキストエディタ（HTMLモード）で以下のように入力します。

<p> </p>
または

<br>

 

この方法で入力すれば、WordPressが自動整形しても空白行を削除することはありません。

 

もし2行以上の空白を作りたい場合は、タグを連続して入力するか、CSSで追加のマージンを指定する方法もあります。

 

ポイント：テキストモードで設定した後にビジュアルモードへ戻すと、再整形されて消える可能性があるため注意。編集後はそのまま更新するのが安全です。

 

コードを扱うのに抵抗がある方でも、この方法を覚えておくと細かいレイアウト調整に役立ちます。

プラグイン「Advanced Editor Tools」を活用する

旧TinyMCE Advancedとして知られる「Advanced Editor Tools」を使えば、エディタ設定を細かくカスタマイズできます。

 

プラグインを導入すると、ボタン配置や改行動作の制御が可能になり、WordPress標準エディタよりも自由度が高まります。

 

設定画面で以下の項目を有効化します。

• ✅ 「段落タグ（）を保持」
• ✅ 「改行タグ（）を自動で削除しない」

この設定を行うことで、WordPressが自動的にタグを削除するのを防げます。

 

また、ツールバーをカスタマイズして「段落」「改行」などの操作を明示的に切り替えることも可能です。複数人で記事を編集する場合や、エディタに慣れていないライターがいる場合にも有効な方法です。

CSSで段落や行間を調整する

テーマやCSSで段落の余白を調整するのも有効です。見た目の問題はCSSによって簡単にコントロールできます。

p {
  margin-bottom: 1.2em;
  line-height: 1.8;
}

このように指定すれば、段落間に一定の余白ができ、ビジュアル上の「詰まり感」が解消されます。

 

もし見出しタグ（h2, h3など）との間隔が狭い場合は、それぞれのタグに対して個別のmargin値を設定すると、より自然で読みやすいバランスを作ることができます。

 

CSSを子テーマで編集しておけば、テーマ更新時にも設定が維持されるためおすすめです。

確実に空白行を維持するおすすめ設定

- テキストエディタで `<p> </p>` を使う（空白行を完全に固定する最も確実な方法です。WordPressの自動整形が働いてもこの記述は削除されません）

 

• エディタ切り替えを最小限にする（ビジュアル⇔テキストの往復を避けることで、タグの再整形による消失を防ぎます。修正が必要なときはテキストモードで一括処理がおすすめです）
• Advanced Editor Toolsで段落設定を固定する（パラグラフタグ保持機能をONにし、不要な整形を防止します。ツールバーの設定をカスタマイズして作業効率も向上させましょう）
• CSSで余白を明示的に指定する（p { margin-bottom: 1.5em; } のように指定することでテーマ依存を減らし、デザイン変更時にも安定した表示を維持できます）
• 必要に応じて、functions.phpでwpautopを制御（上級者向け。自動整形を部分的に無効化する方法もあります）

 

これらを組み合わせることで、記事全体の見やすさと構造を安定的に保つことができます。

 

さらに、余白のバランスを一定に保つことで読者がストレスなく文章を追えるようになり、結果的に滞在時間や直帰率の改善にもつながります。

 

ビジュアル的な整え方だけでなく、編集段階での再現性を重視することが、長期的なブログ運営ではとても重要です。

よくある質問（FAQ）

Q1. Gutenbergエディタでも同じ問題は起きますか？

 

Gutenbergでは自動整形機能が改良されていますが、ブロック間で意図しない余白ができることがあります。

 

特に段落ブロックとカスタムHTMLブロックを組み合わせる場合や、リストブロックの後にテキストを入れる場合に余白のばらつきが発生しやすいです。

 

これらはCSSでmarginやpaddingを調整することでほとんど解決可能です。また、ブロック間の余白設定を明示的に指定することで見た目の統一性が向上します。

 

Q2. テーマ変更後に改行が崩れるのはなぜ？

 

テーマごとに段落のmargin指定が異なるためです。

 

デザインテーマによっては、段落や見出しの間隔をコンパクトにするためのスタイルが上書きされ、意図した余白が消えることがあります。

 

CSSの上書き（例えばp { margin-bottom: 1.5em; }など）で調整するのが基本ですが、場合によってはテーマカスタマイザーで直接設定できることもあります。

 

子テーマを作成し、そこに独自のstyle.cssを追加しておくと、テーマ更新時の影響を防げます。

 

Q3. 自動整形を完全に無効化できますか？

 

functions.phpにフィルタを追加すれば可能ですが、初心者には非推奨です。

 

自動整形を完全に無効化すると、段落や改行タグがまったく自動生成されなくなり、HTML構造が崩れやすくなります。

 

どうしても制御したい場合は、remove_filter('the_content', 'wpautop');を使い、特定の投稿タイプや条件下でのみ無効化するのが安全です。

 

プラグイン（例えば「Advanced Editor Tools」の設定内で自動整形を制御する、または「Code Snippets」などでカスタムコードを管理する）を使って管理する方が、リスクを抑えつつ柔軟に運用できます。

 

また、子テーマを活用して関数を切り替えれば、元に戻すことも容易です。

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

空白行や改行の設定は、読者の視認性や滞在時間に直結します。「空白がある＝読みやすい構成」と覚えておきましょう。

 

文章の途中に適度なスペースを設けることで、読者は内容をブロックごとに理解しやすくなり、集中力を保ちやすくなります。

 

特にスマートフォンでの閲覧では、行間や余白が狭すぎると可読性が大きく損なわれるため、デザイン面での工夫も重要です。

 

また、WordPressでは自動整形の影響で見た目が崩れることがありますが、その仕組みを理解していれば怖くありません。

 

今回紹介した HTML・プラグイン・CSS の3つの方法を組み合わせることで、どんなテーマでも安定して見やすい記事を作成できます。

 

さらに、これらの手法は単なる見た目の改善にとどまらず、ユーザー体験の向上やSEO評価の強化にもつながります。空白や余白を「デザインの一部」として意識的に配置することで、プロのようなレイアウトが実現できるでしょう。

 

 

• コピーしました