当サイトはWordPressのテーマAffinger4で構築しております。
いつからか不明ですが、ある日特定の固定ページだけ、しかもFontAwesomeだけが下記のように文字化けしてしていることに気づきました。
文字化けしたページと場所
文字化けしていたのは二つの固定ページにおいてだけ。(今は復旧しております)
文字化けの状態
FontAwesomeの部分が□になっています。
正常時の状態
本来は次のようにアイコンが表示されるはずです。
FontAwesomeとは
FontAwesomeを知らない人のために一応書いておきます。
「Font Awesome」とは、Web上でよく利用されるアイコンを画像ではなく文字として表示できるフォントセットにしたものです。
出典:ITの壺
FontAwesomeはフォントでありますから、CSSで色を変えたり大きさを変えたりできます。
種類も豊富でお好みのアイコンが見つかるかもしれません。
文字化けした原因の調査方法
今回のようにWebページで異常が見られたら、まずはChromeデベロッパー・ツールを使いましょう!
使い方は簡単、Chromeでページを表示した状態でF12を押すだけ
(Chrome以外の多くのブラウザでもF12でデベロッパー・ツールが使えますが、やはりChromeが一番優秀)
エラー箇所を見つけて原因を調査します。今回は次のエラーでした。
エラー原因はこれだった!
http://plumpliver.comからhttps://plumpliver.comのフォントにアクセスはできませんよ!というものです。
最近、当サイトではAOSSL(常時SSL)に変更したばかり。
表示させていた固定ページがhttpのままだったというオチでした。
まとめ
ページの一部分だけで文字化けが発生していたら、Chromeデベロッパー・ツールでエラー原因を探りましょう!
もしもページが全体的に文字化けをしていたら??
そのような場面には出会ったことはありませんが、もしかすると文字コードがUTF-8ではないのかもしれませんね。文字コードを変換してからページを再アップしてみましょう!