WordPressを利用したブログで改行を行うときに使用するHTMLタグと正しい使用方法

改行が上手く出来ない理由

WordPressを利用したブログを運用しているお客様から、「改行が上手く出来ないんだけど・・・」とご連絡を頂くことがございます。確かにWordpressの改行って自動整形機能というのが作動して意図しているモノとは違う改行となるケースがあります。

WordPressのバージョンによるものなのか、プラグインのバグなのか、私の知識が薄いのか・・・・・私どもも理解が出来ないケースがたまにあります

今回はその時に利用出来る対策として、基本のhtmlソースについてお伝えしたいと思います。

▼参考記事

HTMLで改行を行う方法

HTMLで改行をする方法は主に3種類あります。
実際のページでの見え方は全て同じですが、それぞれ用途が異なりますのでここでは簡単にその違いをご紹介いたします。

<p>タグでの改行

<p>タグとは段落を指定するためのタグで、文章を改行するときの一番オーソドックスな方法です。文章を<p>タグで囲うと改行されます。

HTMLで改行する方法1
段落ごとにpタグで囲えば改行されます。
適度に改行を入れて見えやすく構成しましょう

<p>タグを使用するときは段落を表すところに使用します。
見た目<br>タグで改行しても同じになるのですが、検索エンジンに正確に伝えるため段落ごとに<p>タグで囲いましょう。

<br>タグでの改行

<p>タグは段落を指定するタグに対し、<br>タグは改行を指定するタグです。
改行したい場所に<br>を入れるだけで改行されます。

HTMLで改行する方法2
brを入れたところが改行されます。
適度に改行を入れて見えやすく構成しましょう

作成した段落に長すぎる文章や、改行した方が見やすい文章がある場合に使用します。
段落内、つまり<p>タグで囲われている文章に使用します。

ただ、使用する回数が少ない方がどんな画面幅でもきれいに見えます。
むやみに使用してしまうと、PC画面では綺麗に改行されてるけど、スマホ画面では変なところに改行が発生しますので、利用箇所については十分に注意する必要があります。

<pre>タグでの改行

preタグについてはまずは下記の表示結果を確認してください。

HTMLで改行する方法3
エンターキーで改行したところが
そのまま本番環境に反映されます

preタグを使わず任意の場所で改行されていることが確認できますよね。preタグを使用する場合にはhtmlで表示されたそのままの状態がブラウザでの表示となるのが特徴なのですが、Wordpressを利用する場合には編集画面がその仕様になっているので敢えて使う事も無いです。

ちなみにpreタグは対応していないブラウザもありますので私としては使用はおすすめしません。

やってはいけない改行方法

HTML初心者の方や詳しくない方は、知らず知らずのうちに間違った改行方法をしてしまっているかもしれません。特に以下の方法はお勧めしませんのでご注意してください。

  1. <br>タグを連続して使用する
  2. <p>タグを連続して使用する

それぞれ確かに文章の間に間隔はとれますのでよくやりがちな例です。
この方法で改行することにより以下のような問題が生じます。

ブラウザによって見え方が異なる

ある程度適当にHTMLを書いても、最新のChrome などのブラウザは自動補正して表示してくれるようになっています。

通常であれば、以下のように<br>タグを連続して使用すれば、その分だけ改行されます。

しかし、連続する<br>をひとまとめにしてしまうブラウザも存在します。
そのブラウザを使用している方には、<br>を入れた分だけの余白がただの1つの改行タグとして表示されてしまいます。

そもそも、HTMLは文章の構造を定義するものであり、デザインに使用するものではありません。見た目を整えたりデザインを加えるときはCSSを使用するようになっています。

メンテナンス性が悪くなる

コンテンツ領域の横幅によって文章を読みやすくするために改行させる場合があると思いますが、横幅が変わるとレイアウトが崩れてしまします。

先ほども説明した通り見た目を整えたいときはCSSを使用して整えた方が後々のメンテナンスもスムーズに行えるでしょう。

検索エンジンにページの内容が正確に伝わらなくなる

検索エンジンはHTMLタグによって指定された文章構造を見ています。
正しくタグを使用していないとページの内容が正確に伝わらない可能性がありますが、直接的なSEOへの影響はありません。

問題となるのは、ユーザビリティやクローラビリティの低下に繋がる可能性があります。

具体的には、長い文章を区切るときに<br>タグだけ使ったり、<br>タグ・<p>タグを連続で使用すれば、文章の行間が詰まりすぎたり空きすぎたりします。そうすると、ユーザーが読みにくくなり、結果的にGoogleに評価されづらくなるというわけです。

こうした状況を回避するために適切な改行方法で、見やすく分かりやすいページを作成しましょう。

スマホページのみ改行をなくす

改行をあまり入れない方がいいことは分かったけど、どうしてもPCページだけ改行を入れたい!という場面は出てくると思います。

そんな時に使えるCSSがdisplay:noneです。
こちらは適用したものを非表示にさせるCSSです。

このように<br>にdisplay:noneを適用させれば、ブラウザサイズが480px以下の時のみ<br>での改行を非表示することができます。

まとめ

pタグ brタグ preタグこの3つを覚えて頂ければ、改行は大丈夫です。

どのように改行するのか?場所をブラウザにお任せするのであれば、<p>タグを使用する。
どうしてもの時だけ<br>タグを使用する。

<pre>タグは使用しない方向で考えれば間違いないです。

ご参考にして改行が上手に出来ているブログを作成して頂ければと思います。

そして、それでもご不明な点がございましたら、エクセレントにお気軽にご相談頂ければと思います。

▼該当サービス

ホームぺージレスキューサービス

ホームぺージ更新代行サービス

メールでのお問い合わせ

お問い合わせはこちら
メールフォームの内容をご確認頂きまして送信してください。

LINEでのお問い合わせ

お友達登録はこちら
お友達登録をして頂いて
お問合せ内容をトーク画面から送信してください。

SEO対策が得意なホームぺージ制作会社エクセレント

筒井 章年

1,000サイト以上のWeb集客のサポート経験を持つ。 その経験で得た知識や経験でホームぺージ戦略の立案やマーケティングを担当しています。多くの方に共有させて頂いて、多くの方に成功を実感して頂きたいと考えております。

関連記事

無料相談行っています!!お気軽にご利用ください。
最近の記事 おすすめ記事
  1. 外壁塗装会社がやるべきSEO対策のポイントとキーワードの選定方法を解説します。

  2. リフォーム会社がやるべきSEO対策のポイントとキーワードの選定方法を解説します。

  3. 外構工事・エクステリア業者がやるべきSEO対策のポイントとキーワードの選定方法を解説します。

  4. 歯科医院がやるべきSEO対策のポイントとキーワードの選定方法を解説します。

  5. コンテンツマーケティングって何?簡単にその特徴を説明します。

  6. メールマーケティングの現状と効果的な配信方法とは

  7. Web集客方法を業種別にまとめました。成功のポイントや種類など徹底解説!

  8. エクステリア・外構工事業者のWeb集客で利用出来るポータルサイトを紹介します

  9. 歯科医院・歯医者・矯正歯科専用のポータルサイト一覧

  10. 治療院の新規患者の集客にもう悩まない。最新のWeb集客のコツと考え方

  1. Googleにインデックスされない理由とその調査方法を解説します。

  2. SEO対策の内製化を積極的に取組んでいる中小企業の多くは自社でするSEO対策に迷走している。

  3. 売れているホームぺージ = 集客型ホームぺージに共通しているぺージ構成の法則

  4. これを見れば完璧!Google Maps API 取得方法をご紹介します。

  5. WordPressで投稿するブログで <br> と <br /> はどちらが正しいの?何が違うのか解説します。

  6. WordPressのブロックエディタを利用してページ編集する方法とその投稿方法

  7. Instagramのリールの音源を保存して活用する方法

  8. 「レンダリングを妨げるリソースの除外」という項目はプラグイン Autoptimize  を使って簡単に解決出来ます

  9. コピペで使える!ビジネスブログ向けのシンプルなCSSで飾る見出しデザイン30選

  10. 「使用していない JavaScript の削減」をプラグイン Flying Scripts でスピード解決する方法 

資料を無料ダウンロード

弊社の会社概要と、ご提供サービスのご紹介資料です。
ご覧いただき、お気軽にお問い合わせください。

TOP