大阪のホームページ制作会社 株式会社TREVO
スタッフブログ

WordPress(ワードプレス)での改行と段落の使い分けについて

2020.10.21.

WordPress

twitter Facebook Pocket LINE はてブ

株式会社TREVOの月額制ホームページ制作サービス
PR

WordPress(ワードプレス)で記事を書いていると改行をしたのに余白が空きすぎたりなど思い通りの改行ができないことがあります。
特にWordPressを使い始めてた方は、意図しない改行に悩んでしまうことがります。
WordPressで記事を書く場合は、ビジュアルエディターとテキストモードがあり、ビジュアルエディターを使うときに改行と段落の使分けが出来ていないと読みにくい文章になってしまいます。
そこで記事を書く場合いの改行と段落の使分けを紹介していきます。

改行と段落の違い

改行は違いは
改行:文章を区切り次の行に変える
段落:文章を一つのまとまりとして区切る
になります。

改行と段落を使い分けるとユーザーが読みやすい文書になります。
特に長文の記事を場合は使い方を覚えておく必要があります。

20201021 2 2
「改行」は「文章を区切り次の行に変える」ことでHTMLマークアップする場合は改行したい位置に<br>タグを使います。
「段落」は「文章を一つのまとまりとして区切る」ことでHTMLマークアップする場合は、文章全体を<p></p>タグで囲います。

WordPressでの改行と段落の設定方法

WordPressに慣れていない方は「Enter」で「改行」を行っている場合が多いですが、「Enter」だと「段落」になります。
改行は「Shift」+「Enter」で行うようにして下さい。

 入力マークアップ
改行Shift + Enter<br>
段落Enter<p></p>

改行してるのに出来ない場合

WordPressの管理画面では改行しているのに、プレビューをすると改行が反映されていない場合あります。
それはWordPress内で自動整形が行われている可能があります。

・プラグインによる解決方法
自動整形を無効にするには、プラグインをインストールすることで解決できます。
プラグインの「TinyMCE Advanced」をインストールして、オプションの設定を変更することで改行無効を解決できます。

・function.phpでの解決方法
function.phpに下記のコードを追加すると自動整形を無効にすることが出来ます。

remove_filter( 'the_content', 'wpautop' );// 記事全体の自動整形の無効化
remove_filter( 'the_excerpt', 'wpautop' );// 記事抜粋の自動整形の無効化

※function.phpを変更する場合は必ずバックアップを取るようにして下さい。

改行はスマートフォン対応のwebサイトだと読みづらくなる場合もあります

ここ最近のwebサイトはスマートフォン対応(レスポンシブウェブデザイン)が基本となっています。
横幅の広いPC表示の時は改行して読みやすい文章も、スマートフォンで見ると改行位置がズレるので読みずらい文章になってしまいます。
スマートフォン対応のサイトは「改行」を使わずに「段落」を使う方が読みやすい文章になります。

まとめ

webサイトのでの文章の書き方は、書籍などの印刷物と異なり、明確なルールがありません。
ユーザーの環境によって画面幅が異なる上、ページをスクロールして読むので印刷部のルールをあてはめる事が出来ません。
webサイトではユーザーが読みやすいように改行・段落を使うことが大切です。
読みずらい文章のwebサイトはユーザーにストレスを与え直帰率が高くなる原因になってしまいます。
webサイトではユーザーとって読みやすい文章構成になるように上手に改行・段落を使い滞在時間を長くすることが重要です。

経歴: 3DCG制作の専門学校を卒業後、デザイン会社に就職。デザイン会社では主にWEB制作を担当し、旅館の予約システムや商店街にWEBカメラを設置したプロモーション等を展開し、4年後に転職。 株式会社TREVOでデザイン、コーディング、ディレクション、システム開発を担当

twitter Facebook Pocket LINE はてブ

関連の記事

お見積もり