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

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

簡単に設定できます。

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

  • シェアボタンの視認性が向上する
  • カスタマイズの幅が広がり、SANGOライフがより楽しくなる

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


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

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

Daniel
Daniel

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

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

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

完成イメージ

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

設定方法の流れ

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

  • 手順①:『外観』→『カスタマイズ』を開く
  • 手順②:『追加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ではどれくらい透明化させるかを調整できます。

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

opacity: 0;

background

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

まとめ

最後にまとめます。

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

  • シェアボタンの視認性が向上する
  • カスタマイズの幅が広がり、SANGOライフがより楽しくなる

というわけでした。

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