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

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

改行について

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

改行とは

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

段落とは

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

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

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

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

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

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

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

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

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

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

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

改行を挿入する場合

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

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

段落を挿入する方法

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

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

改行ができない

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文はなるべく短くしましょう。特に、スマートフォンの場合、横幅の制限による改行と手動でいれた改行が入りまじってしまい非常に読みづらくなってしまいます。余分な箇所での改行を避けるためにも、読点「、」の場所では改行せず一文が終わった句点「。」のところで改行を入れるようにしましょう。