【スワローカスタマイズ】記事内SNSボタンを好きなカラーにしよう

スワローは、ストークと違って全体的なカスタマイズが多く、細かい設定（カスタマイズ）はあまりできないようになっています。
ですので、「SNSボタンを非表示」とすると投稿内のSNSが全て表示されなくなります。

ですが、結構存在感があるんですよね、このボタン。

彩度が高く、大きさもしっかりとしているので、色だけでも変えたい！と思ってました。
で、色々と試してみたところ……

こんな感じに出来上がりました！！　ジャジャーン♪

よいぞー！　よいよい( *´艸｀)

では、こちらのSNSボタンをカスタマイズしていきましょう！

SNSボタンの色をサイトの雰囲気に合わせよう！

カスタマイズは
「外観」⇒「カスタマイズ」⇒「追加css」
と移動し、以下のコードを貼り付けペーストしてください

/* Twitter */
.sns .twitter a {
  background: #c4eff2;
	box-shadow: 0 0 0 #c4eff2;
	color:#505050;
}
.sns .twitter a:hover {
	background: #eaf9f1;
	color: #909090;
}
.sns .twitter a::before{
	content: "\f099";
}

/* Facebook */
.sns .facebook a {
  background: #c4eff2;
	box-shadow: 0 0 0 #c4eff2;
	color:#505050;
}
.sns .facebook a:hover {
	background: #eaf9f1;
	color: #909090;
}
.sns .facebook a::before{
	content: "\f09a";
}

/* hatebu */
.sns  .hatebu a {
  background: #c4eff2;
	box-shadow: 0 0 0 #c4eff2;
	color:#505050;
}
.sns .hatebu a:hover {
	background: #eaf9f1;
	color: #909090;
}
.sns li.hatebu a::before{
	content: "\e903";
}

/* LINE */
.sns .line a {
  background: #c4eff2;
	box-shadow: 0 0 0 #c4eff2;
	color:#505050;
}
.sns .line a:hover {
	background: #eaf9f1;
	color: #909090;
}
.sns li.line a::before{
	content: "\e904";
}

/* Pocket */
.sns .pocket a {
  background: #c4eff2;
	box-shadow: 0 0 0 #c4eff2;
	color: #505050;
}
.sns .pocket a:hover {
	background: #eaf9f1;
	color: #909090;
}
.sns .pocket a::before{
	content: "\f265";
}

以上で終了です！

カラーはメインカラー（全体の70%に使う色）やその同系色（全体の25%に使う色）にすると、よりキレイに見えます^^

ではでは、お読みくださりありがとうございました♪