KAORI CREATIVE

惹き寄せるビジネスワードプレスの作り方

ワードプレスで改行されない時の対処法・正しい改行方法

2019年ワードプレスで改行されない時の対処法・正しい改行方法

2019-10-24

ワードプレスの記事を作成する時、思うように改行が反映されずに困っているお客様が何人かいらっしゃいましたので、改行で見やすい文章にするための方法を説明しています。

  • 改行が消える、されない場合の対処法、改行の入れ方
  • 見やすく読みやすい文章にする改行(段落)の入れ方のポイント

キーボードの使い方さえよく確認すれば問題ありません。
また、読みやすさのために改行を作るときはスマホでの見え方を確認することも大事なポイントです。

ワードプレスの改行の入れ方:この2つを抑えればまずはOK

まずはこれらを覚えれば、基本的には改行したいところで改行ができ、空けたいところは空けることができます。

【改行する】単純に文章を2行に分けたい時

「改行」は文章を2行(以上)に分けたい時です。
改行したい箇所にカーソルを当てて次のようにキーを押します。この場合、htmlは改行を意味する<br>タグが挿入されます。

キーボードの打ち方

Windows: Shift + Enterキー

 Macintosh:Shift + returnキー

ブラウザの画面

改行(brタグ)を入れる

HTMLソース

サンプルのテキストです。<br>
お客さまの感想本文です。サンプルのテキストです。お客さまの感想本文です。

【段落を入れる】大きめの空きを入れて文のかたまり(段落)を作りたい時

段落は、文章の中の1つの固まり(1つの主題)で区切る時に使います。改行とは違い、区切りを明確にするため前後に大きめの空きが作られます。

改行したい箇所にカーソルを当てて次のようにキーを押します。この場合、htmlは段落を意味する<p>タグが挿入されます。

キーボードの打ち方

Windows: Enterキー

 Macintosh:returnキー

ブラウザの画面

段落(pタグ)を入れる

HTMLソース

<p>サンプルのテキストです。お客さまの感想本文です。サンプルのテキストです。</p>
<p>サンプルのテキストです。<br>
お客さまの感想本文です。サンプルのテキストです。お客さまの感想本文です。サンプルのテキストです。お客さまの感想本文です。</p>

まずはこれを覚えてやってみてください。思うように改行できるはずです。

それ以外の改行が反映されない・消える等、改行できない原因

その他には、タグが消えてしまう・予期せずタグが追加されてしまうことで思うような改行状態にならないケース。ワードプレスの「自動整形」機能が原因のものがあります。

自動整形機能は改行1つ1つのタグを書かなくても自動入力してくれて便利なのですが、ワードプレスのエディター(記事を書く画面)の「ビジュアル」「テキスト」のタブを1記事で両方使っているとよく起ります。

このような方は、自動整形機能をOFFにすることで解消されます。

  • 改行を連続して入れて「空白を大きく」作りたい
  • タグが勝手に削除されてしまうことを避けたい
  • 意図しない<p><br>タグが入ってしまうのを避けたい

ここではプラグインを使って機能を無効にする方法をお伝えします。

プラグイン「Tiny MCE Advanced」で自動整形をOFFにする方法

「Tiny MCE Advanced」をインストールしているなら、その機能をOFFにするチェックボックスがありますのでそれを利用します。

自動整形機能をオフにする

  1. ワードプレス管理画面:設定 > TinyMCE Advanced > エディター設定」の画面下「高度なオプション」
  2. 「Keep paragraph tags in the Classic block and the Classic Editor」のところにチェックを入れる
  3. 画面をスクロールして下にある「変更を保存」ボタンを押す

Tiny MCE Advancedはエディターに操作ボタンを増やせる便利な定番プラグインですから無い方はこの機会にインストールしてもよいでしょう。

メモ

その他にPHPファイルfunction.phpに記述する方法もありますが、ここではプログラムファイルを触らずに済むプラグインでOFFする方法のみをお伝えしました。

スマホでも見やすい画面にするための改行法

結論からお伝えするとスマホでは「コンパクト目に見せる」こと。その理由はスマホはパソコンよりも一度に見える範囲が狭いため、この方が読み手は情報を掴みやすいからです。具体的には以下の方法を実行してみてください。

  1. 一段落内の改行は基本的に入れない。
    入れるとしても1回程度で最小限に。
    (段落内で改行して行頭に大事な言葉を出すことで、埋もれさせずに伝わりやすくできる場合は<br>改行を入れる等、臨機応変に)

  2. 一段落を120文字〜200文字程度で短くし、小まめに段落を作る。
  3. 改行の箇所は「意味に区切りがあるところに入れる」が基本。

この方法よる効果は

段落の中は改行せず文章を連続させ、一段落の文字数をそこそこ短めにすることで、読み手は一段落単位で集中して読み切りしやすくなる。

ということにつきます。

この改行方法はワードプレスのデザインにも合わせやすい

今のワードプレスのテーマはほとんどが「レスポンシブ」という画面の解像度(横幅のピクセル数)に合わせてレイアウトを柔軟に変更させる手法で作られています。

それをパソコンでちょうどよいと思う箇所に改行(タグ)を入れると、そこは強制的に改行されるので幅の狭いスマホ画面では想定していない箇所で文字が残り、ブサイクに見えます。

個人の感覚値やユーザーにもよりますが、パソコンで一行をそのまま流し入れたら横幅が長すぎるのでは?という疑問は、一段落の文字数を多くしなければ、ストレスを感じる前に文がが区切られるので基本的には大丈夫です。

逆を言えば、長いと感じる前のところで改行(bタグ)と段落(pタグ)で区切ってください。それが段落作りです。

また、メジャーなワードプレスのテーマであれば、本文の横幅が見やすいデザイン設計になっているはずです。

今ご覧になっているワードプレスの画面

  • テーマは評判がいいAffinger(WING)
  • パソコン版の横幅は638px(この画面はカスタマイズしていて横幅700px)
かおり
改行余白をたっぷり使っていたブログが主流だった時は、インターネットをパソコンで見ることが多かったころ。つまりアメブロの人気がピークだった2010年〜2012年位までなのよね。
でもITオンチ、機械オンチの私には何だか難しそう。
ブロ子
かおり
そうかなあ。ブロコちゃん、携帯ってガラケー?
スマホ。アンドロイド。
ブロ子
かおり
だったら自分が普段ネットを見る時の感覚でいいのよ。
見やすいとか、見づらいとか半無意識で感じてるはず。それを記事作りの時に意識して反映させればいいのよ。
なるほどーそれならできそう!
ブロ子

見やすい文章にするための重要な2つのポイント

改行は、読み手に見やすい画面を提供するためですから、改行や文章整形をする際にはこの2つの点に注意してください。

  1. 書き手はパソコンで見て、読み手はスマホで見ていること
  2. SEOの視点でもタグは意味に合わせた使い方にする

以下、説明してゆきますね。

スマホはパソコンとは見え方が違う!「アメブロ式」改行法に要注意

女性起業家によく見られる特徴的なブログの書き方に「アメブロ的改行法」があります。それは一行を20文字程度で細かく改行し、連続改行をたくさん使って余白をたっぷりと作る画面。これをスマホで見ると少々残念な感じになります。

書き手はパソコン、読み手はスマホ。
画面を見ている環境が違うから見え方の印象が変わるのです。イメージ画像を見てください。

▼こまめな改行と多めの空白の画面。スマホでは情報が散らばって読みづらい

アメブロ式改行だとたくさんのスクロールが必要

ではこれを段落ごとに改行し、段落の中の改行は無し(最小限)にする方法で書いた画面が以下です。(Q.の質問は<p>タグで囲うことにします)

▼段落ごとに改行された画面。
一度に目に入る量がコンパクトで目の動きも最小限、スクロールも少なくて済む

最小限の改行ならスクロールは少なくてよい

▼この書き方のパソコン画面
一段落を適量に抑えれば、それほど見づらくならない

ワードプレスで改行を入れる例 pタグの場合

いかがでしょうか?

アメブロ独自のお作法的書き方はパソコン主流の時代にできた産物で、スマホでネットを見る現代には合わなくなってきているんですね。習慣的にやっている場合は、ご自分のブログをスマホで客観的にチェックしてみましょう。

また、Googleアナリティクスなどのアクセス解析ツールで、自分のブログの訪問者の使用デバイス(機器)を確認してみてください。

ブロ子
そうかー、なんかアメブロの先輩がそうやってたから無意識にやってた。
大事なことは「読み手に伝わりやすいか」「解決法を探しているユーザーが読んで嬉しいか」を常に考えることなの。
かおり
ブロ子
書くことばかりに気が行ってあまり考えてなかったかも。
うん。特にビジネスブログではブログで何を実現したいのか、目的をよく見直してね。それにそって意識してゆくだけでも読まれやすいブログになるよ。
かおり
ブロ子
意識かあ!ちょっとやってみる!

SEOの視点からもタグを適切に使うこと

見た目の改行を作るため、空きを広く取るために<p>や<br>使うのではなく、HTMLタグの意味を理解し、使う箇所に合ったタグ選びを心がけましょう。

なぜならWebブラウザも検索エンジンもWebページはHTMLというルールに則っとりウェブページの内容を認識するからです。
つまりPタグを使えば段落と理解し、Hタグを使えばそこは見出しとして文章の中でも重要な箇所としてGoogleも把握するんですね。

具体例は以下で画像とHTMLコードで説明します。

▼改行されないケース

お客様の声を記事にしたページで改行がうまくいかなかったケースの再現。聞くと原因はShift + Enterキーで改行したとのこと。おそらくその上に自動整形機能がタグを削除してしまい、うまく改行されなかったようです。

ワードプレスで改行されない例

改行の入れ方は、青文字の設問部分を<p>タグで段落を作る形で改行を入れることもできます。

▼Pタグで改行した場合

ブラウザの画面

ワードプレスで改行を入れる例 pタグの場合

 html
※見やすさのため一部省略
<p>Q1. 当スクールにご参加いただいた決めては何ですか?</p>
<p>サンプルのテキストです。お客さまの感想本文です。</p>

▼見出しタグで改行した場合

見出しタグを使えば、そのタグではさまれた文言をページの中で重要な内容としてGoogleは認識します。見出しはその下にくる内容が要約された一文だからです。

ブラウザの画面

ワードプレスで改行を入れる例 Hタグ(見出しタグ)の場合

H(見出し)タグを使って見出しにして立てることもできます。Hタグでは改行され、お使いのワードプレステーマのデザインが反映されます。
※上記画面は当ブログのH2の見出しデザインになっています。お使いのテーマによって変わります。

 html
※見やすさのため一部省略
<h2>Q1. 当スクールにご参加いただいた決めては何ですか?</h2>
<p>サンプルのテキストです。お客さまの感想本文です。</p>

ワードプレスの改行のまとめ:文章の内容に即して適切な改行タグを入れよう

ワードプレスの改行は、相手に内容をより把握しやすく理解しやすくなるための工夫です。

「記事作りはパソコン、読む人はスマホ」

これを念頭に置き、常に読みやすいかどうかを意識しながら、文章の内容に合わせて改行を使い分け、読みやすい画面作りに取り組んでいきましょう。

読みやすさは見出しや文字の太字やマーカーの強調、写真などの画像と合わせると、さらに読みやすさはアップします。

まずはご紹介した方法で記事を書いてみてください。そして時間を置いて目が新しくなったところでてスマホで確認してみる。こういう地味な作業が大きな違いを生み出します。

ご自身のブログサイトの想定ユーザーに心地よいと思われる画面作りをしてください。

-ブログ記事の書き方

Copyright© KAORI CREATIVE , 2019 All Rights Reserved.