WordPressで2行以上の連続改行させる方法

WordPressの編集画面で3回改行しても、記事を公開すると2回改行、要するに2行空白の行を作ったはずなのに、1行空白の行に強制的に変更されます。

2行以上の空白行を作る方法を解説します。



WordPress編集画面で2行空けて改行しても記事では1行空きの改行になる問題

上の画面は、WordPressの編集画面ですが、一番したの「あ」は、2行が空白行になるよう改行しています。

ところが、実際の記事には、1行空いた改行に自動変換されています。
これは、WordPressが強制的に2行以上の空白行を作らないようにしているためです。

空白行を2行以上作る改行方法

空白行を2行以上作るには、簡単なコードを追加することで実現できます。

2行の空白行を作りたい場合

下記の2行空白行を入れる場合の入力方法を解説します。

1行目
(空白行)
(空白行)
2行目

2行の空白行を入れたい場合の記述方法

WordPressの編集画面に、下記を入力することによって、2行の空白行を作ることが可能です。

1行目
<p style=”padding-top:1.9em;”>2行目</p>






この記述の意味

<p style=”padding-top:1.9em;”>2行目</p>」という記述は、各々下記の意味となります。

<p>

<P>から</P>の間にある文章が、ひとつの段落を意味します。

style=”padding-top

<P>に「style=”padding-top」と付けると、「この段落の前に○○文字分の空きを作りなさい」という指示です。

1.9em

em(エム)は、「1文字分の高さ」を意味します。

1.0em = 1文字分の高さ

「1文字分の高さ」であるため、「1行」と同じ意味になります。

<P style=”padding-top:1.9em;”

上記は「1.9文字分の空きを作りなさい」となります。

なお、本来なら「padding-top:2.0em」(行の前に2文字分の空きを作りなさい)が正しいのですが、僕のブログ記事で「2行空ける」と指定するには、「1.9em」がぴったりでした。

みなさんは基本的に「padding-top:2.0em」の指定で良いと思います。
好みによって、emの数値を小さくして上の行との間隔を狭めたり、逆にemの数値を大きくして上の行との間隔を広くすると良いでしょう。

実際に2行の空白行を開けた例

下記の通り、記事では綺麗に2行の空白行ができます。

編集画面上での記述

1行目
<p style=”padding-top:1.9em;”>2行目</p>

実際の記事での表示

1行目

2行目






(まとめ)空白行は無理やり作らずHTML文やCSSで調整しましょう

空白行を作る手段として、半角スペースを入れるといった方法も考えられますが、Googleが半角文字だけの行を読み取った時に、何の意味を示す行であるか判別付かないと思います。

従って、空白行を入れたいなら、今回ご紹介したHTML文で空白行を入れるか、予めCSSで行間を広く設定する等、Googleにも解釈できる方法で行間を調整しましょう。