Udemyセール開催中! 対象コースが1,220円から

【SWELL】プロフィールのSNSアイコンリストの色を変更するCSS

本記事では「CSS」が分からなくてもコードをコピペするだけでOKです!

今回はワードプレステーマ「SWELL」のプロフィール上で表示される「SNSアイコンリスト」の色を変更させるCSSコードを紹介します。

今回はわかりやすいようにTwitterのSNSアイコンリストの色の変更方法を紹介した後で、instagram、facebookなど別のSNSアイコン色を変更させる方法を紹介していきます。

目次

プロフィールのSNSアイコンの色を変更させるCSS

p-profileBox__iconList .icon-twitter{
  color: #1C9BEF;
}

プロフィールで表示されている「Twitter SNSアイコン」の色を変更させるコードがこちら!

上記コードをコピペすれば、SNSアイコンの色がTwitterのメインカラーに変更されます。任意の色に変更したい場合は「color: 〇〇;」の〇〇にカラーコードを使用してみてください。

instagramやfacebookなどのSNSアイコンの色を変更させる

/* instagramの場合 */
p-profileBox__iconList .icon-instagram{
  color: 〇〇;
}
/* facebookの場合 */
p-profileBox__iconList .icon-facebook{
  color: 〇〇;
}

Twitter以外または複数のSNSアイコンをプロフィールで表示している人は「.icon-〇〇」の〇〇にSNS名を入れれば先程と同様にSNSアイコンの色を変更できます。

プロフィール文章のデザインをシンプルにしたい方向け

プロフィール文章をマナブログ風にアレンジしてみたい方は上記事がオススメです!

ブロガー必見!ブログ×プログラミングは相性抜群

ブログ運営しているとプログラミングに興味が湧いてくる方が多いはずです!

けど、プログラミングに一度も触れたことがない方にとって「難しいから自分にはどうせプログラミング無理」と思ってしまっている方がほとんどだと思いますが、実際は違います。

3日あればブログ運営に必要なプログラミングスキルは身につきます!

「嘘でしょ!」と思うかもしれませんが、私を含め一般的なブロガーに必要なプログラミングスキルとは、本記事でも紹介した「CSS」だけでなので早い人なら1日、長くても3日あれば基本的なCSSのスキルは習得できます。

また、プログラミングを知ることで「高単価案件」プログラミングスクールのアフィリエイト記事が書けるようになるのでブログネタを作るのにも役立ち「一石二鳥」です!

こんな感じのアフィリエイト記事が書ける↓

読者の方で「プログラミングとは何か?」「効率的な学習方法は?」など気になる方はプログラミングスクールの無料カウンセリングで相談してみるのがオススメです!

私は現時点で8つのプログラミングスクールの無料カウンセリングで話を聞いてきましたが、優良プログラミングスクールではカウンセラーさんの対応が丁寧で何度も質問できるので情報収集をするのにとても重宝しました。

未経験者で教養(ブログのため)でプログラミングを学ぶことに興味がある方は「侍エンジニア塾」または「テックアカデミー」の無料カウンセリングで話を聞いてみるのがオススメです!

  • URLをコピーしました!
目次
閉じる