【雑談】 7 【1時間悩んだ】Cocoonの追加CSSが反映されない“まさかの原因”

この記事はこんな人におススメ

ヘッダーのデザインをカスタマイズしようとしたら、反映されなくて、
「なんで、なんで？」
と悶絶したことが、最近ありました。

最終的に解決できたので、
同じように悩んでいる人への助けになればと思い、この記事を書きました。

私は下記のようなデザインでブログを作っています。

いつもの深海のスキンはブルーがメインで個人的に気に入っています。

ヘッダー(H2)のデザインをカスタマイズしようとしました。

そこで、ダッシュボードにおける、
「外観」→「カスタマイズ」→「追加CSS」の順に開くと出てくる、
「追加CSS」の枠に、
H2のデザインに関するコードを追加しました。

それで、変更が反映されたかどうかをチェックしたところ、うまく反映されません…
ちなみに、反映されているデザインと、元々のデザインは下記画像の通りです。

■反映されていると出てくるはずのデザイン

■実際のデザイン

ChatGPTに聞けば何とかなるだろう！
と思って聞きまくったのですが、

もらった回答では解決できませんでした…

モヤモヤしながら1時間以上格闘し、
「もうだめだ…ブログ向いてない」
と心がほとんど折れかかってしまいました。

心は折れかけましたが、少し時間が経ってからもう一度トライしていた時、
偶然、「ちゃんと反映されている！」ことに気づきました。

何がダメだったのか

それは、「下書きモードはCSSが反映されない」ということでした。
なので、プレビューモードを見れば「正しく設定したデザイン」で表示されていました。

詳しく説明すると、

下記画像は下書きモード(編集モード？)の画面です。
ここは下書き画面で反映されていないのですが、

画面右上のアイコン(①)を押すと出てくる、
「新しいタブでプレビュー(②)」を押すと、

ちゃんと反映されていることが確認できました。
なんだ、下書き画面だけ反映されてなかっただけかよ…1hも格闘して疲れました…。

そもそも、デフォルトのデザインは、下書きモードにも反映されるよう設計されていました。
ありがたいですね。

だから、
「CSSをカスタマイズしても、下書きモードでも反映されるだろう」
と、思いこんでしまいました。

それで気づくのに相当時間がかかってしまいました…。

じゃあ、下書きまで反映させる方法はないのか？
そう思ったのですが、今のところその方法はわかりません。

もし知っていればコメントなどで教えてください。

今回はWordpressのCSSデザインが反映されなくて悩んだ件について書きました。

反映されているかどうかは、プレビューを見て確認するようにしましょう。

この記事が、同じように悩んでいる人に届けばいいなあ…