WordPress

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

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

改行について

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

改行とは

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

段落とは

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

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

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

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文はなるべく短くしましょう。
特に、スマートフォンの場合、横幅の制限による改行と手動でいれた改行が入りまじってしまい非常に読みづらくなってしまいます。

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

まとめ

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

ピックアップ記事

  1. 【用途別】無料で使えるSEO便利ツール16選&特徴・使い方まとめ
  2. 重複コンテンツはSEOではやっていけない?重複コンテンツに対処するには
  3. SEOのトレンド、モバイルファーストインデックス対策の方法と注意点
  4. 今さらきけないコンテンツSEOとは?施策のポイントや手順まとめ
  5. SEOにおけるパンダアップデートとペンギンアップデートの特徴・違い

関連記事

  1. WordPress

    WordPress(ワードプレス)で目次を簡単に作成する方法

    皆さんは、WordPressで作成した記事に目次を付けていますか?…

  2. WordPress

    【WordPressの基礎・始め方】半日でゼロからブログを立ち上げる方法

    「wordpressを初めて使うけどまずは何をすれば良いのか、、」と悩…

  3. WordPress

    こんなに簡単!?Photoshopで背景を透明にする方法

    画像の背景を透明にしないと画像を合成する時に背景が重なってしまい上手く…

  4. WordPress

    意外と簡単!!Photoshopを使って被写体の色を置き換える方法

    「既存の画像の色を変えたい」「デザインの一部分の色味を変更したい」…

  5. Photoshop

    Photoshopを使って画質を劣化させずに画像のサイズを変更する方法

    画質を劣化させずに画像のサイズを変更するための鍵は、解像度にあります。…

  6. WordPress

    WordPressでバックアップをとる方法【タイミング/用途別で解説】

    WordPressに限った話でなく、Webやアプリを公開・運営していれ…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

PAGE TOP