【簡単！SANGOカスタマイズ】シェアボタンのスタイルを変更してグラデーション＋透明化する方法

SANGOの各記事内にはシェアボタンが用意されています。このボタンのスタイルを変更する方法について解説します。

簡単に設定できます。

メリットとしては、大きく下記の2点です。

デフォルトだと、以下のようなスタイルとなっています。

これでも十分に視認性のある分かりやすいスタイルですが、個人的にはもう少し見やすくしたいなと思いました。

ということで実際に変更してみたので、この記事でカスタマイズ方法をご紹介します。

Daniel

自己紹介：
この記事を書いている僕は、SANGO歴１年ほど。
カスタマイズしながら楽しく過ごしています。

シェアボタンのスタイルを変更する方法

まずは完成イメージをお見せします。

完成イメージ

実際に僕のサイトでも設定しているスタイルとなっています。

設定方法の流れ

以下の流れで設定できます。追加CSSに追記するだけで完了します。

順番に見ていきます。

手順①：『外観』→『カスタマイズ』を開く

以下のように開きます。

手順②：『追加CSS』に追記する

以下の内容をコピペしてください。

/* 記事内シェアボタンのスタイルをグラデーション＋透明化に変更する */
    .accent-bc {
      border-radius: 7px;
      opacity: 0.9;
      background: linear-gradient(95deg, #ff666b, #ffccce);
    }

以下のように追加できました。

手順③：「公開」を押して完了！

設定は以上で完了です！お疲れさまでした。

SANGOの各記事内にあるシェアボタンのスタイルを微調整する

各項目の値はお好みに調整してみてください。

border-radius

以下のとおり、border-radiusの値を変更することで角丸具合を定義できます。

四角形

0px で完全な四角形になります。0px に近いほど、角がなくなります。

  border-radius: 0px;

両端を丸く

 border-radius: 30px;

その他

こんな形にもできます。

border-radius: 20px 30px 50px 40px;

opacity

opacityではどれくらい透明化させるかを調整できます。

「０」で完全に透明化します。

opacity: 0;

background

ここでは背景色のグラデーションパターンを指定できます。こちらもお好みのお色の組み合わせで、色々と試してみてください。

まとめ

最後にまとめます。

SANGOの各記事内にあるシェアボタンのスタイルを変更することで、

というわけでした。

今回は以上です！
最後までお読み頂き、ありがとうございました。
素敵なSANGOライフをお楽しみください。