SWELLのSNSアイコンリストのカラーを変更する方法をまとめています。
CSSでカラーを変更する
各種SNSアカウントの情報はカスタマイザーから、著者情報エリア「この記事を書いた人」に表示されるアイコンは、管理画面のユーザー「プロフィール」から設定できます。
一括変更
アイコンリストのカラーを一括変更したい時は、下記CSSを追加します(下記CSSはメインカラーに変更)。
.c-iconList__item {
color: var(--color_main);
}
var(--color_main)
の部分は、お好みで任意のカラーコードに置き換えて使って下さい。
- ヘッダーのアイコンリスト
- ウィジェット「[SWELL] プロフィール」のアイコンリスト
- ウィジェット「[SWELL] SNSリンク」のアイコンリスト
- この記事を書いた人のアイコンリスト
- フッターのアイコンリスト
個別変更
カラーを変更したいアイコンのCSSを追加して、任意のカラーコードを指定します。
/* Facebook */
.c-iconList__item.-facebook {
color: #000000;
}
/* X(旧Twitter) */
.c-iconList__item.-twitter-x {
color: #000000;
}
/* Instagram */
.c-iconList__item.-instagram {
color: #000000;
}
/* TikTok */
.c-iconList__item.-tiktok {
color: #000000;
}
/* 楽天ROOM */
.c-iconList__item.-room {
color: #000000;
}
/* LINE */
.c-iconList__item.-line {
color: #000000;
}
/* Pinterest */
.c-iconList__item.-pinterest {
color: #000000;
}
/* Github */
.c-iconList__item.-github {
color: #000000;
}
/* YouTube */
.c-iconList__item.-youtube {
color: #000000;
}
/* Amazon欲しいものリスト */
.c-iconList__item.-amazon {
color: #000000;
}
/* Feedly */
.c-iconList__item.-feedly {
color: #000000;
}
/* RSS */
.c-iconList__item.-rss {
color: #000000;
}
/* お問い合わせ */
.c-iconList__item.-contact {
color: #000000;
}
/* 検索 */
.c-iconList__item.-search {
color: #000000;
}
#000000
の部分は、任意でお好みのカラーコードに置き換えて下さい。
場所を指定して変更
場所を指定するCSSを追加して、任意のカラーコードを指定します(下記CSSはメインカラーに変更)。
/* ヘッダーバー */
.l-header__bar {
color: var(--color_main);
}
/* [SWELL] プロフィール */
.p-profileBox__iconList {
color: var(--color_main);
}
/* [SWELL] SNSリンク */
.widget_swell_sns_links {
color: var(--color_main);
}
/* この記事を書いた人 */
.p-authorBox {
color: var(--color_main);
}
/* フッター */
.l-footer__inner {
color: var(--color_main);
}
個別変更のCSSと組み合わせれば、場所を指定して個別にアイコンのカラーを変更することもできます。
/* プロフィールウィジェットのTwitterアイコンのカラーを変更 */
.p-profileBox__iconList .c-iconList__item.-twitter-x {
color: #000000;
}
var(--color_main)
と#000000
の部分は、任意でお好みのカラーコードに置き換えて使って下さい。
SNSのブランドカラー
カラーで迷った時は、ブランドカラーを参考にして下さい。
SNS | カラーコード | RGB |
---|---|---|
#3B5998 | R59 G89 B152 | |
X(旧Twitter) | #000000 | R0 G0 B0 |
グラデーション | グラデーション | |
TikTok | #000000 #85F9F5 #FE2C55 | R0 G0 B0 R133 G249 B245 R254 G44 B85 |
楽天ROOM | #C61E79 | R198 G30 B121 |
LINE | #00B900 | R0 G185 B0 |
#E60023 | R230 G0 B25 | |
Github | #171515 | R23 G21 B21 |
YouTube | #FF0000 | R255 G0 B0 |
Amazon | #FF9900 | R255 G153 B0 |
Feedly | #6CC655 | R108 G198 B85 |
RSS | #F26522 | R242 G101 B34 |
最後に
CSSを追加すれば、SNSアイコンリストのカラーは簡単に変更できます。
ただ、ヘッダーやプロフィールウィジェットは、個別にカラーを設定すると少しうるさく感じます。背景色や表示させているアイコンの数にも影響しますが、全体のカラーを統一した方が見やすいのかもしれません。
コメント