こんにちは けいこぶ です。
今日、たまたまパソコンで自分のブログを確認すると…
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のコードになるかと思います。