SNSボタンが□になってバグる【アイコンが消える】【FontAwesome】

SNSボタンが□になってバグる

こんにちは けいこぶ です。

今日、たまたまパソコンで自分のブログを確認すると…

SNSボタンが□になってバグる

SNSボタンがバグっていました。バグっていたのは「ツイート」「シェア」「Pocket」の3つです。

SNSボタンの横にはのようなSNSアイコンが表示されていたのですが、それがどこかに消えてしまい□表示となっています。

いったい、いつからこうなっていたのでしょうか…(´・ω・`)

 

すべてのエラーには原因がある

 

この前までちゃんと表示されていたのに、いったい何をした?

冷静に原因を考えてみました。

その結果、ワードプレステーマの更新があったことを思い出しました。

私はワードプレステーマ「STORK(ストーク)」を使っていますが、その更新が今週はじめにありました。きっとあのときに何かがおかしくなったのかもしれません。

 

更新内容を確認してみると何かがわかるかもと思いましたので、まずはテーマの更新内容を確認しました。

すると、アップデート内容(Ver1.2.2)は「Google+のSNSボタンを消去して、代わりにLINEを入れる変更を行った」とのことです。

あ~、なるほど。私は手動でGoogle+を消去してLINEに入れ替えていましたが、どうやらそれが不要になっただけでなく、その過程のどこかが悪さをしているみたいです。

 

FontAwesomeのコードが悪さをしていた

 

結局、あれやこれやと1つ1つ確認してみましたところ、FontAwesomeのコードが悪さをしていることがわかりました。

私はCDN(Web上からフォントデータを読み込んで表示させる形式)を利用してFontAwesomeを利用していたのですが、どうやらそれが悪さをしていたみたいです。

 

私はheader.phpの中に次のようなコードを埋め込んでいました。

<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">

専門的なことはわかりませんが、どうやらコイツの埋め込む位置によってSNSボタンの表示がバグったりバグらなかったりするみたいです。

いやはや…原理はサッパリよくわからん(´・ω・`)

 

そして、どこから埋め込んだらバグにならないかを探っていきますと、どうやらコードは<title>タグの上までもっていかないとダメみたいです。よくわからないですね。

何はともあれ、FontAwesomeのコード位置を修正したらうまくいきました。(「原因はわからんがとりあえず動くようになりました」って一番アカンやつやんけ…)

とりあえず同じ症状が出た方がいましたら、私のようにheader.phpのFontAwesomeコードを疑ってみてはどうでしょう。

 

ちなみに…

SNSボタンの白塗りは関係あるのかなとCSSを戻したりもしましたが、まったく意味はありませんでした。

まあ、SNSボタン自体がバグっているのではなく、SNSアイコンの表示がバグっていますしね。よくよく考えたらSNSアイコンの表示もFontAwesomeを利用していますので、やはり行きつく先はFontAwesomeのコードになるかと思います。