【続:縦書き 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: "";
}
content: "";
}
「中身のない p 要素の前には空文字をくっつける」という、ぱっと見、全く意義のわからない設定なのですが、たぶん何かしら意味があるのでしょう。
とにかく、この設定が縦書き変換に良くない影響を与えているようなので、これを無効にしてみましょう。
WordPress本体のファイルやテーマファイルを直接編集すると、それらがアップデートされるときに変更が失われてしまうので、h2vR.css を編集してみます。
h2vR.css をテキストエディタで開いて、末尾に、
p:empty::before {
content: none !important;
}
content: none !important;
}
を書き加えて保存。
どうでしょうか。
上手くいかないときは、
- ブラウザのキャッシュをクリアして再読込み。
- h2vR.css が、その他のスタイルシート(もしくは<style>〜</style>タグ)よりも後ろで読み込まれる設定になっているかどうか確認。
…などを行ってみてください。
拙作のWordPress用プラグイン・h2vR support を利用していれば、(2)の設定は問題ない筈です。
ということで、もうしばらく様子を見てみます。
コメント