改行とは、文章の一区切りで行を下げること、段落とは、1つの意味を持つ長い文章の段落を変えることを指します。

WordPressのビジュアルエディターを使っていて「意図しているよりも文の間が広くなり過ぎてしまう」といった悩みを初心者の方からは聞くことがあります。
そこでこの記事では、Webでの改行と段落の使い方と、WordPressでの改行と段落の挿入方法などを紹介します。

正しく改行と段落を使いこなすために、ぜひ参考にしてください。

改行と段落の違い

冒頭でも触れたように、改行と段落の違いは以下のようになります。

改行:文の行を小さな区切りで変える(次の行に移動する)
段落:文章を大きなまとまりで区切る(1行分のスペースを空ける)

HTMLタグにすると、改行が<p></p>、段落は<br />になります。
WordPressのビジュアルエディターでは自動挿入されるこの2つのタグですが、明確に使い方が異なりますので、正しい使い方をマスターしましょう。

書籍とWebの改行と段落の扱い方

実は書籍とWebでは、改行と段落の使い方が異なりますので、まずはそれを理解しておきましょう。

書籍の場合は文字の通り、改行は行を改める(次の行に移る)、段落は段を落とす(最初の一文字を空ける)ということになります。
しかしWebの場合は、改行は行を改める、段落は文の間に1行空けるというのが一般的に広まっています。

Webの表記に厳密なルールがあるわけではありませんが、パソコンやスマートフォンでスクロールしながら文章を読む際に、書籍のように段を落とすだけだと非常に読みづらくなってしまいます。

また、書籍で読むときとWebで記事を読むときでは読者の集中力も大きく異なります。書籍を手にしているときはしっかりと活字から情報を得ようとしている、Webでは手早く情報を求めているといった違いもあります。

こういった違いから、Webでは段落の使い方が独自に変化していったと考えられます。

しかし、一部のメディアや官公庁では、Webでも段を落としていることがありますので、どちらが正しいというわけではなく、メディアごとにルールを決めて運用していくのが正しいと言えるでしょう。
ただし、段を落とす場合でも、書籍のように行を開けずに文章を詰めていくと、Webでは離脱率が高くなりますのでご注意ください。

改行と段落のそれぞれ使うべきケース

改行と段落のそれぞれの使い方ですが、基本的にはユーザーが読みやすくするように心がけましょう。

もしこの記事が改行と段落を全く使用しておらず、ページびっしりに文字を詰めて書いていたとしたら、多くのユーザーはファーストビューページを開いたとき)で「この記事は読みづらい」と判断して離脱してしまいます。

本来であれば、先ほど触れた<p></p>と<br />の違いをきちんと理解し、ユーザーだけではなくGoogle検索エンジン)にも正しく文章のまとまりを伝えることが重要です。しかし、正しいマークアップを意識するあまりに、びっしり文字の詰まった記事を作ってしまってはユーザビリティは悪くなってしまいます。

そのため、まずはユーザーの読みやすさを考慮し、パソコン・スマートフォンでスクロールしながらでも読みやすい改行と段落を意識します。ただし、文の途中での改行はかえって読みづらくなってしまいますので、原則使用しないように注意してください。

<p></p>と<br />の違い

ユーザーの読みやすさを優先とはしたものの、正しいHTMLマークアップを意識したいという方もいるかと思いますので、もう少し深掘りして解説します。

<p></p>タグで囲った文章は1つの文章のかたまりであることを表し、<br />タグは単に改行を行うことを表します。
WordPressのデフォルトでは、ページのソースコードを確認しない限りは<p></p>や<br />を確認することができませんが、TinyMCE Advancedなどのプラグインを使用すればマークアップを確認できるようになります。

Google検索エンジン)は正しいHTMLでのマークアップを推奨していますが、<p></p>と<br />を正しく記述できていない場合でもペナルティを受けてしまうようなことはありませんので、やはりまずはユーザビリティを高めるよう意識しましょう。

WordPressで改行を挿入する方法

では、実際にWordPressで改行を挿入する方法をみていきましょう。

WordPressのビジュアルエディターで改行を挿入するにはShift + Enterを同時押しして入力します。Shiftを押さずにEnterを入力してしまうと、この後紹介するように段落の入力になってしまいますので、1行分スペースが空いた状態での表示となってしまいます。

テキストエディターの場合は、Enterを押してエディター上で改行すると自動で<br />が挿入されるようにデフォルトの設定でなっています。もちろん<br />をエディター上で入力してもきちんと反映されるため、エディター上でも正しくマークアップしたいという方は<br />を入力しましょう。

WordPress(ワードプレス)で段落を挿入する方法

続いて段落を挿入する方法です。

先述の通り、ビジュアルエディターで段落を挿入するには、任意の箇所でEnterを入力すると段落が変わります。
この1段落の範囲が<p></p>タグで囲われることになります。

テキストエディターの場合、改行と同じく段落を変える(文間を1行空ける)と<p></p>タグが自動で挿入されます。つまり、段落を変えずに改行のみで文章を続けていくと、その文章は全て一つのかたまりとしてマークアップされることになります。

これはユーザビリティの観点でも正しいマークアップという観点でもよろしくありませんので、言及する文章の内容が移り変わるタイミングで段落を変えるようにしましょう。
Webで文章を読むときには、集中力を持たせるために2〜3文程度で段落を変えるのがいいとされています。

改行と段落を工夫して読みやすい記事に

Webでの改行と段落の扱い方は、書籍や学校で習った作文のような扱いとは異なります。Webの文章はパソコンやスマートフォンなど、スクロールしながら読むことになりますので、動体視力を使いながらでも認識しやすい改行・段落を入れてあげることがユーザビリティを高めることになります。

改行と段落は、ページの滞在時間を長くする、直帰率を低くするという観点でも重要なポイントですので、読みやすい記事構成になるように工夫して取り入れてください。

WordPress(ワードプレス)の操作について他の記事を読む

非エンジニアでも簡単!WordPress(ワードプレス)のフォントを変更する方法

非エンジニアでも簡単!WordPress(ワードプレス)のフォントを変更する方法

WordPressは、制作に関する専門的な知識がない人でも、洗練されたホームページを構築でき、手軽に運用ができる魅力的なCMSです。優れた機能を搭載しながら無料で様々なテーマを利用できますが、テーマ以外にも印象を大きく変えるものの1つに「フォント」が挙げられます。WordPressのフォント変更はそれほど難しくないため、今回解説する方法の中で取り組みやすいものを試してみてください。

WordPressでアイキャッチを設定する方法

WordPressでアイキャッチを設定する方法

様々なコンテンツがあふれるインターネット社会では、ユーザーに読んでほしい記事をクリックしてもらうための工夫が欠かせません。いかにユーザーに興味深いと感じてもらえるタイトルを付けるか、記事の内容が一目で伝わるアイキャッチ画像によりスムーズにクリックを促すかなど、まさにクリエイティブ合戦とも言える世界です。

WordPressのWebサイトで表を作成する方法

WordPressのWebサイトで表を作成する方法

Webサイト運営をするうえで、ユーザーの検索ニーズに応えるコンテンツを作成するために、できるだけ分かりやすく情報を提供することは欠かせません。そのためには、図や表を使った解説は必要不可欠とも言えます。競合するコンテンツよりもハイクオリティであるために、手軽に図や表を作成できる準備をしておきましょう。 今回は、WordPressを使った表の作成方法にスポットをあてました。ユーザーの満足度を高められるコンテンツを作成するために、ぜひご参考ください。