連続改行がうまく反映されない

WordPressの記事編集で、連続改行がうまく反映されないという経験をしたことはないでしょうか？ここでは、連続改行させる方法ではなく、改行したように見せかける方法について紹介します。

WordPressで連続改行を挿入するには

連続改行の話に入る前に、WordPressでの改行の仕様について確認しておきましょう。

WordPressの記事編集方法には、ビジュアルエディタとテキストエディタとがあります。こちらのページで紹介したように、それぞれの編集方法で改行のしかたが異なります。

• ビジュアルエディタ：[Shift + Enter]キー
• テキストエディタ：[Enter]キー

これらの操作方法を連続して行なっても、各エディタともに連続改行はうまく反映されません。

ここからは、ビジュアルエディタの例を見ていきます。

まず、1度だけ改行操作([Shift + Enter]×1回)した場合。

プレビューで確認すると、ちゃんと改行できています(下の画像は、テーマ「Twenty Fourteen」の例)。

次に、2度改行操作([Shift + Enter]×2回)した場合。

プレビューを見ると、先ほどよりも行間が広がっています。

そして、行間をさらに広げようと、10回の改行操作([Shift + Enter]×10回)をしてみました。編集画面上ではかなり広く空きました。

しかし、プレビューを表示させると、行間は広がっていません。

この現象は、テキストエディタでも同様に起こります。

連続改行させようとすると何が起こるのか

そもそも、改行の操作を繰り返して行間を空けようとする行為は、HTMLの記述において改行タグ(br)を複数並べようとしていることと同じです。

しかし、この記述はHTMLという言語の文法として正しくありません。WordPressでは、間違った文法で記事を投稿しないよう、自動的に修正してくれているのです。先ほどのプレビュー画面の例では、下記のようなHTMLコードで記述されることになります。

このように、ただ改行操作のキーを連打しただけでは、連続改行できないことが分かりました。

連続改行をしたように見せかける方法

そもそも、連続改行させたい理由は、段落どうしで適度に間隔を空けたいからではないでしょうか？

これを実現するには、スタイルシートを修正します。

例えば、テーマ「Twenty Fourteen 1.5」では、スタイルシート(style.css)内で下記のような指定があります。

p {
    margin-bottom: 24px;
}

これは、pタグ(段落)に対してmargin-bottom(下の余白)を24pxにしなさいという指定です。つまり、この余白をもっと広げたいなら、24pxよりも大きい値を指定する必要があるというわけです。

しかし、この方法ではサイト内の全ての段落に対して、余白を広げる指定をすることになってしまいます。

特定の段落だけ間隔を広げたい場合

ここで紹介する方法はテキストエディタのみ有効なのですが、特定の段落に直接スタイルを指定するというものです。

例えば、テーマ「Twenty Fourteen 1.5」を使っていて、通常(margin-bottom: 24px;)の倍くらい間隔を広げたい場合は、その段落に次のように記述します。

<p style="margin-bottom:48px;">
文章をここに書きます
</p>

このような指定を何度か使用する機会がある場合は、スタイルシートにクラス名を使った指定をするのがベターですね。
(クラス指定の解説については省略します。興味がある場合は、「スタイルシート クラス 指定」などのキーワードで検索してみてください。)