- ブログの見た目を少しでもオシャレにしたい人
- 記事をシェアしてもらう確率をあげたい人
- ピンタレストを導入しているけど「保存マーク」がうざい人
みなさんは、シェアボタンを意識したことがありますか？
『シェアボタン』とは各SNSへ記事をシェアする時のアクションを簡略化するために、使用される「ショートカットボタン」のようなものです。
つまり、読者が簡単に記事を拡散（ブックマーク）できるようにするのが目的です。
本ブログでもそうですが、アイキャッチの下や記事下などに設置している方が多いです。（以下の画像参照）
アイキャッチ下 
記事下
ただ、これだとあまり目立たない。
そこまで目立つ必要はないのですが、できるだけ存在は気づいてほしい。
ということで、以下の画像のような表示ができるようにしてみました。
これは画面のスクロールに合わせて追従する設定をしています。
パソコン画面 
スマホ画面
今回はこの『シェアボタン』の表示方法についてご紹介します。
結論から言うと『AddToAny Share Buttons 』というプラグインを導入するだけです。
では、どうぞ！！
ブログのデザインを少しでもオシャレにしたいのはブロガーの性！！
目 次
『AddToAny Share Buttons』とはシェアボタンを「任意の位置」に「任意の数」表示させるプラグインです。
できることは以下の通りです。
- 全99個のシェアボタンを表示されることができる
- 画面スクロールに合わせて表示/非表示ができる
- 画面の任意の位置に固定できる
詳しく説明していきます。
全99個のシェアボタンを表示されることができる
設定方法については、後述しますが以下の画像にあるボタンのどれでも表示させることができます。
自分で好きにカスタマイズできるのは、大きなメリットです。
ただ、実際には多く表示させすぎると見にくくなるので５～７個ぐらいが妥当かなと思います。
筆者の場合
- はてなブックマーク
- LINE
の、6個を登録しています。
画面スクロールに合わせて表示/非表示ができる
画面のスクロールに合わせて、シェアボタンを表示するか非表示にするか設定できます。
実際の画面が以下になります。
左：パソコン（画面左端にシェアボタン固定）
右：スマホ（画面下部にシェアボタン固定）
パソコン画面 
スマホ画面
筆者の場合「アイキャッチの下・記事下のシェアボタン」と「固定させているシェアボタン」の両方混在しないように調整してます。
ちょっと混在してるけど、そこはご愛敬で！(笑)
画面の任意の位置に固定できる
画面のどこにでも表示させることができます。
例えば、「画面の左端から○○ピクセル、上から○○ピクセルの位置」などの設定が可能です。
ただ、実際はそこまで変更しなくても、十分問題ない位置に表示されるので、微調整などに利用することになります。
冒頭でも記載していますが、役に立つポイントは以下の2点です。
- ピンタレストを導入してるが「保存マーク」が鬱陶くて改善したい時
- ブログの見た目を少しでもオシャレに、更にシェアしてもらう確率をあげたい時
１つずつ説明していきます。
ピンタレストを導入してるが「保存マーク」が鬱陶くて改善したい時
そもそも筆者が、このプラグインを導入したきっかけになったのが、『ピンタレストの保存マークがうざい』からでした。
ピンタレストを導入したののは良いものの、画像の左上にアイコンが表示され、画像に記載の文字が見にくくなったり、気が散ってしまっていました。（以下の画像参照）
ただ、ピンタレストは辞めたくない。（できればシェアしてほしい）
そう思った時に、Twitterのフォロワーさんからアドバイスをいただき、本プラグインを導入しました。
要するに、ピンタレストのアイコンの鬱陶しさを改善しつつ、シェアもしてもらえる環境を作った。ということです。
確かに見にくいし、気になるよね、、、
それが改善できるだけでも導入の価値あり！
ブログの見た目を少しでもオシャレに、更にシェアしてもらう確率をあげる
こちらに関しては、個人差があるかもしれませんが、見た目という点では、他のブログとの差別化は図れそうです。
そして、少なくともシェアボタンを探す手間は省けるので、シェアボタン幾分かしてもらいやすいと考えます。
そこまで、目立ったり不快に感じさせないレベルなら表示させておいて問題ないと思います。
もし「鬱陶しい」とか「気が散る」とかの意見が多数あったらやめた方がいいかも！
『AddToAny Share Buttons』についての概要は理解いただけたと思います。
ここからは具体的な設定方法をご紹介します。
まず、筆者の設定画面をご覧ください。
※各ブログでの特性もあるので完全にコピーするのはおすすめできません。
大きな項目としてタブが「Standard」「Floating」に分かれているので、それぞれの項目で説明していきます。
Standard（基本設定）
設定できる項目は以下の9項目です。
- アイコンスタイル
- Share Buttons
- ユニバーサルボタン
- シェア・ヘッダー
- ブックマークボタンの場所
- メニューのオプション
- 追加 JavaScript
- 追加 CSS
- 追加オプション
１つ１つ簡単に説明します。
アイコンスタイル
こちらは「アイコンの大きさ」や「スタイル」を変更することができます。
好みに合わせて変更すれば良いと思いますが、基本的にデフォルトで良いと思います。
Share Buttons
次にシェアボタンについてです。
先に説明した通り、99個ものアイコンが選べます。
追加したいアイコンをクリックするだけですので、簡単に追加／削除ができると思います。
おすすめは以下の６個のアイコンです。
- はてなブックマーク
- LINE
ユニバーサルボタン
先ほど選択した「シェアボタン」以外のボタンを表示させるアイコンです。
こちらもデフォルトから変更する必要はありません。
シェア・ヘッダー
続いてはシェア・ヘッダーについてです。
ここに任意の文章を打ち込むことで、以下の画像の通りアイコンの上部にコメントを記載することが可能になります。
後述しますが「ページスクロールに合わせて動くアイコン」にはコメントが記載されませんので注意が必要です。
記事の下やメディアの下に表示されるアイコンにだけ有効です。
ブックマークボタンの場所
シェアボタンをどこに設置させるか選択できます。
ここでいうシェアボタンはスクロールに合わせて移動しないものです。
つまり、記事下と決めるとずっと固定でそこに設置されるものです。
筆者は不要と判断して、チェックを全て外しています。
記事下等への設置は有料テーマ（JIN）で設定できるから、そっちで設定してるよ！！
メニューのオプション、追加 JavaScript・CSS・オプション
残りの「メニューのオプション、追加 JavaScript・CSS・オプション」については変更の必要はありません。
追加で色々デザインをしたい人は使用してもいいかもです！
Floating（応用設定）
続いて「Floating（応用設定）」についてです。
こちらの設定を行うことで、スクロールに合わせて追従するシェアボタンを表示することができます。
設定項目は以下の通りです。
- 縦ボタン（パソコン）
- ブックマークボタンの場所
- レスポンシブ化
- 位置
- オフセット
- アイコンサイズ
- 背景
- 横ボタン（スマホ）
- ブックマークボタンの場所
- レスポンシブ化
- 位置
- オフセット
- アイコンサイズ
- 背景
縦ボタンが「パソコン」での表示設定、横ボタンが「スマホ」での表示設定を思っていただければよいと思います。
では、それぞれの項目を説明していきます。
ブックマークボタンの場所
こちらは、シェアボタンをどこに設置するか選択できます。
例えば「左にドッキング」を選択すると画面左端に偏り設置されます。
縦ボタン（パソコン）、横ボタン（スマホ）で微妙に変化はしますが、基本的に「左にドッキング」で良いと思います。
レスポンシブ化
レスポンシブ化は少しややこしいです。
画像内の①②③について、それぞれ説明します。
※①については見やすさを重視するため、縦ボタンと横ボタンの部分は編集し1つの画像に纏めてますが、実際は別々の設定画面となります。
まず①は『画面の横幅によってどのボタンを表示させるか』という意味です。
デフォルトの場合
縦ボタン：980
横ボタン：981
と入力されていると思います。
これは「横幅が980ピクセル”以下”だったら縦ボタンは表示させない、981ピクセル”以上”だったら横ボタンを表示させない」という意味になります。
つまり、縦ボタンと横ボタンの両方が表示されるのを防ぐための機能です。
デフォルト設定で問題ありません。
次に②です。
これは『画面の上部から○○ピクセル移動したときにシェアボタンを表示させるか』を示してます。
逆に③は『下部から○○ピクセルまで移動したらシェアボタンを非表示にする』を示してます。
つまり、画面のスクロールに合わせてシェアボタンを表示/非表示にできる設定です。
常時表示させたい人や、めんどくさい設定をしたくない人は、②③のチェックを外しておけばOKです。
位置
『位置』は画面上部からシェアボタン上部までの距離を示してます。
ご自身の好みの位置で調整してみましょう。
オフセット
『オフセット』は、位置が縦の距離に対して、横の距離を示してます。
こちらも好みで調整してみてください。
アイコンサイズ
アイコンサイズはその名の通り、アイコンのサイズを調整する機能です。
好みのサイズに変更してみましょう。
背景
背景はシェアボタンの背景色を変更することができます。
基本的にはデフォルトで良いと思いますが、こだわりたい方は変更してみてください。
追加CSS（アイコンを半透明にする）
最後にちょっと役立つ設定です。
上記の設定を全て行った場合、スマホでの表示は以下の通りになります。
正直、このアイコンがずっと追従するのは少し目障りです。
そこで以下のコードを『追加CSS』に追加します
/*AddToAnyモバイル固定半透明化*/
.a2a_floating_style.a2a_default_style {opacity:0.5;}すると、以下のように変化します。
そうです。
半透明化します。
これで少しは悪目立ちする可能性は低くなったと思います。
「AddToAny Share Buttons」についてまとめます。
AddToAny Share Buttonsとは
- 全99個のシェアボタンを表示されることができる
- 画面スクロールに合わせて表示/非表示ができる
- 画面の任意の位置に固定できる
AddToAny Share Buttonsはこんな人におすすめ
- ピンタレストを導入してるが「保存マーク」が鬱陶くて改善したい人
- ブログの見た目を少しでもオシャレに、更にシェアしてもらう確率をあげたい人
AddToAny Share Buttonsの設定方法
- 筆者の設定方法は以下の通り。
「AddToAny Share Buttons」の必要性・導入方法等は分かってもらえたと思います。
ちょっとした工夫で見やすさ・シェアしてもらえる確率が上がるので導入して損はない！と考えます。
本ブログでは、他にもブログ運営で役に立つ情報を発信しているので良ければ見てみてください。
今後もおしゃれで見やすいブログ・記事作りを頑張っていきます！
では、また！！
