WordPressで改行や段落を挿入するには

当社が制作するWEBサイトには、ニュースやトピックスのコンテンツ管理にWordPressを導入するケースが多い。本公開後、クライアントがニュースを掲載しようとするときによくある質問が「改行すると、行間が広くあいてしまうんだけど・・・」というもの。
WordPress初心者が感じる疑問のひとつだ。ふだん、業務で使い慣れているMS-Wordとは挙動が違うので戸惑ってしまうわけだ。

慣れてしまえばどうってことはないが、質問を受けることが多いので、今回は、WordPressの投稿画面で改行や段落を挿入するときのコツを紹介しておこう。

「CMSで改行すると、行間が広くあいてしまうんだけど・・・」
WordPressでは、改行にならない「Enter」キーの正体
WordPressで改行したければ「Shift+Enter」キーを打ち込むべし
段落と段落の間を調整したい
読みやすいページは余白がきれい

「CMSで改行すると、行間が広くあいてしまうんだけど・・・」

この質問の「改行」、おそらくこのクライアントは文章の途中で次の行にカーソルを移したくて「Enter」キーを打ち込んでいると思われるが、この操作は「改行」ではなく「改段落」の操作をしてしまっていることをご存じだろうか？
では、改行はどうするのか？
「Shift+Enter」キーを打ち込むことで「改行」させることができる。実は、この考え方はMS-Wordでも同じなのだ。MS-Wordの例を下に示しておく。

WordPressでの改行位置

ここでは話が混乱するので、もっと詳しく知りたい方は以下のページなどを参考にしてほしい。

「改行=Enter」じゃないって知ってた? 皆が知らないWordとPowerPointの罠！

WordPressでは、改行にならない「Enter」キーの正体

WordPressの投稿画面では、「Enter」キーを打ち込むとその前のテキストの塊をひとつの段落としてまとめ「pタグ」で括るようにHTMLが自動展開されている。下の画像では、赤ラインの部分にカーソルを位置させ「Enter」キーを打ち込んだ場合の見え方と自動展開されるHTMLを示している。

WordPressでは、改行にならない「Enter」キーの正体

「Enter」キーを打ち込むと、カーソル位置で「改段落」され、次の段落との間に規定された余白が作られる。

HTMLは、以下のように生成されている。

改行したあと

WordPressで改行したければ「Shift+Enter」キーを打ち込むべし

先に触れたように文章中で次の行に「改行」したければ、「Shift」キーを押しながら「Enter」キーを打てば、不意な余白が発生することなく改行することができる。下の画像では、その状態を示す。

WordPressでは、改行にならない「Enter」キーの正体

改行させたいところにカーソルを位置させ、「Shift」キーを押しながら「Enter」キーを打つ。

余白はない

HTMLは、pタグではなく改行を指示する「brタグ」が追加されている。

「brタグ」が追加されている

以上が、「Enter」キーだけを打ち込んだ場合と「Shift＋Enter」キーを打ち込んだ場合のWordPressの挙動の違いだ。「挙動を逆にすればいいのに」と思ったりもするが、こればっかりは慣れてもらうしかない。

段落と段落の間を調整したい

見た目に凝りだすと段落と段落の間を「もう少し広く」などと調整したくなると思うが、残念ながらWordPressの管理画面上にはその部分を簡単に修正できる機能を備えていない。この場合は、先ほど説明した「Enter」キーを打ち込んで自動展開される「pタグ」に対してスタイルシート（css）の「マージン（margin）」を調整する必要があるが、これは、制作会社に依頼するかスタイルシートに詳しい方に作業してもらう方がいいだろう。