WordPress

WordPress テーマ JIN の SNS シェアボタンの色を変更する方法

WordPress テーマ JIN の SNS シェアボタンの色を変更する方法

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/

プログラミング相談受付中

自営エンジニア歴 20年以上の 当ブログ作者が、プログラミングに関するオンライン相談(zoom 等)を受付中です。言語は HTML CSS JavaScript jQuery PHP MySQL VBScript など…

詳細・お問い合わせはこちら