スワローは、ストークと違って全体的なカスタマイズが多く、細かい設定（カスタマイズ）はあまりできないようになっています。
ですので、「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」
と移動し、以下のコードを貼り付けしてください