アフィリエイト・WP

いつの間に?固定ページのFontAwesomeが文字化け!原因は単なるうっかりミス?

geralt / Pixabay

当サイトはWordPressのテーマAffinger4で構築しております。
いつからか不明ですが、ある日特定の固定ページだけ、しかもFontAwesomeだけが下記のように文字化けしてしていることに気づきました。

文字化けしたページと場所

文字化けしていたのは二つの固定ページにおいてだけ。(今は復旧しております)

文字化けの状態

FontAwesomeの部分がになっています。

 

 

正常時の状態

本来は次のようにアイコンが表示されるはずです。

 

 

FontAwesomeとは

FontAwesomeを知らない人のために一応書いておきます。

「Font Awesome」とは、Web上でよく利用されるアイコンを画像ではなく文字として表示できるフォントセットにしたものです。

出典:ITの壺

FontAwesomeはフォントでありますから、CSSで色を変えたり大きさを変えたりできます
種類も豊富でお好みのアイコンが見つかるかもしれません。

 

 

文字化けした原因の調査方法

今回のようにWebページで異常が見られたら、まずはChromeデベロッパー・ツールを使いましょう!

使い方は簡単、Chromeでページを表示した状態でF12を押すだけ
(Chrome以外の多くのブラウザでもF12でデベロッパー・ツールが使えますが、やはりChromeが一番優秀)

エラー箇所を見つけて原因を調査します。今回は次のエラーでした。

エラー原因はこれだった!

Access to Font at 'https://plumpliver.com/~' from origin 'http://plumpliver.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://plumpliver.com' is therefore not allowed access.

http://plumpliver.comからhttps://plumpliver.comのフォントにアクセスはできませんよ!というものです。

最近、当サイトではAOSSL(常時SSL)に変更したばかり。

表示させていた固定ページがhttpのままだったというオチでした。

まとめ

ページの一部分だけ文字化けが発生していたら、Chromeデベロッパー・ツールでエラー原因を探りましょう!

もしもページが全体的に文字化けをしていたら??
そのような場面には出会ったことはありませんが、もしかすると文字コードがUTF-8ではないのかもしれませんね。文字コードを変換してからページを再アップしてみましょう!

  • この記事を書いた人
  • 最新記事

だっち

30代 二人の子持ち。 婿はなにかと肩身が狭いので、寺泊で釣りができることが何よりの癒しです。シーバス、アジング、メバリング、ショアジギング、たまにぶっこみ釣りやサビキ釣りも。冬にはスノボを楽しみます。