「 ；」で改行するのはNG？正しい余白の作り方とSEOへの影響
悩む人
・「 」と「<br>」は何が違うの？
WordPressで記事を書いていると、空けたつもりのない余白ができていることがあります。HTMLを確認すると、そこに入っているのが「 」。
「 」は、改行させないためのスペースを表す記号です。エディタで空の段落を作ったときに、WordPressが自動で入れることがあります。
結論からいうと、「 」で改行や余白を作るのはおすすめできません。SEOへの直接の影響はほとんどありませんが、表示が崩れたりあとから修正しにくくなったりするためです。
本記事では、「 」の正体と「<br>」との違い、WordPressで余白を作る正しい方法を解説します。
小さなウェブ集客のミカタ 阿部
「 」とは
「 」は、HTMLで特殊なスペースを表すための記号です。見た目はただの空白ですが、普通の半角スペースとは役割がまったく違います。
もう少し具体的にいうと「 」は単語の途中や不自然な改行をさせないために使う記号です。
そのため装飾目的での余白を作ったり、段落を作るのは本来の使い方ではないので注意しましょう。
「 」で余白を作るのがおすすめできない理由
「 」を文章の中に入れれば半角スペース1つ分、空の段落（<p> </p>）として入れれば1行分の余白ができます。
SEOへの影響は？
先に結論をお伝えすると、「 」や空の段落があるだけで、検索順位が下がることはほぼありません。
とはいえ、「SEOに影響がないから問題ない」というわけでもありません。以下の2つの理由でサイト運営上の問題になり得ます。
HTMLの使い方として正しくない
<p> は「段落」を表すタグです。中身のない段落を余白のために並べるのは、HTMLの本来の使い方から外れています。
そのため記事を読む際に読み上げソフトを使う人にとっては、中身のない段落が「空白」として読み上げられることもあり、記事の読みやすさの面ではマイナスと言えます。
あとから修正しにくい
空の段落や「 」は、エディタの見た目ではほとんど区別がつきません。記事が増えるほど、どこに入っているのかわからなくなります。
テーマを変えると段落の余白の大きさも変わるため、空の段落で作った余白がまとめて崩れる原因になります。
小さなウェブ集客のミカタ 阿部
なぜ <p> </p> が勝手に入るのか
自分で書いた覚えがないのに「 」が入っている場合があります。WordPressを例に挙げると主な原因は次の2つとなります。
2.ほかのアプリからコピー＆ペーストしたとき
1. クラシックエディタで空の行を作ったとき
クラシックエディタで空の行を作ったり、「ビジュアル」と「テキスト」のタブを切り替えたりすると、空の段落に「 」が自動で入ることがあります。
WordPress 5.0以降はブロックエディタが標準ですが、Classic Editorプラグインで昔のエディタを使い続けているサイトでは、今も起こります。
2. ほかのアプリからコピー＆ペーストしたとき
WordやGoogleドキュメント、ほかのWebサイトから文章を貼り付けると、元の書式と一緒に「 」が持ち込まれることがあります。
そのため文章を貼り付けるときは「Ctrl + Shift + V」で書式をリセットする貼り付けをおすすめします。
WordPressで改行・余白を作る正しい方法
では、余白や改行はどう作ればいいのか。目的に合わせて、次の4つを使い分けましょう。
段落の中で改行するなら Shift＋Enter（<br>）
同じ段落の中で行だけを変えたいときは、Shift＋Enterで改行します。HTMLでは <br> が入り、段落はそのままで次の行に移ります。
| <br> | |
|---|---|---|
| 役割 | 改行しないスペース | 段落の中での改行 |
| 使いどころ | 単語の途中で改行させたくないとき | 住所や箇条書き風の文など、行だけ変えたいとき |
| 余白を作る目的で使うと | 空の段落ができてNG | 連続で使うとNG |
余白を空けたいならスペーサーブロック
ブロックとブロックの間に余白を入れたいときは、スペーサーブロックを使いましょう。
-
投稿編集画面のブロック「＋」ボタンから「スペーサー」を検索して追加します。
-
スペーサーが選択された状態で右サイドバーにある「ブロック」タブをクリックした後に高さを指定します。
高さを数値で決められるので、空の段落を並べるよりも余白をきっちり管理できます。
ブロックの余白（マージン）の設定
テーマが対応していれば、ブロックごとに余白（マージン）を設定できます。
-
余白を調整したいブロックを選択します。（例はデフォルトの段落ブロックです。）
-
「段落」ブロックが選択された状態で右サイドバーにある「ブロック」タブをクリックした後に「サイズ」より「マージン」をクリックします。
-
表示されたバーにて余白を調整します。（厳密な数字で調整したい場合は右側のアイコンをクリックすることで入力できます。）
小さなウェブ集客のミカタ 阿部
※テーマによっては、マージンの設定が表示されない場合があります。
サイト全体で調整するなら追加CSS
「段落と段落の間をもう少し空けたい」など、サイト全体で余白を変えたいときは、CSSで調整するのが確実です。
.entry-content p {
margin-bottom: 1.8em;
}クラシックテーマなら「外観」→「カスタマイズ」→「追加CSS」、ブロックテーマなら「外観」→「エディター」→「スタイル」から追加できます。クラス名（.entry-content）はテーマによって異なるため、使っているテーマに合わせてください。
すでに入っている「 」を見つけて消す方法
最後に、すでに記事の中に入ってしまった「 」や空の段落の探し方と消し方です。
コードエディターで確認する
-
記事の編集画面の右上にある「︙」（オプション）をクリックします。
-
「コードエディター」を選択します。（ショートカットは Ctrl＋Shift＋Alt＋M）
-
Ctrl＋F で「
」や<p></p>を検索します。
小さなウェブ集客のミカタ 阿部
まとめて置換する
記事数が多い場合は、「Search Regex」などのWordPressのプラグインを使うと、サイト全体からまとめて検索・置換できます。
ただし、置換はデータベースを直接書き換える作業です。必ず次の2点を守ってください。
いきなり置換せず、まず検索結果を確認する
「 」の中には、単語の途中で改行させないために意図して入れたものが含まれていることもあります。すべてを機械的に消すのではなく、空の段落（<p> </p>）だけを対象にするのが安全です。
記事数が多くて自分で置換するのが不安な場合は、まとめて整理することもできます。
実際の制作現場では「 」は使われているか？
少しだけスペースを入れたいときには使われる
実際の制作現場でも、数字と単位など「途中で改行させたくない文字列」には を使うことがあります。一方、単純に文字同士の間隔を調整する目的なら、CSSの gap や margin などを使うのが基本です。
円」「3 ページ」）・電話番号や型番など、途中で折り返されると読みにくいもの
・ボタンやラベルで、アイコンと文字の間を少しだけ空けたいとき
どれも「 」の本来の役割である「改行させないスペース」に沿った使い方です。
大きな余白を作るために使うことはない
一方で、段落と段落の間を空けるといった大きな余白に「 」を使っている現場は、僕自身見たことがありません。
余白はCSSでまとめて管理するのが基本です。CSSで決めておけば、スマホとパソコンで余白の大きさを変えたり、サイト全体の余白を一度に調整したりできます。「 」や空の段落で作った余白は、1か所ずつ直すしかなくなってしまうんです。
まとめ | は装飾目的では使うべきではない
「 」は、改行させないためのスペースを表す記号です。装飾目的での余白や改行を作るためのものではありません。
<br>）・ブロックの間に余白を入れるならスペーサーブロックやマージンの設定
・サイト全体の余白はCSSで調整
SEOへの直接の影響はほとんどないものの、表示の崩れや修正のしにくさにつながります。すでに入っている場合は、コードエディターやリスト表示で探して、少しずつ整理していきましょう。
ちょっとした修正だけでも、お気軽にご相談ください
悩む人
「記事が多すぎて、1本ずつ直す時間がない」
小さなウェブ集客のミカタでは、文章や画像の修正を1回3箇所まで3,000円〜（税抜）で承っています。記事全体の余白の整理など、まとめての作業もお見積もりします。他社で制作されたサイトでも対応できます。
