Shiftキーで何がかわる?WordPressでわかる改行のちがい

PタグBRタグの違い

WordpPressで本文を入力していて改行するとき、普通はEnterキーを押しますよね。
実は、改行にはもうひとつ、Shiftキーを押しながらEnterキーを押す方法があります。

実際にやってみましょう。
まずは、普通にEnterキーを押して改行した場合。

・場所 豊中市蛍池中町3-9-20

・日時 2014年12月1日(月)

・費用 無料

つぎに、Shiftキーを押しながら、Enterキーを押して改行した場合。

・場所 豊中市蛍池中町3-9-20
・日時 2014年12月1日(月)
・費用 無料

見た目で違うのは行間のスペースですね。行間が詰めて表示されています。(WordPressのテーマによっては、なにも変わらない場合もあります。)

HTMLで違いを見てみる

見た目がちがうということは、HTML上、違うところがあるということなのですが、せっかくなので具体的に見てみましょう。
(HTMLが全く理解できない人は、『なんのためにタグを使い分けるの?』まで読み飛ばしてOKです)

先ほどの例では、Enterキーを押して改行すると次のようになります。

Enterキーで改行した場合

<p>・場所 豊中市蛍池中町3-9-20</p>
<p>・日時 2014年12月1日(月)</p>
<p>・費用 無料</p>

Shift+Enterキーで改行した場合

<p>
・場所 豊中市蛍池中町3-9-20<br>
・日時 2014年12月1日(月)<br>
・費用 無料
</p>

Enterキーで改行した場合に、一行ごとに付くpタグは段落を表します。
一方、Shift+Enterキーで改行した場合には、pタグで囲まれた中に、brタグが付きます。

brは改行そのものを表しますが、pタグは段落なので、pタグで囲まれた範囲が一つの文でなければいけません。

ということは、

<p>私は、ホームページ<br>
を更新することが日課です。</p>

はOKですが、

<p>私は、ホームページ</p>
<p>を更新することが日課です。</p>

のようにするのは文が切れてしまうので、おかしいですよね。
ですので、上記の例では、「ホームページ」の後に、Shift+Enterキーで改行したほうがいいです。

また、冒頭の例ですが、

・場所 豊中市蛍池中町3-9-20
・日時 2014年12月1日(月)
・費用 無料

この場合、文章ではなくリストですから、pタグやbrタグを使って改行するのではなく、
リストタグである、ulタグやolタグを使うのが正解です。(WordPressなら、リストタグボタンボタンを使います。)

<ul>
<li>場所 豊中市蛍池中町3-9-20</li>
<li>日時 2014年12月1日</li>
<li>費用 無料</li>
</ul>

 

なんのためにタグを使い分けるの?

もちろん、ページを見てくれた訪問者はHTMLなんて気にしません。
つまり人間ならどのように改行しても正しく読んでくれますので、そんな細かいこと気にしなくてもよさそうなものです。

ですが、検索エンジン(コンピューター)はそれぞれを違って認識する可能性があります。
つまり、SEO(検索エンジン最適化)を意識するのであれば、段落と改行は正しく使い分けるべき、というわけなんですね。

もっと細かいことを言えば、行間のスペースを変えたいのなら、CSSで設定するべきす。
でも、ただでさえ一般業務が忙しいのに、HTMLだのCSSだのと、勉強しながらウェブサイトを更新するのは難しいですよね。

なので、そんな方には、「SEOを意識しすぎるよりも、まずは気軽に更新するために使い分けてはどうでしょうか。」とお伝えしています。

もちろん、アクセスを集める上でSEOを意識することは大切ですよ。
でも、アクセスを集めたければ、まめに更新することが第一です。

まずは楽しく更新する手段の一つとして、改行と段落の違いを活用してみてはいかがでしょうか。