【SWELL】SNSアイコンリストのカラーを変更する方法

SWELLのSNSアイコンリストのカラーを変更する方法をまとめておきます。

CSSでカラーを変更する

各種SNSアカウントの情報は、カスタマイザーから設定して下さい。また、著者情報エリア「この記事を書いた人」に表示されるアイコンは、管理画面のユーザー「プロフィール」から設定できます。

サイト運営者のSNSアカウント情報を設定する方法 | WordPressテーマ SWELL

あわせて読みたい

【SWELL】著者情報エリア「この記事を書いた人」の設定 SWELLの著者情報エリアの設定についてまとめておきます。 【著者情報エリア】 著者情報エリアは、初期設定で有効になっています。 著者情報エリアを非表示にしたい時は...

追加するCSS

アイコンリストのカラーをまとめて同じ色に変更したい時は、下記CSSを追加します。

.c-iconList__item {
	color: #カラーコード;
}

但し、この方法は下記SNSアイコンリスト全てのカラーが変更される点にだけ注意して下さい。

各種アイコンのクラス名

アイコンごとにカラーを変更したい時は、下記のクラス名を追加します。

例えば、Twitterアイコンのカラーを変更したい時は、下記CSSを追加します。

.c-iconList__item.-twitter {
	color: #1D9BF0;
}

アイコンリストが表示されている場所

場所を指定したい時は、下記のクラス名を追加します。

例えば、プロフィールウィジェットのTwitterアイコンのカラーを変更したい時は、下記CSSを追加します。

.p-profileBox__iconList .c-iconList__item.-twitter {
	color: #1D9BF0;
}

SNSのブランドカラー

カラーが決まっていない時は、ブランドカラーを参考にしてみて下さい。

最後に

SNSアイコンリストのカラーを変更したい方は、この記事のやり方を参考にしてみて下さい。

ただ、ヘッダーやプロフィールウィジェットは、個別にカラーを設定すると少しうるさく感じます。背景色や表示させているアイコンの数にも影響しますが、全体のカラーを統一した方が見やすいのかもしれません。