SWELLのSNSアイコンリストのカラーを変更する方法をまとめています。
目次
CSSでカラーを変更する
各種SNSアカウントの情報はカスタマイザーから、著者情報エリア「この記事を書いた人」に表示されるアイコンは、管理画面のユーザー「プロフィール」から設定できます。
サイト運営者のSNSアカウント情報を設定する方法 | WordPressテーマ SWELL
あわせて読みたい
【SWELL】著者情報エリア「この記事を書いた人」の設定
SWELLの著者情報エリアの設定についてまとめています。 【著者情報エリア】 著者情報エリアは、初期設定で有効になっています。 著者情報エリアを非表示にしたい時は、...
一括変更
アイコンリストのカラーを一括変更したい時は、下記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アイコンリストのカラーは簡単に変更できます。
ただ、ヘッダーやプロフィールウィジェットは、個別にカラーを設定すると少しうるさく感じます。背景色や表示させているアイコンの数にも影響しますが、全体のカラーを統一した方が見やすいのかもしれません。
コメント