WordPressで空白行が反映されない原因と正しい入れ方｜改行・段落・スペーサーの使い分け完全ガイド
はじめに
WordPressで記事を作成していると、「編集画面では空白行を入れたのに、公開すると詰まってしまう」「Enterキーを何度押しても余白が広がらない」といった問題が起こることがあります。
これは、WordPressが文章を単なる文字列ではなく、段落や改行などのHTML構造として処理しているためです。また、テーマのCSS、使用しているエディター、プラグイン、画面サイズによっても空白の見え方は変わります。
WordPressで空白行を正しく入れるには、次の4つを使い分けることが重要です。
文章のまとまりを分ける「段落」
同じ段落内で行を変える「改行」
デザイン上の余白を作る「スペーサー」
サイト全体の余白を整える「CSS」
本記事では、WordPressで空白行が反映されない原因と対処法を、ブロックエディターとクラシックエディターの違いも含めて詳しく解説します。
1. WordPressで空白行が反映されないときにまず確認すべきこと
1-1. 空白行・改行・段落・余白の違いを理解する
WordPressの空白行を正しく扱うには、空白行、改行、段落、余白の違いを理解する必要があります。
「改行」は、同じ文章のまとまりの中で表示する行だけを変える操作です。一般的には<br>タグとして出力されます。
「段落」は、意味のまとまりごとに文章を分けるものです。HTMLでは<p>タグで囲まれ、テーマで設定された上下の余白が付くことがあります。
「余白」は、文章の構造ではなく、要素同士の距離を調整するデザイン上の空間です。スペーサーブロックやCSSのmargin、paddingなどで設定します。
見た目は似ていても、それぞれの目的は異なります。文章を区切りたいのか、単に行を変えたいのか、デザイン上の空間を広げたいのかを先に判断しましょう。
1-2. Enterだけで空白行を増やしても反映されない理由
WordPressでEnterキーを連打しても、入力した回数どおりに空白行が表示されるとは限りません。
Enterキーを押すと、通常は新しい段落ブロックや<p>タグが作成されます。しかし、文字が入っていない空の段落は、WordPressの自動整形機能やエディターによって不要な要素と判断され、保存時や表示時に削除されることがあります。
また、空の段落が残っていても、テーマのCSSで段落の余白が小さく設定されていれば、ほとんど空白がないように見えることもあります。
複数行分の空間を作る目的でEnterキーを連打するのではなく、スペーサーブロックやCSSを使うのが適切です。
1-3. 投稿編集画面と公開ページで見え方が違う主な原因
WordPressの投稿編集画面と公開ページでは、適用されるCSSが完全に同じとは限りません。
編集画面では、WordPress本体やエディター用のスタイルが使われます。一方、公開ページでは、有効化しているテーマや追加CSS、プラグインのスタイルが適用されます。
見え方が異なる主な原因は次のとおりです。
テーマが段落や見出しの余白を独自に設定している
編集画面にテーマのスタイルが反映されていない
キャッシュに古いCSSが残っている
パソコンとスマートフォンで異なるCSSが適用されている
プラグインが投稿本文のHTMLを変換している
編集画面だけで判断せず、プレビュー画面と実際の公開ページでも確認することが大切です。
1-4. ブロックエディターとクラシックエディターで操作が異なる点
ブロックエディターでは、段落、見出し、画像、スペーサーなどを独立したブロックとして扱います。デザイン上の余白を作る場合は、スペーサーブロックを使用できます。
クラシックエディターでは、ビジュアルエディターとテキストエディターを切り替えながら、段落やHTMLタグを編集します。ブロックエディターのようにスペーサーを簡単に挿入できないため、段落設定やCSSを使った調整が中心になります。
操作方法は異なりますが、文章の区切りには段落、同じ段落内の改行には<br>、デザイン上の余白にはCSSを使うという基本的な考え方は共通しています。
2. WordPressで空白行が消える主な原因
2-1. WordPressが不要な空の段落を自動削除する
WordPressには、入力内容を適切なHTMLに変換する自動整形機能があります。
何も入力されていない段落や、空白文字だけが入った要素は、不要なHTMLとして保存時に削除されることがあります。そのため、Enterキーで作った空白行が編集画面では見えていても、公開ページでは消えることがあります。
これは不具合とは限りません。空のタグを増やすとHTML構造が崩れやすくなるため、WordPressがコンテンツを整理した結果である可能性があります。
2-2. テーマのCSSで段落間の余白が制御されている
段落間の距離は、空白行の数だけでなく、テーマのCSSによって決まります。
例えば、次のようなCSSが設定されていると、段落の下に余白が付きます。
CSS.entry-content p {
margin-bottom: 1.5em;
}
反対に、次のように設定されていると、段落を分けても余白がほとんど表示されません。
CSS.entry-content p {
margin-top: 0;
margin-bottom: 0;
}
段落を正しく分けているのに文章が詰まって見える場合は、テーマの段落余白設定を確認しましょう。
2-3. プラグインやエディター設定の影響を受けている
WordPressの空白行は、次のようなプラグインの影響を受けることがあります。
HTMLを圧縮するプラグイン
キャッシュプラグイン
ページビルダー
ビジュアルエディター拡張プラグイン
自動整形を無効化するプラグイン
CSSやJavaScriptを最適化するプラグイン
プラグインがHTMLタグを変換したり、余白に関するCSSを上書きしたりすると、意図した表示にならない場合があります。
原因が分からないときは、影響がありそうなプラグインを一つずつ一時停止し、表示の変化を確認します。
2-4. HTMLタグやコードの書き方が崩れている
HTML編集でタグを直接入力している場合、タグの閉じ忘れや誤った入れ子によって空白行が反映されないことがあります。
例えば、次のように段落タグが正しく閉じられていないと、ブラウザがHTMLを自動補正し、予想と異なる表示になる可能性があります。
HTML<p>1つ目の段落
<p>2つ目の段落</p>
基本的には、次のように正しく記述します。
HTML<p>1つ目の段落</p>
<p>2つ目の段落</p>
ブロックエディターで「このブロックには無効なコンテンツが含まれています」と表示される場合も、HTMLタグの崩れが疑われます。
2-5. スマホ表示・PC表示で余白の見え方が変わっている
同じ余白でも、画面の幅によって見え方は変わります。
パソコンでは適度に見える余白でも、画面が小さいスマートフォンでは大きすぎることがあります。また、テーマによってはメディアクエリを使い、スマートフォンだけ段落や見出しの余白を変更している場合があります。
固定サイズのスペーサーを多用すると、画面サイズによって不自然な空間が生まれやすくなります。パソコン、タブレット、スマートフォンの各表示を確認しましょう。
3. WordPressで正しく空白行を入れる基本方法
3-1. 段落を分けたいときはEnterキーを使う
文章の意味や話題が変わる場所では、Enterキーを押して段落を分けます。
ブロックエディターでは、Enterキーを押すと新しい段落ブロックが作成されます。クラシックエディターでも、通常は新しい段落として処理されます。
段落は、文章の内容を整理し、読者が情報を理解しやすくするためのものです。見た目の空白を作るためだけに分けるのではなく、意味のまとまりを基準に使用しましょう。
3-2. 行だけを変えたいときはShift＋Enterを使う
同じ段落の中で行だけを変えたい場合は、Shiftキーを押しながらEnterキーを押します。
例えば、住所、詩、短いプロフィールなど、意味のまとまりを維持したまま表示する行を変えたい場面に適しています。
通常、Shift＋Enterによる改行は<br>タグとして処理されます。段落のような大きな上下余白は付きません。
文章のまとまりが変わる場合はEnter、同じまとまりの中で行だけ変える場合はShift＋Enterと覚えておくとよいでしょう。
3-3. 大きな余白を作りたいときはスペーサーブロックを使う
ブロック同士の間にデザイン上の空間を作りたい場合は、スペーサーブロックが便利です。
スペーサーブロックは高さを数値で調整できるため、空の段落を何個も作るより管理しやすくなります。文章だけでなく、画像、ボタン、カラムなどの間隔調整にも使用できます。
ただし、スペーサーを多用すると、ページ全体の余白に統一感がなくなることがあります。基本の段落間隔や見出し間隔はテーマ設定やCSSで整え、特別な場所だけスペーサーを使うのがおすすめです。
3-4. 文章の読みやすさを整えるなら段落ブロックを使う
本文の読みやすさを整える目的であれば、空白行を増やすよりも段落ブロックを適切に分けることが重要です。
長い文章を一つの段落に詰め込むと、特にスマートフォンでは読みにくくなります。一つの段落に一つの話題を置き、内容が切り替わる場所で段落を分けましょう。
ただし、一文ごとに段落を分けると、文章が細切れになって読みにくくなることもあります。文脈と読みやすさのバランスを考えて調整します。
3-5. 装飾目的の空白はCSSで調整する
サイト全体で段落や見出しの余白を統一したい場合は、CSSによる調整が適しています。
例えば、投稿本文の段落下に余白を付ける場合は、次のように記述できます。
CSS.entry-content p {
margin-bottom: 1.5em;
}
見出しの上に余白を付ける場合は、次のように設定できます。
CSS.entry-content h2 {
margin-top: 2.5em;
}
使用しているテーマによって本文エリアのクラス名は異なるため、実際のHTML構造を確認して指定してください。また、テーマの更新で消えないように、子テーマやWordPressの追加CSS機能を利用する方法があります。
4. ブロックエディターで空白行・余白を入れる方法
4-1. スペーサーブロックを追加する手順
ブロックエディターでスペーサーブロックを追加する基本手順は次のとおりです。
余白を入れたい位置をクリックする
ブロック追加の「＋」をクリックする
検索欄に「スペーサー」と入力する
「スペーサー」ブロックを選択する
挿入されたスペーサーの高さを調整する
スラッシュコマンドが利用できる場合は、空の段落ブロックで「/スペーサー」と入力して候補を選ぶ方法もあります。
スペーサーを選択しても見えにくい場合は、リスト表示から該当ブロックを選択すると操作しやすくなります。
4-2. スペーサーブロックの高さを調整する方法
スペーサーブロックを選択すると、ブロック上の操作部分や設定サイドバーから高さを変更できます。
数値を入力できる場合は、必要な余白に合わせて調整します。ただし、パソコンだけを見ながら大きな数値を設定すると、スマートフォンで余白が広くなりすぎる可能性があります。
固定値を使用するときは、次の点を確認しましょう。
本文の流れを分断していないか
スマートフォンで大きすぎないか
同じ目的の余白がページ内で統一されているか
テーマ本来の余白設定で代用できないか
必要最小限の高さにすることが、レイアウトを崩しにくくするポイントです。
4-3. 段落ブロックで自然な余白を作る方法
通常の文章では、段落ブロックを分けるだけで自然な余白を作れます。
段落ブロック同士の距離は、テーマのスタイルやブロック間隔の設定によって決まります。そのため、文章のまとまりごとにEnterキーで段落を分ければ、基本的には個別のスペーサーを入れる必要はありません。
段落間隔が狭すぎる場合は、空の段落を追加するのではなく、テーマのスタイル設定や追加CSSで段落の余白を調整しましょう。
4-4. グループ・カラム・画像まわりの余白を調整する方法
グループ、カラム、画像などのブロックでは、設定サイドバーに余白やブロック間隔の項目が表示される場合があります。
調整できる代表的な項目は次のとおりです。
マージン：要素の外側の余白
パディング：要素の内側の余白
ブロック間隔：グループ内にある要素同士の距離
配置：幅や位置の設定
最小の高さ：ブロック全体の高さ
画像の上下に空間を作りたい場合も、空の段落を置くより、画像ブロックや親グループの余白設定を利用したほうが構造を整理しやすくなります。
テーマやブロックによって使用できる設定は異なります。
4-5. 再利用しやすい余白パターンを作るコツ
同じ余白レイアウトを複数の記事で使う場合は、毎回スペーサーの高さを手作業で設定すると、ページごとに差が生まれます。
再利用しやすくするには、次の方法が有効です。
余白のサイズを数種類に統一する
グループブロックにクラス名を付ける
よく使う構成をパターンとして登録する
サイト全体のブロック間隔をテーマ側で設定する
共通のCSSクラスを作成する
例えば、小、中、大の3種類に余白を統一すると、記事ごとのデザイン差を減らせます。
CSS.space-small {
margin-bottom: 1rem;
}
.space-medium {
margin-bottom: 2rem;
}
.space-large {
margin-bottom: 4rem;
}
クラス名は、ブロックの「高度な設定」などにある追加CSSクラス欄へ入力します。
5. クラシックエディターで空白行を入れる方法
5-1. ビジュアルエディターで改行・段落を使い分ける
クラシックエディターのビジュアル画面では、EnterキーとShift＋Enterを使い分けます。
Enterキーを押すと新しい段落が作成され、Shift＋Enterを押すと同じ段落内で改行されます。
画面上では似た表示になることもありますが、HTML構造は異なります。Enterによる段落は<p>、Shift＋Enterによる改行は<br>として扱われるのが基本です。
余白を広げるためにEnterキーを何度も押すと、保存時に空の段落が削除されることがあります。
5-2. テキストエディターでbrタグを使う場合の注意点
クラシックエディターのテキスト画面では、<br>タグを直接記述できます。
HTML1行目<br>
2行目
<br>は同じ段落内で行を変えるためのタグです。デザイン上の大きな余白を作るために、次のように連続使用するのはおすすめできません。
HTML本文<br><br><br><br>
次の本文
この方法では余白の大きさを管理しにくく、スマートフォンで不自然な表示になりやすいためです。文章の区切りには<p>、デザイン上の間隔にはCSSを使いましょう。
5-3. pタグ・brタグ・HTMLエンティティの使い分け
<p>タグは段落、<br>タグは改行を表します。
HTML<p>最初の段落です。</p>
<p>次の段落です。</p>
HTML<p>
東京都千代田区<br>
〇〇ビル3階
</p>
空の段落を維持する目的で、 という空白文字を入れる方法が紹介されることもあります。
HTML<p> </p>
ただし、 は本来、単語や文字の間で改行させたくない空白を表すHTMLエンティティです。余白を作る目的で多用すると、HTMLの意味が不明確になり、管理もしにくくなります。
一時的に空の要素を維持できる場合はありますが、基本的にはCSSで調整するほうが適切です。
5-4. 空白行が勝手に詰まるときの対処法
クラシックエディターで空白行が詰まる場合は、次の順番で確認します。
ビジュアル画面とテキスト画面を切り替え、タグを確認する
段落が
<p>で正しく囲まれているか確認する不要な
<br>や空のタグを削除するテーマの段落余白を確認する
自動整形に関係するプラグインを確認する
キャッシュを削除する
プレビューと公開ページを比較する
ビジュアル画面とテキスト画面を何度も切り替えると、入力したタグが自動変換されることがあります。HTMLを直接編集した後は、意図した構造が保たれているか確認してください。
5-5. クラシックエディターで避けたいNG操作
クラシックエディターでは、次の操作を避けましょう。
Enterキーを連打して余白を作る
<br>タグを何個も連続して挿入する空の
<p>タグを大量に作る余白目的で全角スペースを並べる
を大量に挿入するタグの入れ子や閉じ方を確認せず貼り付ける
外部文書の装飾付きHTMLをそのまま貼り付ける
余白調整と文章構造を分けて考えることで、表示崩れを防ぎやすくなります。
6. 空白行が反映されないときの具体的な対処法
6-1. プレビューと公開ページの両方で確認する
空白行の問題が起きたら、まずプレビューと公開ページの両方を確認します。
編集画面だけで表示がおかしい場合は、エディター用CSSの影響が考えられます。プレビューでも公開ページでもおかしい場合は、本文のHTMLやテーマのCSSが原因かもしれません。
公開ページだけ表示が違う場合は、キャッシュ、最適化プラグイン、CDN、テーマの表示用CSSなどを確認します。
ログイン中とログアウト中で異なる表示になることもあるため、シークレットウィンドウなどで確認する方法も有効です。
6-2. キャッシュを削除して表示を確認する
CSSや本文を変更しても表示が変わらないときは、古いデータがキャッシュされている可能性があります。
次のキャッシュを順番に確認しましょう。
ブラウザキャッシュ
WordPressのキャッシュプラグイン
サーバー側のキャッシュ
CDNのキャッシュ
テーマ独自のキャッシュ
CSS・JavaScript最適化プラグインのキャッシュ
キャッシュ削除後は、ページを再読み込みします。ブラウザの強制再読み込みを利用すると、古いCSSの影響を減らせる場合があります。
6-3. テーマの段落余白設定を確認する
段落を分けても余白が付かない場合は、テーマの設定画面を確認します。
テーマによっては、次の項目から調整できます。
カスタマイザー
サイトエディターのスタイル
タイポグラフィ設定
コンテンツ幅設定
ブロック間隔設定
投稿本文のデザイン設定
設定項目がない場合は、ブラウザの開発者ツールで段落に適用されているmarginを確認し、追加CSSで調整します。
ただし、テーマがすでに指定しているCSSとの優先順位に注意が必要です。
6-4. プラグインを一時停止して原因を切り分ける
プラグインが原因か確認する場合は、影響がありそうなものを一つずつ停止します。
特に確認したいのは、エディター拡張、キャッシュ、HTML圧縮、ページビルダー、装飾ブロック、CSS最適化に関係するプラグインです。
サイト運営中にプラグインを停止すると機能や表示に影響が出る可能性があります。可能であれば、バックアップを取得したうえで、ステージング環境を使って検証しましょう。
停止後に空白行が正しく表示された場合は、そのプラグインの設定や競合を確認します。
6-5. カスタムCSSで余白を調整する
段落の余白を調整する場合は、例えば次のようなCSSを使用します。
CSS.entry-content p {
margin-top: 0;
margin-bottom: 1.5em;
}
見出しの前後を調整する例は次のとおりです。
CSS.entry-content h2 {
margin-top: 3em;
margin-bottom: 1em;
}
スマートフォンだけ余白を小さくする場合は、メディアクエリを使用できます。
CSS.entry-content h2 {
margin-top: 3em;
}
@media (max-width: 768px) {
.entry-content h2 {
margin-top: 2em;
}
}
クラス名や適切な数値はテーマによって異なります。CSSを追加した後は、パソコンとスマートフォンの両方で表示を確認してください。
6-6. HTML編集でタグの崩れを修正する
HTMLタグが原因と思われる場合は、コードエディターやHTML編集画面で構造を確認します。
主に確認するポイントは次のとおりです。
<p>タグが正しく閉じられているか<div>タグの閉じ忘れがないか不要な
<br>が連続していないかブロック用コメントが欠けていないか
外部サイトからコピーした装飾タグが残っていないか
タグが不適切に入れ子になっていないか
ブロックエディターでは、投稿全体をコードエディターで表示するほか、対象ブロックだけをHTMLとして編集できる場合があります。
修正前には、本文を別の場所へコピーするか、リビジョンやバックアップを利用できる状態にしておくと安心です。
7. 改行・段落・スペーサーの正しい使い分け
7-1. 文章のまとまりを分けるなら段落
話題や意味のまとまりが変わる場合は、段落を使用します。
段落を適切に分けると、文章の構造が明確になります。読者は内容を追いやすくなり、特にスマートフォンでも視線を移動しやすくなります。
段落は見た目を整えるだけのものではありません。文章の論理的なまとまりを表す要素として使用しましょう。
7-2. 同じ段落内で行を変えるなら改行
住所、氏名と肩書、詩、短い案内文など、内容のまとまりは同じでも行だけを変えたい場合は改行を使います。
ブロックエディターやクラシックエディターでは、一般的にShift＋Enterで改行できます。
通常の本文で毎文改行すると、画面幅によって不自然な折り返しが発生することがあります。改行は必要な場所に限定しましょう。
7-3. デザイン上の余白を作るならスペーサー
文章の構造とは関係なく、画像とボタンの間を広げたい場合や、特定のセクションを視覚的に分けたい場合はスペーサーが適しています。
スペーサーを使えば、空の段落や連続した<br>を挿入せずに余白を作れます。
ただし、本文中のあらゆる場所にスペーサーを置くと、修正や管理が複雑になります。サイト全体で共通する余白はテーマ設定やCSSで管理し、個別調整だけにスペーサーを使いましょう。
7-4. 見出し前後の余白はテーマ設定やCSSで調整する
見出しは記事全体で繰り返し使用するため、一つずつスペーサーを挿入するより、テーマ設定やCSSで一括調整するほうが効率的です。
例えば、すべてのH2見出しの上側を広く、下側を少し狭くすると、本文との関係が分かりやすくなります。
CSS.entry-content h2 {
margin-top: 3em;
margin-bottom: 1em;
}
H3見出しには少し小さい余白を設定するなど、見出し階層に応じて調整すると統一感が生まれます。
7-5. SEOと読みやすさを両立する余白設計の考え方
空白行の有無だけで検索順位が決まるわけではありません。しかし、余白が少なく読みにくい記事は、ユーザーが内容を理解しにくくなります。
反対に、余白が広すぎると文章のつながりが分かりにくくなり、スクロール量も増えます。
SEOと読みやすさを両立するには、次の点を意識しましょう。
一つの段落に内容を詰め込みすぎない
話題が変わる位置で段落を分ける
見出し前後の余白を統一する
改行を装飾目的で多用しない
スマートフォンでの表示を基準に確認する
文章構造とデザイン上の余白を分けて管理する
重要なのは、空白を増やすことではなく、読者が内容を理解しやすいレイアウトにすることです。
8. WordPressの空白行でやってはいけないNG例
8-1. Enter連打で余白を作る
Enterキーを何度も押して余白を作ると、空の段落が増えます。
空の段落は保存時に削除される可能性があるため、意図した余白を安定して維持できません。また、エディターやテーマを変更したときに表示が崩れる原因にもなります。
大きな空間を作る場合はスペーサーブロック、共通の余白はCSSを使用しましょう。
8-2. 空の段落を大量に挿入する
何も書かれていない段落を大量に挿入すると、HTML構造が分かりにくくなります。
後から記事を編集する際に、どの空の段落が必要なのか判断しづらくなり、誤って削除したり追加したりする原因になります。
空の段落に を入れて強制的に残す方法も、余白調整として常用するのは避けましょう。
8-3. brタグを連続で入れてデザイン調整する
<br>タグは改行を表すタグであり、余白の大きさを調整するためのものではありません。
複数の<br>を連続させると、文章構造とデザインが混在します。文字サイズや行の高さが変更された際に、余白の大きさも変わる可能性があります。
余白にはmargin、padding、ブロック間隔、スペーサーなどを使いましょう。
8-4. スマホ表示を確認せずに余白を広げる
パソコンの画面だけを見ながら余白を調整すると、スマートフォンで大きな空間ができることがあります。
特に固定値のスペーサーや大きなmarginを設定した場合は注意が必要です。
WordPressのプレビュー機能だけでなく、可能であれば実際のスマートフォンでも表示を確認しましょう。
8-5. プラグインだけで空白行の問題を解決しようとする
空白行の問題を解決するプラグインを追加しても、原因がテーマのCSSや誤ったHTMLであれば根本的な解決にならない場合があります。
プラグインを増やすと、競合や表示速度への影響、更新管理の負担が増えることもあります。
まずは段落、改行、スペーサーの使い分けを確認し、テーマ設定、CSS、HTML、キャッシュの順に原因を切り分けましょう。
9. 空白行・改行・段落に関するよくある質問
9-1. WordPressで空白行を2行以上入れるには？
2行以上に相当する大きな空間を作りたい場合は、Enterキーを連打するのではなく、スペーサーブロックを使用します。
ブロックエディターで「＋」をクリックし、「スペーサー」を追加して高さを調整してください。
サイト全体で同じ余白を使う場合は、CSSクラスを作成する方法もあります。
CSS.custom-space {
margin-bottom: 3rem;
}
文章の意味上、段落を分けるだけでよい場合は、通常どおりEnterキーを1回押して新しい段落を作成します。
9-2. スペーサーブロックが表示されないときは？
スペーサーブロックが見つからない場合は、ブロック追加画面の検索欄に「スペーサー」と入力します。
それでも表示されない場合は、次の点を確認してください。
使用しているエディターがブロックエディターか
ブロックの使用が制限されていないか
テーマやプラグインがブロックを非表示にしていないか
編集権限による制限がないか
WordPressやプラグインに競合がないか
スペーサーを追加できても編集画面で選択しにくい場合は、リスト表示から該当ブロックを選びます。
9-3. 空白行がスマホだけ広くなる原因は？
スマートフォンだけ空白行が広く見える場合は、テーマのレスポンシブCSS、固定サイズのスペーサー、行の高さなどが原因として考えられます。
例えば、スペーサーに大きな固定値を設定すると、パソコンでは適度でも、スマートフォンでは画面に対する割合が大きくなります。
ブラウザの開発者ツールなどでスマートフォン表示を確認し、必要に応じてメディアクエリで余白を調整します。
CSS.custom-space {
margin-bottom: 4rem;
}
@media (max-width: 768px) {
.custom-space {
margin-bottom: 2rem;
}
}
9-4. HTMLで空白行を入れても問題ない？
HTMLで段落や改行を正しく記述すること自体に問題はありません。
文章のまとまりには<p>、同じ段落内の改行には<br>を使用します。
ただし、空白を作る目的で空の<p>タグ、連続した<br>、大量の を挿入する方法はおすすめできません。表示が不安定になりやすく、後から修正しにくいためです。
デザイン上の余白には、CSSやスペーサーブロックを使用しましょう。
9-5. 空白行を入れすぎるとSEOに悪影響はある？
空白行を入れたことだけを理由に、直ちにSEO評価が下がるとは限りません。
ただし、余白が多すぎて文章のつながりが分かりにくくなったり、スクロール量が不必要に増えたりすると、読者にとって使いにくいページになる可能性があります。
また、空の段落や連続した<br>が大量に含まれていると、HTMLの管理が複雑になります。
SEOを意識する場合も、検索エンジンのためだけに空白を調整するのではなく、読者が内容を理解しやすい段落構成と余白設計を優先しましょう。
まとめ
WordPressで空白行が反映されない主な原因は、空の段落が自動削除されること、テーマのCSSで余白が制御されていること、プラグインやキャッシュの影響、HTMLタグの崩れなどです。
空白行に関する問題を防ぐには、目的に応じて入力方法を使い分ける必要があります。
文章のまとまりを分ける場合はEnterキーで段落を作り、同じ段落内で行だけを変える場合はShift＋Enterで改行します。デザイン上の大きな余白にはスペーサーブロックを使い、サイト全体の段落間隔や見出し前後の余白はテーマ設定やCSSで調整します。
Enterキーの連打、空の段落の大量挿入、連続した<br>による余白調整は、表示崩れや管理の複雑化につながるため避けましょう。
編集画面だけでなく、プレビュー、公開ページ、パソコン、スマートフォンの各環境で確認し、文章構造とデザイン上の余白を分けて管理することが大切です。