AFFINGER5でSNSアイコンを設定したけどうまく表示されない。
表示させる方法を知りたい。
そんな悩みにお答えします。
先日、SNSアイコンの設定をしたのにSNSのマークが表示されませんでした。
「プロフィールカード」や「記事の最後」に表示させているこのアイコンですね。
そこで今回は、SNSアイコンが表示されなかった時の対処法について解説していきます。
ではいきましょう！
SNSアイコンが表示されない問題が発生
先日、「AFFINGER5」を導入してSNSアイコンを設定してみたらアイコンが表示されませんでした。
また、記事の最後に表示しているアイコンも同じように表示されてませんでした。
SNSアイコンが表示されない原因
SNSアイコンが表示されない原因は、FontAwesomeの設定を行っていたからでした。
FontAwesomeとは、Webサイト上におしゃれなアイコンを表示できるツールのことです。
例えば、 や みたいなアイコンを表示できます。
詳しくはこちらの記事をご覧ください。
こちらもCHECK
-
-
【2020年最新版】Font Awesome6の使い方とおしゃれなカスタマイズ方法
続きを見る
FontAwesomeを設定した際、「header.php」ファイルに必要なコードを追記していたため、今回のSNSアイコンが表示されませんでした。
追記したコードを削除したらSNSアイコンが表示されました。
header.phpを開く
WordPress管理ページ → [外観] → [テーマエディター]をクリックし、右ペインからheader.phpを選択
ただし、上記で追加したコードは削除できないので他の改善策を考える必要があります。
ではその方法について見ていきましょう！
SNSアイコンを表示させる方法
SNSアイコンが表示されない原因がわかったので、表示させる方法を見ていきましょう。
SNSアイコンを表示させるには、追加CSSに次のコードを追加するだけです。
CSSに追加するコード
i.fa.fa-twitter::before{
font-family: "FontAwesome"!important;
}
ちなみに追加CSSは次の手順で確認できます。
追加CSSを開く
WordPress管理ページ → [外観] → [カスタマイズ]を選択し、新しく開いたページを一番下までスクロールし、[追加CSS] をクリック
コードだけを追加すると、あとで確認したときになんで追記したか分からなくなるので、コメントもつけておきましょう。
/* プロフィールのSNSアイコンを表示させるここから*/
i.fa.fa-twitter::before{
font-family: "FontAwesome"!important;
}
/*プロフィールのSNSアイコンを表示させるここまで*/
処理させたくない文字列を「/*」と「*/」で囲むと、コメントアウトできるので有効に使っていきましょう。
ちなみに上記のコードはTwitterのアイコンを表示させるコードなので、Facebook等のアイコンを表示させるには別のコードが必要です。
Instagram → i.fa.fa-instagram::before
Facebook → i.fa.fa-facebook::before
Pocket → i.fa.fa-get-pocket::before
1行目を変更するだけでOKなので、他のSNSアイコンも表示させたい方はTwitterと同じように追加しておきましょう！
これで「プロフィールカード」や「記事の最後」のSNSアイコンが表示されるようになりました。
SNSアイコンが表示されない時の対処法：まとめ
今回は、AFFINGER5で「プロフィールカード」や「記事の最後」に設定しているSNSアイコンが表示されないという問題と対処法について紹介しました。
最後にまとめておきましょう。
今回の原因は、FontAwesomeを利用する際に必要なコードを「header.php」に追加していたからでした。
FontAwesomeについて詳しく知りたい方は、こちらの記事をご覧ください。
こちらもCHECK
-
-
【2020年最新版】Font Awesome6の使い方とおしゃれなカスタマイズ方法
続きを見る
追加CSSに次のコード追加することで対処できます。
/* プロフィールのSNSアイコンを表示させるここから*/
i.fa.fa-twitter::before{
font-family: "FontAwesome"!important;
}
/*プロフィールのSNSアイコンを表示させるここまで*/
Twitter以外のSNSアイコンを表示させたい場合は、コードの1行目だけ変更しましょう。
各SNSアイコンのコードは次のとおりです。
Instagram → i.fa.fa-instagram::before
Facebook → i.fa.fa-facebook::before
Pocket → i.fa.fa-get-pocket::before
少しでも参考になれば幸いです。
プロフィールカードの設定方法もまとめてますので、こちらも参考にしていただければと思います。
こちらもCHECK
-
-
【図解でサクッと】AFFINGER5でプロフィールを作成する方法を解説します！
続きを見る