【スワローカスタマイズ】記事内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%に使う色)にすると、よりキレイに見えます^^

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

今回利用させてもらったgifアニメ作成サイト

BANNER KOUBOU

ありがとうございました!

スポンサーリンク
注意
特に記載がない場合、掲載されている小説はすべてフィクションであり実在の人物・団体等とは一切関係ありません。また小説の著作権は作者にあります。
作者以外の方による過度な引用や無断転載は禁止しており、行った場合は著作権法の違反となります。
このサイトはリンクフリー・スマホ携帯対応です。シェアまたはリンクして頂けると嬉しいです。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です