プラグインがスタイル反映の邪魔をしていたのに気付かなかった失敗談。

ブログの運営にも少しずつ慣れて来て、オリジナルなデザインに変えて行こうと思うようになっていた私は、スタイルシートに手を加えることにしました。

プラグインは他の動作に影響することがある

しかし、なかなか思うように行かず、解決するまで数日を要してしまいましたが、うまく行かなかった理由はプラグインが邪魔をしていたためでした。

そんなチョットした失敗談を記載します。

本ブログの環境

このブログはワードプレスに、Simplicityというテーマをインストールして運営しています。

このテーマはスマホ対応やSEO対策などが充実していることから、多くの人が利用していることと思います。

このテーマに関する情報も多く、テーマ開発者も色々な情報を発信してくれていますから、何か困ったこととか、知りたいことがあった場合には、けっこう役立つ情報を得やすいと感じています。

このテーマでは、外観からstyle.cssに追加記述するツールが用意されていますし、他のテーマと同様、テーマの編集からもstyle.cssやeditor-style.cssを追加記述できますから、割とスタイルのカスタマイズは容易です。

私が実際にstyle.cssに記述したのは、下記のようなボックスのスタイルを実現するための記述でした。

タイトル失敗したボックスのスタイル

外観からstyle.cssに追加記述してみたところ、ワードプレスのエディターには反映されず、プレビューや実際のサイト表示には反映されて、一応これで良いのかということになりました。

しかし、エディターに反映されないと、記事を編集している時に実際の見え方と異なるので不便だと感じ、調べてみると、エディター用には別にeditor-style.cssを追加記述する必要があることが分かりました。

早速、editor-style.cssにstyle.cssと同じ内容を追加記述しましたが、エディター表示には反映されず、「何で？」となってしまいました。

Simplicityのサイトには、これだけ試せば解決という旨の記事があり、そこに書かれた数個の解決策のうち、ブラウザのキャッシュのクリアと再表示を試みましたが解決しませんでした。

その後、editor-style.cssの記述はstyle.cssをコピーしただけではダメだという情報もあって色々と試しましたがダメでした。

更に、editor-style.cssを反映させるためのphpが必要とも考えて色々調べましたが、phpの基礎も知らない私にとっては、手も足も出ない状態でした。

「うーん」とうなってしまった私でしたが、色々調べているうちに、エディター画面の拡張機能のphpに関する記述に接する機会ができました。

そして、そのことをキッカケとして、「エディター画面の拡張機能に関するプラグインが邪魔をしているのでは？」との発想に結びついたのです。

このプラグインはTinyMCE Advancedと言われるプラグインで、エディター画面の機能を拡張してくれるものですが、その発想に到った私は直ぐにそのプラグインを無効化しました。すると、まさにビンゴ！！でした。

実は、「プラグインを外す策」については、上記にあげた「これだけ試せば解決という旨の記事」にも記述してあったのですが、その時は見ていたにも関わらず、まったく頭に入っていませんでした。当たり前のことを当たり前にやっていればもっと早く解決したと思います。

いざ解決してしまえば何のことはないのですが、エディターにおいて生じた問題ですから、「エディターの機能を拡張するプラグインが関係しているのでは？」と、もっと早い段階で気付くべきだったと感じます。

以上、私の失敗談でした。