令和3年の3/9にリリースされたWordpressバージョン5.7にアップグレードしたら記事内に変な余白ができてしまった！
そんなお困りの方へ…空のPタグに自動付与されたCSSスタイルの戻し方です。
Wordpressの更新後、記事編集中に本文の改行近くに謎の空白ができていることに気が付きました。
別の記事を書くつもりだったのですが厄介な内容だったので書き留めます。
ブロックエディターのGutenberg用に新しいCSSが適用されたのが原因です。
追記
Wordpress5.8に更新したところ治りましたのでこのスタイルは外しました。
この記事の目次
WordPress5.7で適用された「p:empty::before」とは？
事の発端からお付き合いください…
Wordpress5.7の更新通知が来ていたのでいつも通り更新しました。
Wordpress5.7の更新完了画面
ふむふむ。どうやらエディターの機能が増えたようです。
Gutenbergはとても使いにくく、Classic Editorを使っているので関係ないかな…
その他、iframeの遅延ロードやHTTPS以降の簡易化などありますが、今回のアップデートのメインはエディターようです。
軽く更新内容をチェックして記事を執筆していたら気が付きました。
Wordpress更新後にできた記事内の謎の余白
記事本文の改行の近くに謎の余白ができている！
ブラウザの開発者ツールで確認すると縦幅30pxもある。
空のPタグに謎のCSSスタイルが入っている
よく見ると空のPタグが改行の後に入っている。
（<p> </p>が空のPタグです。）
更に空のPタグの前に空白を自動挿入するようなスタイルがある。
空のPタグに対して::beforeが付くようになった
新しいバージョンのWordpress5.7について調べ上げたところ、どうやらブロックエディターのGutenbergを使用する際に、空の段落をスペーサーとして使えるようにアップデートされたようで、おそらくこれが原因です。
ブロックエディター用のCSSに下記のコードが追加されたようです。
中身が空っぽのpタグの前に指定した文字などを自動追加するスタイルです。
そのcontentの中身の指定が空っぽという…
p:empty:before {
content: "";
}
このスタイルの指定方法はブロックエディターを使っていても使っていなくても、
サイト内にある全ページのすべての空のPタグに影響します。
サイトのテーマや改行の仕方によってマチマチですが、うちのサイトでは記事上部のはじめの改行の後に空のPタグが入っていますので、そのPタグにこのCSSスタイルが影響して変な空白ができていたのです。
方法１．空のPタグに対するCSSを上書きする
子テーマのstyle.cssに下記のスタイルを追加し、
空のPタグの前に余白ができないようにスタイルを上書きします。
/*Wordpress5.7で追加、pタグの空間を削除*/
p:empty:before {
content: "";
}
全く同じではないか！と言われそう。ここから説明が難しいのですが。。。
元のスタイルはcontentに・が入っている
画像を見ていただきたいのですが、もともと自動付与されたスタイルをブラウザでコピーしてstyle.cssに貼り付けたところcontentの""の中に「・」が入っていました。
（画像では追加したスタイルの下にあるスタイルです。）
追加して上書きするスタイルにはもちろん「・」は含めず、""です。
「・」なしでは謎の余白はできない
新しく追加したcontent""のスタイルをONにした状態だと、空のPタグの前に変な余白はできません。
「・」ありでは謎の余白ができる
ところが、もともとあったcontent"・"のスタイルをコピーしたものをONにすると、空のPタグの前に余白ができました。
う～ん。
content""に指定してある半角の・は何なのか…なぜブラウザで見ると見えないのにstyle.cssファイルの編集画面だと見えるのか…
環境依存文字なのか特殊文字なのかそういう使い方があるのか？
分かる方是非教えてください！！
方法２．jQueryで空のPタグを削除する
空のPタグに対して不自然なCSSスタイルが当たってしまっているので、
サイト内にある全ての空のPタグを削除しても解決できます。
ただjQueryを使用するには、テーマで読み込まれているJSファイルにjQueryのコードを追加するか、headタグ内に直接スクリプトとして埋め込むしか方法がありません。
子テーマで読み込まれているJSファイルのどこかに下記のコードを追加する。
jQuery(function() {
/*空のPタグは削除*/
jQuery("p:empty").remove();
});または、テンプレートのheadタグ内に直接埋め込む
<script>
jQuery(function($) {
/*空のPタグは削除*/
$("p:empty").remove();
});
</script>削除と言ってますが、ページの読み込み時に削除しているだけで記事本文内のpタグが修正、保存されるわけではありません。
この方法も良いのですが後々Gutenbergしか使えなくなる可能性を考えると、この程度のことにjQueryを設置するのはあまりいい気がしません。
サイトスピードに少し影響しそうなのもありますが、それよりもどこに設置したか忘れたり、設置したことすら忘れてPタグに関する他のところで泥沼化しそうな気がしてなりません…
方法１がダメならご検討ください。
全記事の空のPタグを手作業で消すよりよっぽどいいと思われます。
まとめ
- Wordpress5.7から空のPタグに::beforeが自動追加される。
- 対策するにはCSSスタイルを上書きするか、jQueryで空のPタグ自体をサイトから消し去る。
Wordpress5.7に更新してまさかこんなところで時間を食うとは思いませんでした。
Gutenbergの新しい機能を追加するためにサイトのレイアウトが変わってしまうようなCSSスタイルを適用させるのってどうなのでしょう。。。
このページを見て下さっている方がいらっしゃるのなら、おそらくClassic Editorを愛用されているのではないでしょうか。
Gutenbergから旧エディターに戻したい方が多いのも事実のようです。
多くの有名テーマにも標準でClassic Editorへの切り替え設定が備わっているところを見れば、まだまだ旧エディターの需要はありそうですね。
Gutenbergだけになるのはイヤだ！
開発スタッフさん、せめて旧エディターも使える状態で開発を進めて下さい！
とはいえ、今回のアップデートの内容を見ていると近い将来Classic Editorは使えなくなるのかなぁ…Gutenbergも使って記事を書く練習をしておかねばと思った今日この頃でした。
