WEBサイト制作

WordPress 文章の改行方法~改行と段落ブロックの違い【初心者向け】

WordPressのブロックエディタ(グーテンベルク)で、記事内の文章を改行させる方法を解説します。早速やり方です。

やり方は2種類。
「Shift + Enter」:行間は変わりません。
「Enter」:段落が作られ1行空きのように改行されます。

では、少し詳しくみていきます。

2種類の改行方法

「Shift + Enter」の改行(文章に改行を入れる)

「段落」「見出し(h2/h3..)」などのブロック内で改行を入れる場合は、キーボードで「Shift」を押しながら「Enter」を押します。

WordPressの投稿画面(編集画面)でみてみましょう。「名前はまだ無い。」のすぐ後ろにカーソルをもっていき「Shift+Enter」を押します。

改行(管理画面イメージ)

編集画面上で改行されました。
プレビュー画面でも念のため確認してみます。

改行(ユーザー画面イメージ)改行(イメージ)

改行されていますね。
「Shift+Enter」はブロックのなかで文章を改行させたいときに使います。

「Enter」の改行(段落を分ける)

同じ要領で今度は「Enter」を試してみます。

WordPressの投稿画面(編集画面)でみてみましょう。「名前はまだ無い。」のすぐ後ろにカーソルをもっていきキーボードの「Enter」を押します。

段落改行(管理画面イメージ)改行(イメージ)

編集画面上で新たに「段落」ブロックが作られ、改行されました。

「段落」「見出し(h2/h3..)」などのブロックで文字を入力しているときにキーボードの「Enter」を押すと、新しいブロックが作られます。改行に似ていますが、実際は新たに「段落」「見出し」が作られ、改行のようなことが起こります。(改行とどう違うのかは後ほど説明します)

プレビュー画面でも確認してみます。

段落改行(ユーザー画面イメージ)改行(イメージ)

1行空きに改行されていますね。
この1行空きのスペースの広さは、WordPressのテンプレートにより異なります。テンプレート側が、このスペース(空のサイズ)をデザインしています。(もしかするとテンプレートによってはスペースがないデザインになっている場合もあるかもしれません。)

「Enter」を使うと、新たなブロック(段落など)が追加され、表示上は改行されます。

「Shift + Enter」と「Enter」の違い

HTMLの話になります。実際使うときは特に違いを意識する必要はないので、説明が不要の方は読み飛ばしてください!

「Shift+Enter」と「Enter」では追加されるHTMLソース(タグ)が異なります。

改行(管理画面イメージ)

このHTMLソースをみてみます。

<p>吾輩は猫である。名前はまだ無い。<br>
どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。(『吾輩は猫である』より)</p>

「名前はまだ無い」の後に<br>があります。「br」は「break」の略です。文章を途中で「折る・割る」といったイメージになります。単に文章を途中で折り返しますよということなので、「ここから話が変わりますよ」といった意味合いはありません。HTML的にはこれが改行になります。

段落改行(管理画面イメージ)改行(イメージ)
<p>吾輩は猫である。名前はまだ無い。</p>
<p>どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。(『吾輩は猫である』より)</p>

一方、こちらは<p>~</p>で囲まれたものが2つあり「br」はありません。「p」は「paragraph」の略です。「段落」ですね。HTML的には段落を分けたという解釈になります。なので、少し話が変わったりするときは「br」ではなく、「p」を使う方がHTML的には適しています。

まとめ

「Shift+Enter」と「Enter」、(HTML的には違いがありますが)細かいことは抜きに、目的の見た目に合わせて使えば問題ありません。

1行空けたくないときは「Shift+Enter」
1行空けたいときは「Enter」

使っているテンプレートにより行間などのデザインは少し異なりますが、これだけ覚えておけば改行はマスターです。

Share