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

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

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


1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
/* 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アニメ作成サイト
ありがとうございました!
「外観」⇒「カスタマイズ」⇒「追加css」
と移動し、以下のコードを貼り付けしてください