Safariの設定が原因で、WordPressでCSSが反映されなかった話




sim(@ssiR01)です。

Mac OSでブラウザにSafariを使っていると、WordPressの管理画面でCSSを追記しても反映されないことがあります。

僕が遭遇したトラブルのケースと解決方法を書いておきます。

解決にはヒキコモリズム井上さん主催のブログサロン「ブログガレージ」の皆さんのお力により原因の特定と解決に至ったことを書いておきます。とくにサロンメンバーの森さんには多大なご助力をいただきました。

ちなみにWordPressテーマはストークです。

 

WordPressのCSSが反映されないトラブル

蛍光マーカーで文字を強調をしたいと思い、

(例えば、こんな感じに

WordPress管理画面の外観>テーマの編集>スタイルシート(style.css)に、コードを追記しました。

下の図の赤枠の箇所が追記した部分です。

しかし、何度確認してもブログの文字強調箇所が蛍光ペン風で書いたように反映されなくて、お手上げ状態になってしまいました。

 

トラブル現象はブラウザーによって違う

困り果てて、サロンに相談したところ、サロンメンバーから「自分のところのブラウザーではCSS変更が反映されているよ」とのご指摘が!?

「え! 僕のMacのインターネットブラウザーでは反映されてないんだけど…」

ということで、考えることしばし…

僕も他のブラウザーを使って確認してみると、たしかに変更したCSSが反省されているではないですか!?

整理すると下のような感じです。

CSSが反映していたブラウザー

  • Mac OS:Chrome
  • iOS:Safari
  • Mac OS:Safari ver. 9.1.3

CSSが反映していなかったブラウザー

  • Mac OS:Safari ver. 10.0.2

 

この時点で、サロンメンバーからSafariの設定に原因があるのではないか?とご指摘をもらいました。

 

SafariのFlashの設定を変えたらCSSが反映された

で、いろいろと調べてみると、

Safariの環境設定>セキュリティの箇所のAdobeFashPlayerでストークアイコンの自分のwebsiteの箇所がオフになっていたのをONにしたら、CSSの変更が反映されるようになりました。

実にあっけない結末です。

 

さいごに

Safariは初期設定のまま使っていましたが、まさかコレが原因だったとは思いもよりませんでした。

もし、WordPressでCSSが反映されないときは、ブラウザーのFlashの設定を疑ってみるのも1つの方法だということですね。

SafariとChromeを比べると、Flash関連のトラブルもChromeの方が少なそうだし、ブラウザー自体の速度もChromeの方が良いのです。

冷静に考えてみて、Safariを使う理由はもう無いのではないかと思いはじめています。

では



ABOUTこの記事をかいた人

動物写真家、ブロガーとして活動中。 属性は他に、博士(農学)、DTMer,ツーリングライダー歴30年。 【問い合わせ】Twitterアカウント宛にDM 願います。 【注意】野鳥の撮影場所についてのご質問はご遠慮願います。