WordPressでブログやサイトを運営している皆さま、こんにちは。
何の気無しに文章を書く時に改行をしていますが、実際のソースコードを見たことはありますか？
昔から改行はbrタグを使えと教わってきましたが、実はhtmlの文法的に正しい使い方では無い(想定している使い方では正しい記述方法では無い)場合がほとんどです。
結論から言うと、段落分けに用いるpタグで改行するのがベストなんです。(自分で書いていて分かりにくい表現で恐縮ですが、要はbrタグ使わない方が良いってことです)
htmlで下線を引くのにuタグはNG！spanタグかCSSで「text-decoration: underline;」で指定しよう
htmlで取り消し線を書くstrikeタグは非推奨！delタグか「text-decoration: line-through;」と指定すべし
brタグは文章が繋がったまま改行していることを検索エンジンに示すタグで、pタグは段落としてひと固まりであることを示すタグ
文章にすると自分でも意味が分かりませんね。例示します。
以下２つのコードは見た目は同じです。
<p>今日は良い天気でしたが、途中から雨が降ってきました。<br> 明日は雨が降らないといいなぁ。</p> <p>実際に翌朝になってみると、快晴で雲一つ無い青空だった。</p>
<p>今日は良い天気でしたが、途中から雨が降ってきました。<br> 明日は雨が降らないといいなぁ。<br> <br> 実際に翌朝になってみると、快晴で雲一つ無い青空だった。</p>
上はpタグが２つ使われており、両者は段落として検索エンジンからは別々な内容と判別されます。
それに対して、下は１つのpタグのため検索エンジンからはひと固まりの内容であると認識されます。
brタグを使うケースは「文章の途中で改行したい」時だけで、基本的には文章単位をpタグで挟むのが正解
検索エンジンには基本的に１文ずつ別々の内容であることを伝えたいはず。
であれば、素直にpタグを使うのがベストです。
どうしてもbrタグを使わざるを得ない時として考えられるのが、文章途中での改行です。
この場合、文章途中で改行しているのにそれぞれをpタグでくくるとhtmlの文法上間違いになりますのでご注意ください。
pタグで改行する = CSSで段落間の幅を調整する
実際にpタグで改行したい場合、(正式には)行間をCSSにより指定することになります。
ちなみにWordPress含めブログを書いていると、２行改行したくなる時がよくあります。(pタグは段落分けしていることを検索エンジンには伝えますが、我々は他の文章との隙間が余分に空いていると段落分けされていると判断するため。)
上で書いたように、文章が切れているのですからbrタグを２つ重ねるのはNGです。
その時に以下のようにpタグにclassを指定し、cssで調整すれば万事解決です。
<p class="br1">あああ</p> <p class="br2">あああ</p> <p class="br3">あああ</p>
.br1 {
margin-bottom: 5px;
}
.br2 {
margin-bottom: 10px; /*行間広くした*/
}
.br3 {
margin-bottom: 15px; /*行間広くした*/
}
うん。万事解決なんだけど、段落分けの行間のためにclass分けるとか面倒過ぎて死ねるw
pタグ内でstyle指定しても良いんだけど、それでも空白開けるのにいちいちstyle指定とか記事書く気が失せます。
僕のような面倒くさがりは半角スペースをpタグで囲って改行扱いする←WordPressのビジュアルエディタはデフォルトでこうなる
具体的にはこうです。
<p> </p>
あまりにも半角スペースで囲われたpタグが多いと、検索エンジンからは好ましくない評価を受ける可能性もありますが、そんなに改行する機会も無いのでこれで僕は進めています。
brタグ使いまくっている無料ブログとかがボロボロあるので、それよりは↑の書き方の方が断然良いです。
