WordPressの改行ができない原因と解決方法を徹底解説
WordPressで記事を書いていると、「改行したはずなのに反映されない」「余白が大きすぎる」といった経験はありませんか。実はこの悩み、WordPress初心者だけでなく、ある程度経験を積んだブロガーでも頻繁に直面する問題です。
個人的な経験では、WordPressの改行の仕組みを正しく理解するだけで、記事の見た目が劇的に改善され、読者の滞在時間にも良い影響が出ると感じています。改行と段落の違いを把握し、適切に使い分けることが、読みやすいブログ記事を作る第一歩です。
この記事で学べること
- WordPressの改行（Shift+Enter）と段落（Enter）は生成されるHTMLタグが根本的に異なる
- 改行が消える原因の約9割はWordPressの自動整形機能「wpautop」にある
- ブロックエディタとクラシックエディタで改行の挙動が大きく違う
- CSSの1行追加で改行の余白問題を即座に解決できる
- スペーサーブロックを活用すれば思い通りの余白設計が可能になる
WordPressの改行と段落の違いを正しく理解する
WordPressで文章を入力する際、多くの方が「Enterキーを押せば改行される」と思いがちです。
しかし、これは正確ではありません。WordPressにおける「改行」と「段落」は、まったく別の操作であり、生成されるHTMLコードも異なります。
改行はShift+Enterで行う
WordPressで純粋な改行を行うには、Shift+Enterを同時に押します。この操作で生成されるのは<br>タグです。行が変わるだけで、前後の余白は生まれません。
一方、Enterキーだけを押した場合は「段落」が作成されます。HTMLでは<p>タグで囲まれ、段落と段落の間には自動的に余白が挿入されます。
この違いを表にまとめると、以下のようになります。
改行と段落の比較
なぜこの違いが重要なのか
たとえば、住所や電話番号のように行を変えたいだけの場合、段落（Enter）を使うと不自然に大きな余白が入ってしまいます。逆に、話題を切り替えたいときに改行（Shift+Enter）だけで済ませると、文章が詰まって読みにくくなります。
改行と段落を意図的に使い分けることで、読者にとって視覚的にストレスのない記事が作れます。
WordPressで改行が反映されない原因と対処法
「確かに改行したのに、プレビューで見ると改行が消えている」。これはWordPressユーザーが最も困惑する問題の一つです。
自動整形機能wpautopが原因のケース
WordPressにはwpautopという自動整形機能が標準で備わっています。この機能は、テキスト内の改行を自動的に<p>タグや<br>タグに変換してくれる便利なものですが、意図しない挙動を引き起こすことがあります。
具体的には、連続した改行が勝手に1つにまとめられたり、HTMLコード内の改行が崩れたりします。
経験上、この問題はクラシックエディタを使用している場合に特に多く発生します。ビジュアルエディタとテキストエディタを切り替えた際に、改行コードが書き換えられてしまうのです。
wpautopを無効化する方法
どうしてもwpautopが邪魔になる場合は、テーマのfunctions.phpに以下のコードを追加することで無効化できます。
remove_filter('the_content', 'wpautop');
ただし、wpautopを完全に無効化すると、すべての記事で段落の自動変換がなくなります。過去に書いた記事のレイアウトが崩れる可能性があるため、慎重に判断してください。
個人的には、wpautopの完全無効化よりも、問題が起きている箇所をピンポイントで修正する方が安全だと考えています。
テーマやプラグインとの競合
改行が反映されない原因は、wpautopだけではありません。使用しているテーマのCSS設定や、特定のプラグインが改行の表示に影響を与えていることもあります。
確認手順としては、まずプラグインをすべて無効化し、デフォルトテーマに切り替えてみてください。それで改行が正常に反映されるなら、プラグインかテーマが原因です。一つずつ有効化して原因を特定していきます。
ブロックエディタ（Gutenberg）での改行テクニック
WordPress 5.0以降で標準となったブロックエディタでは、改行に関する操作がクラシックエディタとは異なります。ブロックエディタ特有の機能を活用することで、より柔軟なレイアウトが可能です。
段落ブロック内での改行
ブロックエディタの段落ブロック内でも、基本操作は同じです。Shift+Enterで改行、Enterで新しい段落ブロックが作成されます。
ブロックエディタの利点は、各段落がブロックとして独立していることです。ブロック単位で移動・削除・スタイル変更ができるため、クラシックエディタよりもレイアウトの自由度が高くなっています。
スペーサーブロックで余白を自在にコントロール
「段落間の余白をもっと広くしたい」「セクション間に大きな空白を入れたい」。こうした要望に応えてくれるのがスペーサーブロックです。
ブロックを追加
「+」ボタンをクリックし、「スペーサー」を検索して挿入します
高さを調整
ドラッグまたは数値入力で、ピクセル単位で余白の高さを設定します
プレビューで確認
実際の表示を確認し、スマホ表示でも適切な余白か確認します
スペーサーブロックのデフォルト高さは100pxですが、記事内の一般的な余白調整なら20〜50px程度が自然です。
カスタムHTMLブロックを活用する方法
より細かい制御が必要な場合は、カスタムHTMLブロックを使って直接HTMLを記述できます。たとえば、<br>タグを複数入れたり、<div>タグでマージンを指定したりすることが可能です。
ただし、HTMLを直接記述する場合は、レスポンシブデザインへの配慮を忘れないでください。PC表示では問題なくても、スマートフォンで見ると崩れていることがあります。
CSSで改行の余白を調整する実践的な方法
「テーマの段落間の余白が広すぎる」「もう少し詰めたい」。こうした微調整は、CSSで簡単に解決できます。
段落間の余白を変更する
WordPressのカスタマイザーまたは「追加CSS」機能を使って、以下のコードを追加します。
.entry-content p {
margin-bottom: 1em; /* お好みの値に調整 */
}
デフォルトでは多くのテーマが段落間に1.5em〜2emの余白を設定しています。日本語の記事では1em〜1.2em程度が読みやすいと感じる方が多いようです。
brタグの余白を調整する
改行（brタグ）による行間を調整したい場合は、以下のCSSが有効です。
.entry-content br {
display: block;
margin-top: 0.5em;
content: "";
}
これまでの取り組みで感じているのは、CSSでの余白調整はWordPressのカスタマイズの中でも最も効果が見えやすい部分だということです。わずかな調整でも、記事全体の印象が大きく変わります。
クラシックエディタでの改行トラブルと解決策
ブロックエディタが主流になった現在でも、クラシックエディタを使い続けている方は少なくありません。クラシックエディタ特有の改行問題とその解決策を解説します。
ビジュアルエディタとテキストエディタの切り替え問題
クラシックエディタで最も多いトラブルが、ビジュアルモードとテキストモードを切り替えた際に改行が消えてしまう現象です。
これはWordPressがモード切替時にHTMLを再解析するために起こります。特に、テキストモードで手動入力した<br>タグが、ビジュアルモードに切り替えた瞬間に削除されることがあります。
TinyMCE Advancedプラグインの活用
この問題への対処として、TinyMCE Advanced（現在のAdvanced Editor Tools）プラグインが広く利用されています。このプラグインには「段落タグの保持」というオプションがあり、有効にすることでモード切替時の改行消失を防げます。
設定方法は以下の通りです。
プラグインをインストール・有効化した後、「設定」→「Advanced Editor Tools」に進みます。画面下部にある「段落タグの保持」にチェックを入れて保存するだけです。
改行を使いこなして読みやすい記事を作るコツ
技術的な改行の方法を理解したら、次は「どう使い分けるか」という実践的なポイントを押さえましょう。
スマートフォン表示を最優先で考える
現在、ブログ運営においてアクセスの7割以上がスマートフォンからという統計もあります。PC画面では適切に見える余白でも、スマートフォンでは過剰に感じられることがあります。
記事を公開する前に、必ずスマートフォンでのプレビューを確認してください。
改行と段落の使い分けガイドライン
改行（Shift+Enter）を使う場面
- 住所や連絡先の表記
- 箇条書き的に短い文を並べるとき
- 詩や歌詞の引用
- 同じ話題内で行を変えたいとき
段落（Enter）を使う場面
- 話題やテーマが変わるとき
- 新しい論点を提示するとき
- 読者に一呼吸置いてもらいたいとき
- 視覚的な区切りを作りたいとき
3〜4行ごとに段落を分ける意識を持つ
日本語のWeb記事においては、1つの段落は3〜4行（スマートフォン表示で）を目安にすると読みやすくなります。
これは経験則ですが、5行以上続く段落は、スマートフォンの画面では「壁のようなテキスト」に見えてしまい、読者が離脱しやすくなります。ブログ初心者の方は、特にこの点を意識すると記事の質が一段階上がるはずです。
また、空行を入れすぎるのも逆効果です。内容のない空白が続くと、スクロールの手間が増えて読者のストレスになります。適度なバランスが大切です。
よくある改行トラブルのQ&A
Enterを押しても改行されず新しいブロックが作られてしまう
これはブロックエディタの正常な動作です。ブロックエディタではEnterキーは「新しい段落ブロックの作成」に割り当てられています。同じブロック内で改行したい場合は、Shift+Enterを使ってください。
改行を入れたのにプレビューで反映されない
wpautopの自動整形機能が原因の可能性が高いです。テキストエディタで直接<br>タグを確認してみてください。また、使用中のテーマのCSSでwhite-spaceプロパティが上書きされていないかも確認しましょう。
段落間の余白が大きすぎるのを直したい
カスタマイザーの「追加CSS」に.entry-content p { margin-bottom: 1em; }を追加してみてください。数値を変えることで、お好みの余白に調整できます。テーマによってはクラス名が異なる場合があるので、ブラウザの開発者ツールで確認すると確実です。
クラシックエディタで改行が勝手に消える
Advanced Editor Tools（旧TinyMCE Advanced）プラグインを導入し、「段落タグの保持」オプションを有効にしてください。これにより、ビジュアルモードとテキストモードの切り替え時に改行が消失する問題を防げます。
空行を複数入れて大きな余白を作りたい
HTMLの仕様上、連続した<br>タグは1つにまとめられることがあります。大きな余白を作りたい場合は、ブロックエディタの「スペーサーブロック」を使うか、CSSでmarginを指定する方法が確実です。 （ノーブレークスペース）を使う方法もありますが、WordPressの運用上あまり推奨されません。
まとめ
WordPressの改行は、一見シンプルに見えて奥が深いテーマです。Shift+Enterによる改行とEnterによる段落の違いを理解し、wpautopの仕組みを把握することで、多くのトラブルは解決できます。
ブロックエディタを使っている方は、スペーサーブロックやカスタムHTMLブロックを活用することで、より自由度の高いレイアウトが実現します。CSSでの余白調整も、一度覚えてしまえば記事全体の読みやすさを大幅に向上させる強力な手段です。
まずは今日の記事から、改行と段落を意識的に使い分けてみてください。小さな積み重ねが、読者にとって心地よい記事づくりにつながっていきます。