【続:縦書き h2vR.js】WordPress 5.x での表示不具合を解消する。

以前の記事で、「最新のWordPressで、縦書きレイアウトが正しく表示されない」という事象への対処方法を書きました。

問題を生じさせているWordPressのスタイルシート(id="wp-block-library-css")の中身を見てみる。

このスタイルシートの場所は…

WPをインストールしたディレクトリ/wp-includes/css/dist/block-library/style.min.css

…です。

このスタイルシートの何が h2vR.js に影響を与えているのかを地道に見てゆくと、以下のような設定を発見。

p:empty::before {
    content: "";
}

「中身のない p 要素の前には空文字をくっつける」という、ぱっと見、全く意義のわからない設定なのですが、たぶん何かしら意味があるのでしょう。

とにかく、この設定が縦書き変換に良くない影響を与えているようなので、これを無効にしてみましょう。

WordPress本体のファイルやテーマファイルを直接編集すると、それらがアップデートされるときに変更が失われてしまうので、h2vR.css を編集してみます。

h2vR.css をテキストエディタで開いて、末尾に、

p:empty::before {
    content: none !important;
}

を書き加えて保存。

どうでしょうか。

上手くいかないときは、

  1. ブラウザのキャッシュをクリアして再読込み。
  2. h2vR.css が、その他のスタイルシート(もしくは<style>〜</style>タグ)よりも後ろで読み込まれる設定になっているかどうか確認。

…などを行ってみてください。

拙作のWordPress用プラグイン・h2vR support を利用していれば、(2)の設定は問題ない筈です。

ということで、もうしばらく様子を見てみます。

カテゴリ: