WordPressテーマ「DIVER」でSNSのカラーリングを変更する方法

どうも！HIRAMA（@hiramarilyouiti）です！！

先日についに以前より気になっていたWordPressテーマ「DIVER」を購入することが出来ました

とりあえずは以前使っていたテーマ「STORK」のときのようなブログにしようとあれこれと頑張っている最中でございます

「DIVER」をカスタマイズしていくうちにひとつの壁とぶち当たり改善することが出来たので同じように「DIVER」を愛用している方のために記事に残しておきたいと思います

SNSのカラーリングを変更したい

▲よく記事の上や下にあるSNS等の表示。このカラーリングの変更ってどうやるんだろ？というとこから話は始まります。

上記写真では僕が思ったとおりのカラーリングにすでに変更することが出来ているのですが、この方法がなかなかわかりませんでした

正直、僕はブロガーを何年もやってはいるもののCSSやHTML等のことがわかっているようでわかっていません！

「DIVER」サポートに問い合わせ

SNSのカラーリングを変更したい！

だけど何からしていいかわからない！ということで「DIVER」の魅力ひとつサポートに問い合わせをしてみた

返答まで1日くらいかかったが丁寧にCSSを教えてくれた

SNSカラーリング変更のCSS

「DIVER」のサポートからもらったSNSカラーリング変更のCSS（ありがとうございます）

それが以下のCSSだ▼

 .sns a.facebook {
    background: #3b5998;
    border: 2px solid #3b5998;
}
.sns a.twitter {
    background: #00acee;
    border: 2px solid #00acee;
}
.sns a.googleplus {
    background: #db4a39;
    border: 2px solid #db4a39;
}
.sns a.hatebu {
    background: #5d8ac1;
    border: 2px solid #5d8ac1;
}
.sns a.pocket {
    background: #f03e51;
    border: 2px solid #f03e51;
}
.sns  a.feedly{
  background:#87c040;
  border:2px solid #87c040;
}

このCSSを「外観」→「カスタマイズ」→「追加CSS」にコピペしてカラーコードを自分の好きなように変更すればSNSのカラーリングを変更することができる

ただしこのCSSで変更出来るのはSNSの「色」がついている部分のみ。SSNSの文字のカラーリングまでの変更が出来ないのだ

SNS文字のカラーリング変更

再び「DIVER」サポートへと問い合わせ。すると早い段階で返答がきました

SNS文字部分のカラーリング変更を行うCSSは以下のとおりだ▼

 .sns a, .sns.small a {
    color: #000;
}

このCSSでSNS文字部分のカラーリング変更ができる！と思い試したのですが、なんとこのCSS。そのまま使用するとSNS全部の文字部分のカラーリングが変更されてしまうのです

Facebookの文字部分のカラーリング変更をすると横にあるTwitterやらなんやらも全て同じカラーリングへと変更されてしまうのです

これでは先程の僕が設定しているSNSのカラーリングに変更することは出来ません

最終的にいきついたCSS

上記の2つのCSSを使っても思い通りなSNSのカラーリングにはならない…

何か方法はないかな〜と思ったときです。ひとつ思いついたのです

上記の2つのCSSを合体させちゃえばいいのでは？と！

それで完成したのが以下のCSSです▼

/*————————————–
記事上SNSのカラーリング変更
————————————–*/
 .sns a.facebook {
    background: #FFFFFF;
    border: 2px solid #3b5998;
	  color: #3b5998;
}
.sns a.twitter {
    background: #FFFFFF;
    border: 2px solid #00acee;
	color: #00acee;
}
.sns a.googleplus {
    background: #FFFFFF;
    border: 2px solid #db4a39;
	color: #db4a39;
}
.sns a.hatebu {
    background: #FFFFFF;
    border: 2px solid #5d8ac1;
	color: #5d8ac1;
}
.sns a.pocket {
    background: #FFFFFF;
    border: 2px solid #f03e51;
	color: #f03e51;
}
.sns  a.feedly{
  background:#FFFFFF;
  border:2px solid #87c040;
	color: #87c040;
}

このCSSであればSNSの外枠・文字色・色のカラーリングをそれぞれ変更することが可能なのです（ただ合体させただけ）

これで自分なりに個性のでたSNSを設置することが出来ますね！

同じWordPressテーマ「DIVER」をお使いの方の少しでも参考になれば幸いです