SNSフォローアイコンが文字化けしたら? ~Chromeに潜む罠【WordPress】

この記事は約3分で読めます。

WordPressカスタマイズ

質問者の写真

SNSフォローアイコンが文字化けして「□」になっちゃうよ~

(Simplicityの例を挙げていますが、本トラブルはどのテーマでも起こりうる可能性があります)

SimplicityのSNSフォローアイコンが表示されない?

SNSフォローというのはTwitterやRSSとかをフォローしてもらうためのボタン。
Simplicityは親切にも、それらの設置がチェック一つで済みます。
ああ、なんてありがたい、そう思ってチェックしました。

……が、なぜか「□」に。
画像が出ません、一体どうして?

Simplicityの公式サポートフォーラムはどうだ?

まず子テーマを外し、継いで親テーマ。
解決しない……ということはカスタマイズが原因じゃない。

続いてプラグインを外す。
これも原因じゃない。

ここで公式サポートに行ってみる。
同じ症状の方がいました。

こちらも原因が判明していない様子。

また、別ページにはこんなことも書いてました。

ということは、やはりサーバーなどの環境に依存する問題なのかと思い、調べてみたら、原因はウェブフォントのクロスドメイン問題のようです。

※さくらサーバーでも新しいサーバではちゃんと表示されます。サーバー情報を調べてみた感じでは、不具合の出ていたサイトは2005年頃サーバーを取得されていました。なので古いサーバーでは、アイコフォントが使えないのではないかと思います。

追記:ロリポップの古い環境(2005年頃のサーバー)でも同様の不具合を確認しました。

私はロリポップですが、2014年12月稼働のサーバーなので違う。

仕方ない、自分でアイコン作ってぶち込むかなあ。
そう思いかけたところで……原因がわかりました。
本当にふとしたきっかけでした。

SNSアイコンが表示されなかった原因判明

Internet Explorerだと映った!

私はブラウザにchromeを使ってます。
しかしサイトの全てがIEに対応しているわけじゃない(例:ハンゲーム)ので、そうしたページのみIEを用いてます。
今回ハンゲームにログインするついでに、自分のページをIEで開いてみました。

すると……

質問者の写真

アイコンが表示されたよ~
 

ということは、原因はChrome?

もしかして……思いついた方法を試す。
その結果、無事に直りました。

原因はChromeのプラグイン「強制メイリオちゃん」

「強制メイリオちゃん」は、メイリオ表示していないサイトも強引にメイリオにするプラグイン。

トップページが汚すぎて読めないサイトはかなりあります。
その最たるものが、私の活動している「小説家になろう」。
小説サイトならフォントにこだわれよ!
そのため非常に重宝していたプラグインでした。

Font Awesomeとの競合

ここで押さえておかないといけないポイント。
SimplicityのSNSフォローアイコンはWebフォントFont Awesomeで表示しています。

「強制メイリオちゃん」はFontAwesomeをも強引にメイリオに変換しようとするから映らないのです。

つまりはプラグインとフォントの競合。
Simplicityのみならず、他のテーマでもWEBフォントを用いている場合は同じことが起きるでしょう。
Font Awesomeは最近の主流ですので注意が必要です。
皆様も御注意の程を。

結論

解答者の写真

あんまりないケースだと思うけど……トラブルが起きたときはブラウザの設定も疑ってみてね。
フォントを強制変更するブラウザ・プラグインの利用には注意して!