WordPressで文章間の余白を改行タグの連続で調整しないで綺麗に表示する

この記事は約4分で読めます。

  • LINEで送る

記事内の余白設定

ついついやっちゃうんですが、文章間の余白を「<br />(改行タグ)」を連続して調整するのはやめましょう。
巷で言われているように、「SEO的によくないよ!」と言うつもりはさらさらありませんし、
おそらく、そんなことぐらいでこれまでの評価がガタ落ちすることはないでしょう。

ただ…HTML見た時に汚いの、私はイヤです!!
特に、賢威を利用している方はショートコード「[br num="x"](xは改行数)」
最初から用意されていることもあり、使用している人も多いのではないでしょうか。

後は、「brBrbr」などのプラグインでしょうか。
このプラグインを使うと、簡単お手軽に文章間の余白が開けられるので人気です。

その結果、以下の様な文章が実は(個人的に)とんでもない文章になっているんです。

改行コードの連続で余白を調整する

記事内の余白設定

<p>改行テストです。</p>
<p>1行改行します<br />
<br /><br /><br /><br /><br /><br />
5行改行します</p>

何の変哲もない、5行余白の文章ですがHTMLでは「<br />」を連続して出力しています。
WordPressの記事投稿画面では、以下のように賢威のショートコードを利用しています。

改行テストです。
1行改行します
[br num="5"]
5行改行します

改行コードを使わずに余白を調整する

次に、以下の画像を見てください。

記事内の余白設定

先ほどとほぼ同じ表示になっていると思います。
しかし、これ「<br />」を連続出力せずに以下のようなHTMLになっています。

<p>改行テストです。</p>
<p>1行改行します</p>
<p class="m100-t">5行改行します</p>

最後の「<p>(段落タグ)」にスタイルを指定しています。
それは、以下の様なCSSです。

.m100-t{
	margin-top: 100px!important;
}

最後の段落の上に「margin(余白)」を挿入して、連続改行とほぼ同じ幅を実現しています。
そして…この「mXX-t(XXは数値)」というスタイルは賢威で初期から実装されています。
知っている人は知っている、結構使いやすい賢威のスタイルです。

「外観 > テーマ編集」から「advanced.css」を開いてください。
その中に、「mXX-t(XXは数値)」というスタイルがあります、数値も複数準備されています。
ちなみに「mXX-t」の「t」は「top」の略で、「right」、「bottom」、「left」用もあります。

連続改行にこだわりがなく、なんとなく使用していただけであれば、
賢威に準備されているマージンスタイルをぜひ使用して欲しいです。
(改行にこだわりがあるシーンがイメージできませんが…)

ちなみに、200px開けたいからといって以下のように指定してもダメです。

<p class="m100-t m100-t">5行改行します</p>

「m100-t」を2つ指定しても、HTMLの仕様上、余白は200pxではなく100pxのままです。
もし、200pxの余白が欲しければ同じようにCSSにスタイルを追加しましょう。
コピペで数字のみ変更するだけなので簡単です。

<p style="margin-top:200px;">5行改行します</p>

このように、直接投稿画面で入力してしまうこともできますが、
HTMLにスタイルを直接記述するのは、HTML構造上おすすめできません。
そこまで神経質になる必要はないかもしれませんが、やはりCSSへの記述を推奨します。

「 (空白)」を使う方法もある(SIRIUSがこれ)

他にも、ちょっとした方法として以下の様なHTMLが存在します。

<p>1行目の文章です</p>
<p>&nbsp;</p>
<p>2行目の文章です</p>

間に空白を入れて、段落タグで1行分稼ぐ方法ですね。
SIRIUSは、この方法で段落間を自然に調整しています。

ただし、これも個人的には正しい方法だと思わないので、
やはりマージンで余白を取るか、文章間の余白を司る「line-height」スタイルで調整したいです。

「line-height」は、適用される全ての行の高さを調整するスタイルなので、
また使いどころは変わってくるの(というより、初期設定のようなもの)ですが…

「お前こだわりすぎじゃない?」と言われるかもしれませんが、
賢威を使っているので、できる限りHTMLを汚さず内的SEOを高めていきたいというのが個人的な想いです。

  • LINEで送る

コメントを残す

このページの先頭へ