当社が制作するWEBサイトには、ニュースやトピックスのコンテンツ管理にWordPressを導入するケースが多い。本公開後、クライアントがニュースを掲載しようとするときによくある質問が「改行すると、行間が広くあいてしまうんだけど・・・」というもの。
WordPress初心者が感じる疑問のひとつだ。ふだん、業務で使い慣れているMS-Wordとは挙動が違うので戸惑ってしまうわけだ。
慣れてしまえばどうってことはないが、質問を受けることが多いので、今回は、WordPressの投稿画面で改行や段落を挿入するときのコツを紹介しておこう。
「CMSで改行すると、行間が広くあいてしまうんだけど・・・」
この質問の「改行」、おそらくこのクライアントは文章の途中で次の行にカーソルを移したくて「Enter」キーを打ち込んでいると思われるが、この操作は「改行」ではなく「改段落」の操作をしてしまっていることをご存じだろうか？
では、改行はどうするのか？
「Shift+Enter」キーを打ち込むことで「改行」させることができる。実は、この考え方はMS-Wordでも同じなのだ。MS-Wordの例を下に示しておく。
ここでは話が混乱するので、もっと詳しく知りたい方は以下のページなどを参考にしてほしい。
WordPressでは、改行にならない「Enter」キーの正体
WordPressの投稿画面では、「Enter」キーを打ち込むとその前のテキストの塊をひとつの段落としてまとめ「pタグ」で括るようにHTMLが自動展開されている。下の画像では、赤ラインの部分にカーソルを位置させ「Enter」キーを打ち込んだ場合の見え方と自動展開されるHTMLを示している。
「Enter」キーを打ち込むと、カーソル位置で「改段落」され、次の段落との間に規定された余白が作られる。
HTMLは、以下のように生成されている。
筆者おすすめ、とっつきやすい WordPress 参考書（１）
小さなお店&会社の WordPress超入門 ―初めてでも安心! 思いどおりのホームページを作ろう!
筆者おすすめ、とっつきやすい WordPress 参考書（２）
「いちばんやさしいWordPressの教本第3版 人気講師が教える本格Webサイトの作り方」
筆者おすすめ、とっつきやすい WordPress 参考書（３）
「Web担当者のためのWordPressがわかる本」
WordPressで改行したければ「Shift+Enter」キーを打ち込むべし
先に触れたように文章中で次の行に「改行」したければ、「Shift」キーを押しながら「Enter」キーを打てば、不意な余白が発生することなく改行することができる。下の画像では、その状態を示す。
改行させたいところにカーソルを位置させ、「Shift」キーを押しながら「Enter」キーを打つ。
HTMLは、pタグではなく改行を指示する「brタグ」が追加されている。
以上が、「Enter」キーだけを打ち込んだ場合と「Shift＋Enter」キーを打ち込んだ場合のWordPressの挙動の違いだ。「挙動を逆にすればいいのに」と思ったりもするが、こればっかりは慣れてもらうしかない。
段落と段落の間を調整したい
見た目に凝りだすと段落と段落の間を「もう少し広く」などと調整したくなると思うが、残念ながらWordPressの管理画面上にはその部分を簡単に修正できる機能を備えていない。この場合は、先ほど説明した「Enter」キーを打ち込んで自動展開される「pタグ」に対してスタイルシート（css）の「マージン（margin）」を調整する必要があるが、これは、制作会社に依頼するかスタイルシートに詳しい方に作業してもらう方がいいだろう。
読みやすいページは余白がきれい
読みやすいWEBサイトは、文章自体の読みやすさはもちろんだが、ページ全体の余白の使い方が上手い。筆者は、技術情報を求めて日に何十回と検索をかけ、何十とページを読むが、そのさい行間が詰まっていて段落が取られていないページだと読む気がせず、次の検索結果から違うページに進むことがよくある。
上記のことは、訪問者が読むニュースやトピックスについても同じことがいえる。このコラムの読者には、改行と段落を上手く使いこなしてもらい、読みやすいページ作りを心がけてほしい。