【WordPress】ブロックエディターで改行する方法

クラッシックエディターからブロックエディターにして起こった変化

WordPressの自動整形機能？

クラシックエディターからブロックエディターに変更した際、改行がうまく反映されないことがありました。WordPressに標準搭載されているエディターの自動整形機能が働いて、余計なタグをまとめてしまうことがあるそう。
ビジュアルエディターでは、Enterキーを押すだけで改行されていたのに、保存すると改行がなくなってしまって困ることがあります。

<p>タグと<br>タグの意味

<p>タグとはPragraphの意味。<p>と</p>で囲んだ範囲のテキストを段落として指定します。一方、<br>はBreakを意味し、テキストを打ったあと改行をするときに使用します。

<p>テキスト</p>　段落を作る
テキスト<br>　　改行を指定する

ブロックエディターでレイアウト

段落と改行の使い分け

WordPressのブロックエディターには、直感的に操作できる「ビジュアルエディター」とHTMLを直接打ち込む「コードエディター」の2種類のエディター(編集用機能)があります。投稿の編集画面の右上、オプション選択画面から選択できます。ビジュアルエディターは書いた文章を視覚的にすぐ確認できて便利ですが、Enterを押しても新たなブロック(段落)が追加されるだけで上手く改行できません。
ビジュアルエディターで改行したいときに用いるのがShift+Enterです。

空白行を使うときの注意と対策

文章を読みやすくするために、改行を使って空白行を作る方法がありますが、前述の<br>タグや<p>タグを連続して打ち込むのはHTMLコードを書くうえで推奨されていないため注意が必要です。

HTMLとCSSのちがい

Webページを構成する要素としてHTMLとCSSというプログラミング言語がありますが、HTMLがコンテンツの構造を作るのに対し、CSSはコンテンツのデザインやレイアウトを指定します。HTMLの<br>や<p>タグを連続して文書のレイアウトにデザインを加えるのはHTML本来の役割ではないため、その代わりに文書の見た目をレイアウトする役割を担うCSSを使い、空白をデザインをするのが美しいとされているのです。

スペーサーブロックでデザインする

<br>タグや<p>タグの連続を避けて空白行を作るには、スペーサーというブロックが便利です。ブロックを追加からスペーサー選ぶと、設定から自由に空白の高さを指定できます。段落や画像の余白をレイアウトするときにも便利なブロックです。