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

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

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

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

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

▼参考記事

2022.05.11

WordPressで改行が上手くできない！反映されない！訳が分からない！そんな時の解決策を教えます。

という野球好きなら分かって頂ける？？ 意味不明な説明をしてその場を切り抜けることが多いWordPr...

HTMLで改行を行う方法

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

<p>タグでの改行

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

HTMLで改行する方法１
段落ごとに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>タグは使用しない方向で考えれば間違いないです。

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

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

▼該当サービス

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