特集・記事リスト 記事・特集リスト
資料ダウンロード 無料お役立ち資料
本サイトについて 本サイトについて
お問い合わせ お問い合わせ
閉じる

WordPress(ワードプレス)の改行・段落作成における注意点

改行や段落は記事の内容を読みやすくするためにとても重要な役割を果たします。しかしWordpressで記事を作成する際、改行が反映されなかったり、思い通りに改行ができなかったりすることはありませんか? 今回はWordpressで綺麗に改行・段落を整える方法を紹介します。

カテゴリ: WordPress
特集: WordPress特集

WordPressで記事を作成する際、改行が反映されなかったり、思い通りに改行ができなかったりすることはありませんか?
今回はWordpressを利用する際に意外と厄介な「改行」と「段落」について紹介していきます。

改行について

ユーザーにとって読みやすいコンテンツを作るために、適切な改行は非常に重要です。ここでは、Web上で見やすいコンテンツを作るために理解しておきたい「改行」と「段落」の違いを解説します。

改行とは

改行とは、一般的に文章を区切ることによって見やすくすることを言います。改行で文と文の間をあけることにより、意味や内容の切れ目が視覚的に理解できたり、文章全体をパッと見た時に「読みやすそう」という印象を与えられたりします。一般的には「段落を変える」時にも「改行」という言葉を使うのですが、Webの文章では「段落」の中でも改行をすることがあります。

段落とは

段落も改行と同様、一般的な段落とWeb上での段落に違いがあります。紙の書籍では文章の最初に1マスを空けることで、段落と段落の境目をわかりやすくしています。しかしWeb上ではこのように1マス空けただけでも読みづらいことが多いです。

対策としてWeb上の文章で主流となっているのが、「余白」を空けることです。

このように、段落と段落の間に余白が入ることで、段落の切れ目がわかりやすい、読みやすい文章になります。

WordPressの管理画面での改行と段落

改行には、
・Shift+Enterをおす場合
・Enterのみをおす場合
の2パターンがあります。

テキストエディタでは、2つの改行に違いはありません。
しかし、ビジュアルエディタの場合、
・Shift+Enter→改行のHTMLタグ<br />が挿入される
・Enterのみ→文章が改行のHTMLタグ<p>で囲まれる
といった違いがあります。

このように、ビジュアルエディタで編集している場合、Shift+Enterによる改行とEnterの改行は違うものとして扱われます。
ただし、Shift+Enterでの改行は、スマホのような横幅が狭い画面では見にくくなってしまう特徴があります。スマホなど画面幅が狭い端末で表示させるようなサイトの場合は、あまり推奨できません。

WordPressの管理画面における改行の注意点での段落

WordPressで段落と段落の間に空白を作りたい場合、注意点が一つあります。それはEnterキーを連打する必要はなということです。管理画面では余白が少なく見えるため、改行を連打しがちです。しかし配信されたブログを見ると、思った以上に余白が多いと感じたことがある人は意外と多いでしょう。一回だけEnterキーを押せばちゃんと空白はできるので、特別な意図がない限り、Enterキーは1回だけでいいと考えてください。

正しい改行と段落の挿入方法

改行する場合はShiftキー+Enterキー、段落する場合はEnterキーを押すことはご紹介しました。続いては文章に改行や段落を挿入する具体的な方法をご紹介します。

改行を挿入する場合

WordPressの記事作成画面を開き、文章の中の改行を挿入したい箇所をクリックします。
今回はこの赤い部分に改行を入れたいので、ここにカーソルを合わせます。
ShiftキーをおしながらEnterキーを押すと改行が挿入されます。

「テキスト」タブをおすとHTMLソースが確認できます。<br>が入っていますね。

段落を挿入する方法

改行と同様に段落を挿入したい箇所をクリックします。Enterキーを入力すると文章を段落で区切ることができます。

HTMLソースを見ると、段落の<p>~</p>が追加されていることが確認されます。

改行ができない

WordPressで改行が反映されなかったり、思った通りに改行できず、イライラした経験はありませんか。

実はこのような場合、
WordPress側でシステムの問題が発生していることが多いです。
以下で発生している可能性がある問題と、対応方法をご紹介します。

WordPressの自動整形が原因

これは、Wordpressについている機能の自動整形機能が原因です。改行を思い通りにしたい場合はこの自動整形を無効にする必要があります。

そもそもWordpressはWebの知識がなくてもブログやサイト運営ができるように開発された仕組み。Web知識がない人向けのサポートが自動で組み込まれており、そのひとつが「自動整形」です。例えば、タグを閉じないといった凡ミスがあると、足りないコードをWordPressがコード常に自動で追加するといったことが起こります

自動整形機能を停止させると、自分が書いたコードがそのまま反映されることになるため、間違いの修正などもされなくなってしまいます。それを防ぎたい場合、必要な部分だけ停止しましょう。

 

自動整形を無効にする方法

自動整形を無効にするには
・wpautopの機能を解除するコードを追記する方法
・プラグインを利用する方法
の2つの方法があります。

手軽に自動整形を無効にしたい場合は、コードを追記するのが良いですが、この方法だと「Enter」処理機能もオフになってしまいます。その場合、必要に応じて他のタグを入れる必要があるので、コーディングが面倒になってしまいます。文章量が多い時はプラグインを利用するのも一つの方法です。

コードを追記する

自動整形はwauptopという関数がはたらいています。なのでwpautopの機能を解除するコードを追記するだけで機能をオフできます。
追記はワードプレス上の「外観」→「テーマの編集」から行います。

画面右端にある「テーマファイル」から「テーマのための関数」を選択

真ん中にコーディングできる画面が表示されるので、以下のコードを入力する
remove_filter( ‘the_content’, ‘wpautop’ );

最後に「ファイルの更新」をクリックして保存します。

プラグインを利用する

「Tiny MCE Advanced」というプラグインを利用すると、比較的簡単に自動整形をオフできます。まずは「プラグイン」→「新規追加」を開きます。

新規追加画面から「Tiny MCE Advanzed」をインストールすると、「設定」に「Tiny MCE Advanzed」が表示されます。
「Tiny MCE Advanzed」をクリックすると管理画面が表示されるので、スクロールし「高度なオプション」という項目にいきます。「段落タグの保持」にチェックをつければ完了です。

 

適切な改行で文章を見やすくするためのポイント

段落間の余白を空けること以外にも、ユーザーにとって読みやすいコンテンツを作成するためのコツを何点かご紹介します。

ユーザー目線で読みやすくなっているか見直す

一番重要なのが、ユーザーにとって読みやすいかを基準にして文章を区切ること。そのためには、WordPressに入稿したコンテンツを自分でしっかり見返すことが重要です。管理画面だけで見ているとわかりにくいので、必ずユーザーが見る画面と同じ見た目で読み返し、段落が必要な部分や、逆に入れすぎな部分がないか確認しましょう。
このとき、スマホ画面でも見直しすることをおすすめします。

 

やたら改行しない

余分な箇所での改行を避けるためにも、読点「、」の場所では改行せず一文が終わった句点「。」のところで改行を入れるようにしましょう。

1文を短くする

余白を作り、適度な改行をし、さらに読みやすくするには、1文を短くすることを心がけましょう。特にスマートフォンで読んだ時いくら改行や段落を入れたとしても、1文が長いと改行が増えてしまいます。(例をはる)改行を減らすためにも、1文はなるべく短くしましょう。
特に、スマートフォンの場合、横幅の制限による改行と手動でいれた改行が入りまじってしまい非常に読みづらくなってしまいます。

余分な箇所での改行を避けるためにも、読点「、」の場所では改行せず一文が終わった句点「。」のところで改行を入れるようにしましょう。

まとめ

・改行と段落の違い
・正しい改行と段落の挿入方法
・改行ができない場合の対処法
・文章を見やすくするポイント
について説明してきました。
改行と段落をうまく使い、ぜひユーザーにとって読みやすいコンテンツを作ってみてください。


最後までお読みいただきましてありがとうございます。ご意見・ご要望などございましたら、
以下のフォームよりお問い合わせを受けつけておりますので、よろしければご利用ください。

この記事がお役に立ちましたら、"いいね!"をお願いします
minwebの最新情報をお届けします

杉山 夏子

”共に考え、共に創るWebの成功戦略”というスローガンのもと、お客様と一からWeb戦略を考え、
企画し実装まで支援する伴走型Webコンサルティング会社です。

こちらの記事をお読みのかたにおすすめ!完全無料のダウンロード資料

無料でできるWebマーケティング11選  <MIDORIBON>

ダウンロード資料画像

Webマーケティングに取り組もうとしている方に向けて、無料で利用できるWebマーケティングに役立つツールを9つ集めました。ツールの始め方からWebマーケティングに利用するメリット、実践的な活用方法まで解説します。

コストをかけずにまずはWebマーケティングに取り組んでみたい思いの方にぴったりの一冊です。

そのままの計画で、目標達成できますか?

Webマーケティングには予想外な事態がつきものであることを私たちは理解しています。
考えて、考え抜いて設計したはずのKPIが全く達成されずに、形骸化し誰も触れない状態になっている。

サイト内でユーザーがどのような行動をとっているかを解析

自社と競合を比較し、どこが勝っていてどこが弱みなのかを浮き彫りに

ユーザーのニーズや業界動向等を調査し、状況にあった施策を提案

課題解決のポイント、目標達成のプロセスなど
Webサイトの成長につながる具体的な手段をご提示いたします

運営会社

Web制作・広告・コンサルティングのセルリア

サービス一覧
会社概要