SWELLで背景色を暗くした場合、サイドのSNSボタンが妙に目立ってしまいます。
背景色を合わせたい、もしくは似た色にしたい場合のメモです。
BEFORE CSS追加 前
![](https://masa-a.com/wp/wp-content/uploads/2021/07/2021-07-03_00h38_03.png)
BEFORE CSS追加 後
![](https://masa-a.com/wp/wp-content/uploads/2021/07/2021-07-04_13h29_53.png)
調べてみると次の箇所で設定されているようでした。
![](https://masa-a.com/wp/wp-content/uploads/2021/07/2021-07-03_00h39_43.png)
これを参考にして、次のようにCSSの設定をついかしました。枠線追加しいます。
/* sns */
.-fix .c-shareBtns__btn:not(:hover) {
background:var(--color_bg) ;
border:1px solid #555;
}
.-fix .c-shareBtns__btn:hover {
border:1px solid #555;
}
.-fix .c-shareBtns__btn:hover
はアイコンをホバーしたら外したりした時に、微妙に大きさが変わるのを防ぐため、に追加しました。
.-fix .c-shareBtns__btn:not(:hover)
のborder の設定と太さを合わせれば、変な大きさの変化がなくなりました。