【やっちゃん 様】WordPressでFont Awesome 5 Free が表示されない(Google Chrome)

Font Awesome 5 Free がGoogle Chrome で表示されない というご相談を頂きました。


WordpressのSEO対策ならRoot-013 Root-013ではWordPress・SEO対策・アフィリエイトなどサイト運営に関するご質問に無料でお答えしております。
WordPress 無料相談 アフィリエイト SEO 無料相談 無料!WPインストール代行・集客サポート

Font Awesomeがchomeに表示されない

こんにちは。
突然の質問失礼致します。

safariであればアイコンが表示されるのですが、
chomeになるとアイコンが文字化けしてしまいます。

どのようにすれば直るのでしょうか?
教えていただければ幸いです。
よろしくお願いします。


考えられる原因

>やっちゃん さま
ご相談ありがとうございます!

CSSの記述の問題かな~と確認してみましたが問題なさそうですね・・・

これが直接的な原因かはわかりませんが、
http://【YOUR SERVER ID】.sakura.ne.jp/wp/
にアクセスしたところ、アイコンは表示されました。

F12で開発者ツールを使うと、同様にサーバードメイン http://【YOUR SERVER ID】.sakura.ne.jp/wp/ で始まるソースの読み込みにエラーが出ています。

これはWordPressの問題というよりはブラウザの仕様による所が大きいと思いますが、独自ドメインとサーバードメインが異なる事によって起こっている可能性があります。(他のブラウザでは問題なかったが、Chromeだとエラーとして扱ってしまっている状態)

WP一般設定

おそらく、WordPressアドレスとサイトアドレスが異なるものに設定されているのではないでしょうか。

WordPressアドレスがサーバーのドメイン
サイトアドレスに独自ドメイン

が設定されているのかもしれません。

WordPressの場合こういった設定はプレビューができなくなるなど様々な不具合の原因になることがあります。

特別な理由があってこのような設定にしているので無ければ、アドレスを統一することでエラーが解消できるかもしれません。

WordPressアドレスの変更を行う場合は注意して下さい。設定に誤りがあると管理画面にもアクセスできなくなる可能性があります。DBのバックアップを取ることはもちろんですが、こちらの記事で復旧方法も解説しているので参考にして下さい。
WordPressのURL設定を変更したら404エラーになってしまった

他、これまで記事中にメディアを追加していた場合、サーバーアドレスのパスが利用されているはずです。これらはさくらサーバーにいる間は問題はありませんがSSL対応やサーバー移転の際にエラーとなるので記事中のURLも独自ドメインに変更する形がベターです。
もちろん代行作業も可能ですので気軽にご相談ください。

他の方法

ソースの読み込みにWordPressアドレスが使われている点から、FontAwesomeはプラグインで導入されているのでしょうか。

その場合、必要なCSSやJSファイルを手動で独自ドメインに直す(プラグインを停止してヘッダーに自分で記述する)ことで解消できる可能性もあります。

まずはサイトのコードを確認し、sakura.ne.jpで読み込まれているFontAwesome5の記述を確認してみましょう。

参考にして頂ければ幸いです。

おすすめコンテンツ

コメントを残す

メールアドレスが公開されることはありません。

コメントの前にご確認ください。

  • コメントは承認制のため、反映・表示までお時間を頂きます。
  • メールアドレス等の入力も必須ではありませんので入力の必要はありません。お気軽にどうぞ。(冷やかしは止めてね!)
  • コメントや返信があっても通知は届きませんのでご注意下さい。
  • 忙しい時はレスが遅れることもあります。
  • 当ページによる一切の不利益および損害に関し、責任を取ることはできません。