「AddToAny Share Buttons」はブログにおしゃれなシェアボタンを表示するWordPress用プラグイン。
FacebookやTwitterを始めとした100種類以上のSNSシェアボタンを簡単に設置することができます。
AddToAny Share Buttonsは、スマホの画面下にシェアボタンを固定表示する機能があります。
ただ、スマホの画面下にシェアボタンが5つも6つも常駐していると、ユーザーに『うざい』と感じさせる可能性も…
ということで、この常駐シェアボタンの存在感を薄めるカスタマイズをしてみました。
スマホ固定シェアボタンのカスタマイズ内容
AddToAny Share Buttonsのスマホ常駐シェアボタンの存在感を薄めるため、ボタンを半透明にしてみました。
上の画像はカスタマイズ前後の比較です。
カスタマイズ後（右）は画面下のシェアボタンが半透明になり、下のテキストが透けているのがおわかりいただけたと思います。
さらにカスタマイズ後のスマホ画面をスクロールする様子を動画にしてみました。
画面下の固定シェアボタンの存在感がかなり薄まっているのがおわかりいただけると思います。
シェアボタンの存在感を薄めるカスタマイズ手順
では、AddToAny Share Buttonsのスマホ固定シェアボタンを半透明にするカスタマイズ方法をお話しします。
このカスタマイズの手順はとてもカンタン。
WordPressのダッシュボード（管理画面）で短いコードを入力するだけです。
WordPressのダッシュボード（管理画面）の左側メニューから「外観」→「カスタマイズ」を選択します。
カスタマイズ画面に切り替わったら、左側メニューにある「追加CSS」を選択します。
CSS（カスタムスタイルシート）のコードを入力するボックスが表示されますので、そのボックスに以下のコードを入力します。
/*AddToAnyモバイル固定半透明化*/
.a2a_floating_style.a2a_default_style {opacity:0.5;}コードの入力が終わったら「公開」ボタンをクリック。
これでカスタマイズは完了です。
カスタマイズ補足
シェアボタンの透明度を変える方法
シェアボタンの透明度は、先ほど入力したコードの中の数値をひとつ変えるだけで簡単に調整できます。
先ほどのコードをもう一度ご覧ください。
/*AddToAnyモバイル固定半透明化*/
.a2a_floating_style.a2a_default_style {opacity:0.5;}この中のopacityが透明度を設定するプロパティです。
このopacityの数値（上のコードでは0.5となっている部分）を変えるとシェアボタンの透明度が変化します。
- 1＝完全な不透明
- 0＝完全な透明
0.5だとちょっと薄いな～という場合は、この数値を1に近づければ不透明度が上がりシェアボタンの存在感が増します。
逆にゼロに近づけるともっと透明になり、シェアボタンがさらに目立たなくなります。
他のシェアボタンには影響なし
この記事で紹介するカスタマイズは、スマホ画面下の固定シェアボタン以外のデザインには影響を与えません。
AddToAny Share Buttonsを使うと、
- デスクトップ（PC)画面に常駐するシェアボタン
- 記事下のシェアボタン
も設置することができます。
このカスタマイズではこれらのデザインに影響を与えることなく、スマホ固定シェアボタンだけが半透明になります。
以上、AddToAny Share Buttonsで設置したスマホ画面下の固定シェアボタンを、半透明にして存在感を薄めるカスタマイズでした。