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

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

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

目次

\ Amazon 飲料サマーセール /

CSSでカラーを変更する

SNSリストアイコンのカラー

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

サイト運営者のSNSアカウント情報を設定する方法 | WordPressテーマ 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
Facebook#3B5998R59 G89 B152
X(旧Twitter)#000000R0 G0 B0
Instagramグラデーショングラデーション
TikTok#000000
#85F9F5
#FE2C55
R0 G0 B0
R133 G249 B245
R254 G44 B85
楽天ROOM#C61E79R198 G30 B121
LINE#00B900R0 G185 B0
Pinterest#E60023R230 G0 B25
Github#171515R23 G21 B21
YouTube#FF0000R255 G0 B0
Amazon#FF9900R255 G153 B0
Feedly#6CC655R108 G198 B85
RSS#F26522R242 G101 B34
※ブランドカラーは変更されることがあります

最後に

CSSを追加すれば、SNSアイコンリストのカラーは簡単に変更できます。

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

シェアしてね!

この記事を書いた人

X(旧Twitter)のインプは参考にならない。記事が拡散されてXのインプが10,000を超えても、サイトへのアクセスは1,000にも満たない。また、トレンドに入っているキーワードを含めて投稿すれば、インプは勝手に増える。記事の内容にもよるけど、Xのインプに対して、サイトへのアクセスが5~10%あれば御の字。ただ、とりあえず記事を投稿しておけば、Xのキーワード検索にはかかるので、アクセスアップには使えるのかもしれない。

コメント

コメントする

目次