WEB制作コラム (WordPress)

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


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

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

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

「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)」を調整する必要があるが、これは、制作会社に依頼するかスタイルシートに詳しい方に作業してもらう方がいいだろう。

読みやすいページは余白がきれい

読みやすいWEBサイトは、文章自体の読みやすさはもちろんだが、ページ全体の余白の使い方が上手い。筆者は、技術情報を求めて日に何十回と検索をかけ、何十とページを読むが、そのさい行間が詰まっていて段落が取られていないページだと読む気がせず、次の検索結果から違うページに進むことがよくある。

上記のことは、訪問者が読むニュースやトピックスについても同じことがいえる。このコラムの読者には、改行と段落を上手く使いこなしてもらい、読みやすいページ作りを心がけてほしい。

別のコラムにもヒントがあるかも・・・

WordPressを活用したCMS、堅牢なシステムの構築なら

WEBシステムが誕生する以前、汎用機と呼ばれた大型コンピュータの大規模システム開発を経験してきたシステムエンジニアが約30年の経験をもとに御社のWEBアプリケーションを設計、構築。当社のシステム構築は、WordPressを活用したCMSにとどまりません。

WEBサイトの課題抽出、到達すべき目標、方法の設定、目標に達するためのコンテンツ企画、目指すべきコンバージョン率、件数の設定、目標達成までのサポート:お電話 06-4790-7270

とりあえずフレイバーズに聞いてみる

良いクライアントに恵まれていることも、フレイバーズの強み

上場企業をはじめとして、業界で確固たるポジションにあるクライアントに恵まれ、日々良い刺激をいただいています。

WEBサイト構築実績をチェックする

フレイバーズに、ご相談されませんか?

ビジネスを伸長させるための、次のWEB戦略、WEB運用についてご提案します。

メニューを閉じる