「TCD AWARD 2023」受賞サイトを発表しました。

ワードプレステーマ別

TCDテーマNULL:フッター・投稿者プロフィールのSNSアイコンでTikTokアイコンを表示させる方法

Q.フッターバー(モバイル端末専用)ではTikTokアイコンが表示できますが、PC用のフッターや投稿者プロフィールにTikTokアイコンを表示させることは出来ますか?

注意点テーマによっては当記事の内容を参考に頂けることがありますが、アイコンフォントにTikTokアイコンが含まれていないテーマでは当記事の内容を用いることは出来ません。
アイコンが追加されたタイミングにより、アイコンコードが異なる場合がございます。

A.下記の方法でご対応ください。

既存のアイコン(今回はPinterest)のCSSを調整して、見た目上TikTokアイコンとして表示させます。
リンク先URLはPinterestの項目に設定した内容が反映されます。

1. 「フッター」のPinterestアイコンをTikTokとして表示する

以下をTCDテーマ>基本設定のカスタムCSSに入力してください。

.p-footer__sns-icons .c-sns-icons__link--pinterest:before { content: '\e954'!important; }

/* 公式準拠カラー表示時のアイコン色変更 */
.p-footer__sns-icons .c-sns-icons--type2 .c-sns-icons__link--pinterest:before { color: 〇!important; }

〇を任意のカラーコードに変更してください。

2. 「投稿者プロフィール」のPinterestアイコンをTikTokとして表示する

.p-author-profile__icons .c-sns-icons__link--pinterest:before { content: '\e954'!important; }

/* 公式準拠カラー表示時のアイコン色変更 */
.p-author-profile__icons.c-sns-icons--type2 .c-sns-icons__link--pinterest:before { color: 〇!important; }

〇を任意のカラーコードに変更してください。

この記事は役に立ちましたか?

もし参考になりましたら、下のボタンで教えてください。
今後の記事作成の参考とさせて頂きます!

同じテーマのカスタマイズ記事