失礼しました。見逃しておりました。
もう1点確認いただきたいのは、新規で記事や固定ページを作成して、その記事内に h3見出しを入れた時にどうなるかご確認ください。
トピック投稿者
mofty
(@mofty7373)
とりあえず以下画像の通り問題点は解消されました。
解決の根拠となった操作は以下の通りです。
■これまでH3用カスタマイズコードを「外観」>「テーマファイルエディター」に定義していたが、これを「外観」>「カスタマイズ」>「追加CSS」へ移植した
■効果:「テーマファイルエディター」にて定義したCSSはWordPressのブロックエディタ内HTML生成に影響を及ぼすが、「追加CSS」にて定義したCSSはエディタに影響を及ぼさない。これが問題の解消へとつながった
■エディタ内でH3部分が表示されていなかった直接的原因
⇒プロパティ中に「zindex : -2」の指定が偶然入っていたのだが、これが公開HTML上で及ぼす効果とWPのエディタ内で及ぼす効果に違いが生じるものであり、zindexが-2だとWPエディタ内で要素が見えなくなってしまう。
⇒このCSSを「追加CSS」へ移植したことにより効力を除外することができ、解決につながった
■一連の対応でわかったこと1(今後に活かせる知識)
・「テーマファイルエディター」における定義CSSはブロックエディタ表示デザインに影響を与えるが、「カスタマイズの追加CSS」は影響しない
■一連の対応でわかったこと2
・おそらく、H3など見出しに疑似要素beforeを使ったデザインを使うとWPブロックエディタ表示時に生成コードがバグる(見た目に影響がでないかもしれないが、おそらくコード上はもともとバグってる)
みなさまアドバイスありがとうございました。
自己解決しましたが、複数人巻き込んでしまっていることによるモチベーションにより解決できた感があります。
もう少し根本的な仕組みを確認してみて、それからステータスを解決済みとしたいと思います。
今回の対応によりWordPressの見えない仕様が明らかになりましたので参考になればと思います。
トピック投稿者
mofty
(@mofty7373)
本件、解決しました。
■原因
<WordPressのブロックエディタでは以下CSSは反映されない>
・スキン特有のCSS (skinフォルダ内のstyle.css定義は本番のみ適用)
・カスタマイズの追加CSS
・WordPressでz-index : -2 の要素は見えなくなる
■利用者が前提とすべきこと
・当たり前かもしれないが、WordPressのブロックエディタのプレビュー表示は完全ではない。
「公開HTMLと同等ではなく、公開HTMLに近いもの」と割り切って使う必要があるかもしれない
■スキンを使う時の注意点
・スキンを使う場合はエディタのプレビューデザインが本番と異なることが多い点に注意
・エディター内の表示不具合を回避したいときは追加CSS定義の場所を変更して試すと解決するかも
・それでも解決しない場合は、両方で不具合が出ないようにCSSを自分で調整
・それでもだめならスキン利用またはブロックエディター利用をあきらめるしかない
ご協力していただいた方々に感謝致します。