SWELLカスタマイズ / サイドのSNSシェアボタンの背景色を変更する。

SWELLで背景色を暗くした場合、サイドのSNSボタンが妙に目立ってしまいます。

背景色を合わせたい、もしくは似た色にしたい場合のメモです。

BEFORE CSS追加

BEFORE CSS追加

調べてみると次の箇所で設定されているようでした。

これを参考にして、次のように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 の設定と太さを合わせれば、変な大きさの変化がなくなりました。

この記事が気に入ったら
フォローしてね!

ここで投稿は終わりです
  • URLをコピーしました!
  • URLをコピーしました!
目次