WordPressで改行する方法

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

HTMLとCSSのちがい

Webページを構成する要素として、HTMLとCSSというプログラミング言語があります。

HTMLがコンテンツの構造を作るのに対し、CSSはコンテンツのデザインやレイアウトを指定します。

HTMLの<br>や<p>タグを連続して文書のレイアウトにデザインを加えるのは、HTML本来の役割ではありません。
その代わりに文書の見た目をレイアウトする役割を担うCSSを使い、空白をデザインをするのが美しいとされているのです。

段落と改行の使い分け

WordPressのブロックエディターには、直感的に操作できる「ビジュアルエディター」とHTMLを直接打ち込む「コードエディター」の2種類があります。

投稿の編集画面の右上、オプションから選択できます。

ビジュアルエディターは書いた文章を視覚的にすぐ確認できて便利です。

改行したいときに用いるのがShift+Enterです。

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

<p>タグとはPragraphの意味。

<p>と</p>で囲んだ範囲のテキストを段落として指定します。

一方、<br>はBreakを意味し、テキストを打ったあと改行するときに使用します。

空白行の作り方

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

以前は&nbsp;というコードを<p>タグに挟んで空白行を表していました。

しかし、今はCSSを使って余白をデザインする方が自然であるとされています。

文章を読みやすくするために、改行や段落を使って空白行を作る方法は便利です。

前述の<br>タグや<p>タグを続けて打ち込むのは、HTMLコードを書くうえで推奨されていないため、連続しての使いすぎには注意が必要です。

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

<br>タグや<p>タグの連続を避けて空白行を作りデザイン性を高めるには、スペーサーというブロックが便利です。

ブロック追加からスペーサー選ぶと、設定から自由に空白の高さを指定できます。

段落や画像の余白をレイアウトするときにも便利なブロックです。