WordPress テーマ “JIN” の SNS シェアボタンの色を、デフォルトで指定されている配色から変更したい場合の設定方法をご紹介いたします。
※参考サイトは最下部にまとめております。
目次
SNS シェアボタン
[外観] – [カスタマイズ] では変更できない
[外観] – [カスタマイズ] から設定できるのでは？と思いますが…こちらでは色の変更を指定することができません。では [追加 CSS] で指定するしかありません！
CSS クラス定義を調べる
Google Chrome DevTools で Twitter の SNS シェアボタンのクラスを調べてみると…
.sns-design-type01 .twitter a {
border-color: #00acee;
background: #00acee;
}こんな風に定義されてます。
“.sns-design-type01” の “01” は [外観] – [カスタマイズ] – [SNS設定 (OGP)] – [SNSボタンのデザイン] = “スタイル1″ を選択しているためで、”スタイル2” を選択すると…
.sns-design-type02 .twitter a {
border-color: #00acee;
color: #00acee;
}こんな定義になります。”スタイル1″ では “border-color” と “background” を定義してますが、”スタイル2″ では “border-color” と “color” を定義しています。
追加 CSS
WordPress メニュー [外観] – [カスタマイズ] – [追加 CSS] に以下の CSS を貼り付けて #?????? をお好みの色に指定して [公開] を押せば完了です。
.sns-design-type01 .twitter a {
border-color: #1193d0 !important;
background: #1193d0 !important;
}
.sns-design-type01 .facebook a {
border-color: #416390 !important;
background: #416390 !important;
}
.sns-design-type01 .hatebu a {
border-color: #466b9b !important;
background: #466b9b !important;
}
.sns-design-type01 .pocket a {
border-color: #c51b3a !important;
background: #c51b3a !important;
}
.sns-design-type01 .line a {
border-color: #559b46 !important;
background: #559b46 !important;
}※上記の配色は当ブログで設定している配色です。本文の邪魔にならないように 抑えめの色合いに変更してます。
参考サイト
WordPress テーマ JIN
https://jin-theme.com/
