【WordPress】空の Pタグ自動挿入によるレイアウト崩れを防ぐ

こんにちは、さちです。

先日、WordPress でブログを書いていると、自動で中身が空の  タグが挿入されてレイアウトが崩れる問題に遭遇しました。

書き方をいろいろ工夫しても、どうしても空の  タグが入ってしまいます。でも、 タグの自動挿入自体は便利なので、この機能を無効にしたくないんですよね……。

ということで、空の  タグができる問題を解決していきます。

空の Pタグを非表示にする

この問題を根本から解決することは難しいため、空の  タグを隠すことで解決します。

WordPress の管理画面を開き、「外観」→「テーマファイルエディター」と進みます。
スタイルシート（Stylesheet）の「style.css」を開きます。子テーマを使うテーマの場合は、子テーマの style.css を開きましょう。
下記のような CSS を追記。下部にある「ファイルを更新」をクリックします。
```
p:empty {
  display: none;
}
```

これで、空の  タグは隠れて見えなくなり、レイアウトも崩れなくなりました。

疑似クラス :empty は、子を持たない要素を指定します。

下記のものは子として扱われます。含まれている場合は :empty の対象外になります。

子として扱われる

そのため、今回の例ではテキストを含む通常の  タグは非表示になりません。

反対に、下記のものは子として扱われません。含まれていても :empty の対象になります。

子として扱われない