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

彩度が高く、大きさもしっかりとしているので、色だけでも変えたい!と思ってました。
で、色々と試してみたところ……
こんな感じに出来上がりました!! ジャジャーン♪

よいぞー! よいよい( *´艸`)
では、こちらのSNSボタンをカスタマイズしていきましょう!
SNSボタンの色をサイトの雰囲気に合わせよう!


/* 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%に使う色)にすると、よりキレイに見えます^^
ではでは、お読みくださりありがとうございました♪
「外観」⇒「カスタマイズ」⇒「追加css」
と移動し、以下のコードを貼り付けしてください