ブログ

AFFINGER5でSNSアイコンが表示されない時の対処法について

2021-01-20

AFFINGER5のSNSアイコンが表示されない時の対処法について

AFFINGER5でSNSアイコンを設定したけどうまく表示されない。

表示させる方法を知りたい。

 

そんな悩みにお答えします。

 

先日、SNSアイコンの設定をしたのにSNSのマークが表示されませんでした。

 

SNSアイコンが表示されているプロフィール

 

「プロフィールカード」や「記事の最後」に表示させているこのアイコンですね。

 

そこで今回は、SNSアイコンが表示されなかった時の対処法について解説していきます。

 

 

ではいきましょう!

 

 

SNSアイコンが表示されない問題が発生

 

先日、「AFFINGER5」を導入してSNSアイコンを設定してみたらアイコンが表示されませんでした。

 

SNSアイコンが塗り潰されている場合

 

また、記事の最後に表示しているアイコンも同じように表示されてませんでした。

 

記事下のSNSアイコン

 

 

 

SNSアイコンが表示されない原因

SNSアイコンが表示されない原因は、FontAwesomeの設定を行っていたからでした。

 

FontAwesomeとは、Webサイト上におしゃれなアイコンを表示できるツールのことです。

 

例えば、 みたいなアイコンを表示できます。

 

詳しくはこちらの記事をご覧ください。

 

こちらもCHECK

【2020年最新版】Font Awesome6の使い方とおしゃれなカスタマイズ方法
【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アイコンが表示されない時の対処法:まとめ

SNSアイコンが表示されない時の対処法:まとめ

 

今回は、AFFINGER5で「プロフィールカード」や「記事の最後」に設定しているSNSアイコンが表示されないという問題と対処法について紹介しました。

 

最後にまとめておきましょう。

 

 

今回の原因は、FontAwesomeを利用する際に必要なコードを「header.php」に追加していたからでした。

 

 

FontAwesomeについて詳しく知りたい方は、こちらの記事をご覧ください。

 

こちらもCHECK

【2020年最新版】Font Awesome6の使い方とおしゃれなカスタマイズ方法
【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でプロフィールを作成する方法を解説します!
【図解でサクッと】AFFINGER5でプロフィールを作成する方法を解説します!

続きを見る

 

 

 

-ブログ

© 2021 しゅんぼーBLOG Powered by AFFINGER5