【決定版】WordPressの「空のpタグ」問題を、正規表現で根こそぎ解決する全知識

2025年10月10日CSS,ドキュメント

こんばんは！IT業界で働くアライグマです！

WordPressでブログを運営しているあなた、こんな経験はありませんか？

渾身の記事を書き上げ、プレビュー画面で最終チェック。すると、なぜか意図しない場所に謎の空白ができていて、美しいはずのレイアウトが崩れている…。HTMLソースを見てみると、<p></p>や<p>&nbsp;</p>といった、「空のpタグ」が、まるで地雷のように記事のあちこちに埋め込まれている。

これを一つ一つ手作業で消していく、あの虚しい時間。ブロガーにとって、これほど生産性を削がれる作業はありません。

今日は、この永遠の悩みとも言える、うっとうしい問題を、たった一行の「魔法の呪文」、すなわち正規表現で、一瞬にして、そして根こそぎ解決するための、私の全知識を共有したいと思います。

なぜ「空のpタグ」は、あなたの記事に忍び寄るのか？

この現象は、あなたが何か悪い操作をしたわけではありません。むしろ、ユーザーを助けようとするWordPressの親切心や、異なるアプリケーション間の「文化の違い」が、主な原因となっています。

原因1：リッチエディタ（Gutenberg）の自動整形

現在のWordPressの標準エディタであるGutenbergは、非常に優秀な「おせっかい」です。ユーザーが見たままに書けるように、Enterキーでの改行を、自動的に新しい段落（<p>タグ）として解釈します。

しかし、文章の構成を考えているうちに、Enterキーを複数回押してしまったり、ブロックとブロックの間に空の段落が残ってしまったりすることがあります。エディタは、その「空白行」を律儀に<p></p>としてHTMLに出力してしまうのです。

原因2：外部からのコピー＆ペースト

Word、Googleドキュメント、ChatGPTといった、他のアプリケーションで下書きをした文章をコピーして、WordPressのエディタにペーストする。これは、多くの人が行う、ごく自然なワークフローです。

しかし、この時、あなたの目には見えない「書式情報」も一緒にコピーされています。特に、改行やスペースの扱い方はアプリによって異なり、それが&nbsp;（ノーブレークスペース）という特殊なHTMLエンティティとしてペーストされることがあります。結果として、<p>&nbsp;</p>のような、一見すると空ではないが、実質的には空の段落が生まれてしまうのです。

なぜ放置してはいけないのか？

「見た目が少し崩れるくらい、気にしない」と思うかもしれません。しかし、空のpタグを放置することには、明確なデメリットがあります。

• SEOへの悪影響: Googleのクローラーは、HTMLの構造的な美しさを評価の一因とします。意味のない空のタグが大量にあることは、ページの評価をわずかに下げる可能性があります。
• CSSの意図しない適用: pタグ全体に特定のスタイル（例えば、上下のmarginなど）を当てている場合、空のpタグにもそのスタイルが適用され、意図しない大きな余白が生まれる原因となります。
• コードの可読性低下: HTMLソースコードが不必要に長くなり、後からメンテナンスする際の可読性を著しく低下させます。

【実践編】空のpタグを一括削除する「魔法の呪文」

では、本題です。これらの空のpタグを、エディタの置換機能を使って一括で削除するための、いくつかの正規表現パターンを、その強弱と共にご紹介します。

パターン1：最も基本的な空のpタグ

中身が完全に空っぽの<p></p>だけを削除する、最もシンプルな正規表現です。

<p></p>

これは正規表現ですらありませんが、まずはこの単純な置換を試すだけでも、多くのケースで効果があります。

パターン2：空白や改行を含む空のpタグ（推奨）

私たちの本当の敵は、pタグの間にスペースや改行、 が挟まっている、より巧妙な空のpタグです。それらを一網打尽にするのが、こちらの正規表現です。

<p>(\s| )*</p>\n?

この一行を、お使いのテキストエディタ（VS Codeなど）の検索窓にコピーし、「正規表現モード」をONにして使います。これが、今回の記事の「主役」です。

この「魔法の呪文」の徹底解説

「なんだか難しそう…」と感じるかもしれませんが、パーツごとに分解すれば、やっていることは非常にシンプルです。

• <p> と </p>: これは見たまま、開始タグ<p>と、終了タグ</p>そのものにマッチします。
• (...): このカッコは、中身を「一つのグループ」としてまとめるためのものです。この場合、「空白か、 か」という条件をグループ化しています。
• \s: これは「空白文字（whitespace character）」を表す特殊文字です。半角スペース、タブ、改行など、目に見えないあらゆる空白文字にマッチします。
• |: 「または（OR）」を意味する、正規表現における論理演算子です。A|Bと書けば、「AまたはB」という意味になります。
•  : これは という文字列そのものです。特殊な意味を持つ文字ではないので、そのまま記述します。
• (\s| ): これで、「ただの空白文字か、あるいは という文字列か」という条件になります。
• *: 「アスタリスク」は、量指定子と呼ばれ、直前の文字やグループが「0回以上繰り返す」ことを意味します。これにより、<p></p>（中身が0個）も、<p> </p>（スペースが複数）も、<p>&nbsp; &nbsp;</p>（空白と が混在）も、全てにマッチさせることができます。
• \n?:
  • \nは、改行コード（Line Feed）を表します。
  • ?も量指定子で、直前の文字が「0回または1回」出現することを意味します。「あってもなくても良い」ということです。
  • 多くのエディタでは、<p></p>タグの後には改行が入っているため、この\n?で、タグとその直後の改行までを、まとめて選択範囲に含めることができます。これにより、置換後に不要な空行が残るのを防げます。

使い方：VS Codeでの具体的な手順

1. WordPressの投稿編集画面で、右上メニューから「コードエディタ」を選択し、HTMLソース全体をコピーします。
2. VS Codeなどの高機能なテキストエディタにペーストします。
3. エディタの検索機能（Ctrl+FまたはCmd+F）を開きます。
4. 検索窓の右側にある.*というアイコン（正規表現モード）をクリックして、ONにします。
5. 検索窓に、上記の正規表現 <p>(\s|&nbsp;)*</p>\n? を貼り付けます。
6. 置換後の文字列は、何も入力せず「空」のままにして、検索窓の右側にある置換ボタン、あるいはCtrl+Alt+Enter（Cmd+Alt+Enter）で「すべて置換」を実行します。

たったこれだけで、あなたの記事から、全てのうっとうしい空のpタグが一掃され、クリーンなHTMLが手に入ります。

もっと便利な使い方：『正規表現ストッカー(仮)』の構想

とはいえ、いかがでしょうか。

この正規表現、非常に便利ですが、いざという時に思い出せなかったり、この記事をブックマークから探してきたりするのは、少し面倒ですよね。

「この魔法の呪文、どこかに保存しておいて、ボタン一つで呼び出せたら最高なのに…」

まさに、そのあなた自身の課題を解決するために、現在、私は新しいWebツール『正規表現ストッカー(仮)』を開発中です。

このツールは、

• よく使う正規表現の「検索パターン」と「置換パターン」をセットで保存できる。
• 「WordPressの空pタグ削除」「全角英数を半角に」のような、自分が分かりやすい名前を付けて管理できる。
• 必要な時に、いつでもそのパターンを呼び出して、テキストに一括適用できる。

といった機能を備えた、あなたのための「正規表現の魔法書」になる予定です。完成すれば、もう二度と、この呪文をGoogleで検索する必要はなくなります。

まとめ

たった一行の、小さな正規表現。

しかし、それを知っているだけで、日々のブログ執筆における、小さなストレスを一つ、確実に減らすことができます。そして、その小さなストレスに真摯に向き合うことが、新しいサービスを生み出す、大きな一歩になることもあります。

あなたの日常業務にも、そんな「不便」という名のアイデアの種が、たくさん隠れているのではないでしょうか。

そして、もし『正規表現ストッカー(仮)』に少しでも興味を持っていただけたら、先日公開した「始動宣言の記事」も、ぜひご覧ください。これからの開発の進捗を、一緒に見守っていただけると嬉しいです。