副業・ブログ

【徹底解説】AddToAny Share Buttonsの設定方法と使い方|シェアボタンをおしゃれに表示!!

AddToAny Share Buttonsの設定方法と使い方_アイキャッチ

 この記事がおすすめな人 
  • ブログの見た目を少しでもオシャレにしたい人
  • 記事をシェアしてもらう確率をあげたい人
  • ピンタレストを導入しているけど「保存マーク」がうざい人

みなさんは、シェアボタンを意識したことがありますか?

『シェアボタン』とは各SNSへ記事をシェアする時のアクションを簡略化するために、使用される「ショートカットボタン」のようなものです。

つまり、読者が簡単に記事を拡散(ブックマーク)できるようにするのが目的です。

本ブログでもそうですが、アイキャッチの下や記事下などに設置している方が多いです。(以下の画像参照)

ただ、これだとあまり目立たない。

そこまで目立つ必要はないのですが、できるだけ存在は気づいてほしい。

ということで、以下の画像のような表示ができるようにしてみました。

これは画面のスクロールに合わせて追従する設定をしています。

今回はこの『シェアボタン』の表示方法についてご紹介します。

結論から言うと『AddToAny Share Buttons 』というプラグインを導入するだけです。

では、どうぞ!!

りりまん

ブログのデザインを少しでもオシャレにしたいのはブロガーの性!!

クリックで画像を拡大させる方法_アイキャッチ
【Word press】クリックで画像を拡大させる方法|プラグイン導入で5分で実装!!  こんな人におすすめの記事  細かな表・図を使う(画像を拡大させたい)Wordpressでの記事で、もう少し動きを持たせたい難...

「AddToAny Share Buttons」とは

AddToAny Share Buttons

『AddToAny Share Buttons』とはシェアボタンを「任意の位置」に「任意の数」表示させるプラグインです。

できることは以下の通りです。

AddToAnyでできること
  1. 全99個のシェアボタンを表示されることができる
  2. 画面スクロールに合わせて表示/非表示ができる
  3. 画面の任意の位置に固定できる

詳しく説明していきます。

全99個のシェアボタンを表示されることができる

設定方法については、後述しますが以下の画像にあるボタンのどれでも表示させることができます。

AddToAny Share Buttons_ボタンの種類

自分で好きにカスタマイズできるのは、大きなメリットです。

ただ、実際には多く表示させすぎると見にくくなるので5~7個ぐらいが妥当かなと思います。

筆者の場合

  • Twitter
  • Facebook
  • はてなブックマーク
  • LINE
  • Pocket
  • Pinterest

の、6個を登録しています。

画面スクロールに合わせて表示/非表示ができる

画面のスクロールに合わせて、シェアボタンを表示するか非表示にするか設定できます。

実際の画面が以下になります。

左:パソコン(画面左端にシェアボタン固定)
右:スマホ(画面下部にシェアボタン固定)

筆者の場合「アイキャッチの下・記事下のシェアボタン」と「固定させているシェアボタン」の両方混在しないように調整してます。

りりまん

ちょっと混在してるけど、そこはご愛敬で!(笑)

画面の任意の位置に固定できる

画面のどこにでも表示させることができます。

例えば、「画面の左端から○○ピクセル、上から○○ピクセルの位置」などの設定が可能です。

ただ、実際はそこまで変更しなくても、十分問題ない位置に表示されるので、微調整などに利用することになります。

「AddToAny Share Buttons」はどんな時に役に立つ?

冒頭でも記載していますが、役に立つポイントは以下の2点です。

  • ピンタレストを導入してるが「保存マーク」が鬱陶くて改善したい時
  • ブログの見た目を少しでもオシャレに、更にシェアしてもらう確率をあげたい時

1つずつ説明していきます。

ピンタレストを導入してるが「保存マーク」が鬱陶くて改善したい時

そもそも筆者が、このプラグインを導入したきっかけになったのが、『ピンタレストの保存マークがうざい』からでした。

ピンタレストを導入したののは良いものの、画像の左上にアイコンが表示され、画像に記載の文字が見にくくなったり、気が散ってしまっていました。(以下の画像参照)

ピンタレストの保存マーク

ただ、ピンタレストは辞めたくない。(できればシェアしてほしい)

そう思った時に、Twitterのフォロワーさんからアドバイスをいただき、本プラグインを導入しました。

要するに、ピンタレストのアイコンの鬱陶しさを改善しつつ、シェアもしてもらえる環境を作った。ということです。

嫁さま

確かに見にくいし、気になるよね、、、

りりまん

それが改善できるだけでも導入の価値あり!

ブログの見た目を少しでもオシャレに、更にシェアしてもらう確率をあげる

こちらに関しては、個人差があるかもしれませんが、見た目という点では、他のブログとの差別化は図れそうです。

そして、少なくともシェアボタンを探す手間は省けるので、シェアボタン幾分かしてもらいやすいと考えます。

そこまで、目立ったり不快に感じさせないレベルなら表示させておいて問題ないと思います。

りりまん

もし「鬱陶しい」とか「気が散る」とかの意見が多数あったらやめた方がいいかも!

「AddToAny Share Buttons」の設定方法

『AddToAny Share Buttons』についての概要は理解いただけたと思います。

ここからは具体的な設定方法をご紹介します。

まず、筆者の設定画面をご覧ください。

※各ブログでの特性もあるので完全にコピーするのはおすすめできません。

大きな項目としてタブが「Standard」「Floating」に分かれているので、それぞれの項目で説明していきます。

AddToAny Share Buttonsの設定方法_基本・応用

Standard(基本設定)

設定できる項目は以下の9項目です。

  1. アイコンスタイル
  2. Share Buttons
  3. ユニバーサルボタン
  4. シェア・ヘッダー
  5. ブックマークボタンの場所
  6. メニューのオプション
  7. 追加 JavaScript
  8. 追加 CSS
  9. 追加オプション

1つ1つ簡単に説明します。

アイコンスタイル

AddToAny Share Buttons_アイコンスタイル

こちらは「アイコンの大きさ」「スタイル」を変更することができます。

好みに合わせて変更すれば良いと思いますが、基本的にデフォルトで良いと思います。

Share Buttons

AddToAny Share Buttons_Share Buttons

次にシェアボタンについてです。

先に説明した通り、99個ものアイコンが選べます。

追加したいアイコンをクリックするだけですので、簡単に追加/削除ができると思います。

おすすめは以下の6個のアイコンです。

  • Twitter
  • Facebook
  • はてなブックマーク
  • LINE
  • Pocket
  • Pinterest

ユニバーサルボタン

AddToAny Share Buttons_ユニバーサルボタン

先ほど選択した「シェアボタン」以外のボタンを表示させるアイコンです。

こちらもデフォルトから変更する必要はありません

シェア・ヘッダー

AddToAny Share Buttons_シャア・ヘッダー

続いてはシェア・ヘッダーについてです。

ここに任意の文章を打ち込むことで、以下の画像の通りアイコンの上部にコメントを記載することが可能になります。

後述しますが「ページスクロールに合わせて動くアイコン」にはコメントが記載されませんので注意が必要です。

記事の下やメディアの下に表示されるアイコンにだけ有効です。

ブックマークボタンの場所

AddToAny Share Buttons_ブックマークボタンの場所

シェアボタンをどこに設置させるか選択できます。

ここでいうシェアボタンはスクロールに合わせて移動しないものです。

つまり、記事下と決めるとずっと固定でそこに設置されるものです。

筆者は不要と判断して、チェックを全て外しています。

りりまん

記事下等への設置は有料テーマ(JIN)で設定できるから、そっちで設定してるよ!!

メニューのオプション、追加 JavaScript・CSS・オプション

AddToAny Share Buttons_メニューのオプション、追加 JavaScript・CSS・オプション

残りの「メニューのオプション、追加 JavaScript・CSS・オプション」については変更の必要はありません。

追加で色々デザインをしたい人は使用してもいいかもです!

Floating(応用設定)

続いて「Floating(応用設定)」についてです。

こちらの設定を行うことで、スクロールに合わせて追従するシェアボタンを表示することができます。

設定項目は以下の通りです。

  1. 縦ボタン(パソコン)
    • ブックマークボタンの場所
    • レスポンシブ化
    • 位置
    • オフセット
    • アイコンサイズ
    • 背景
  2. 横ボタン(スマホ)
    • ブックマークボタンの場所
    • レスポンシブ化
    • 位置
    • オフセット
    • アイコンサイズ
    • 背景

縦ボタンが「パソコン」での表示設定、横ボタンが「スマホ」での表示設定を思っていただければよいと思います。

では、それぞれの項目を説明していきます。

ブックマークボタンの場所

AddToAny Share Buttons_ブックマークボタンの場所

こちらは、シェアボタンをどこに設置するか選択できます。

例えば「左にドッキング」を選択すると画面左端に偏り設置されます。

縦ボタン(パソコン)、横ボタン(スマホ)で微妙に変化はしますが、基本的に「左にドッキング」で良いと思います。

レスポンシブ化

AddToAny Share Buttons_レスポンシブ化

レスポンシブ化は少しややこしいです。

画像内の①②③について、それぞれ説明します。

※①については見やすさを重視するため、縦ボタンと横ボタンの部分は編集し1つの画像に纏めてますが、実際は別々の設定画面となります。

まず①は『画面の横幅によってどのボタンを表示させるか』という意味です。

デフォルトの場合

縦ボタン:980
横ボタン:981

と入力されていると思います。

これは「横幅が980ピクセル”以下”だったら縦ボタンは表示させない、981ピクセル”以上”だったら横ボタンを表示させない」という意味になります。

つまり、縦ボタンと横ボタンの両方が表示されるのを防ぐための機能です。

デフォルト設定で問題ありません。

次に②です。

これは『画面の上部から○○ピクセル移動したときにシェアボタンを表示させるか』を示してます。

逆に③は『下部から○○ピクセルまで移動したらシェアボタンを非表示にする』を示してます。

つまり、画面のスクロールに合わせてシェアボタンを表示/非表示にできる設定です。

常時表示させたい人や、めんどくさい設定をしたくない人は、②③のチェックを外しておけばOKです。

位置

AddToAny Share Buttons_位置

『位置』は画面上部からシェアボタン上部までの距離を示してます。

ご自身の好みの位置で調整してみましょう。

AddToAny Share Buttons_位置(例)

オフセット

AddToAny Share Buttons_オフセット

『オフセット』は、位置が縦の距離に対して、横の距離を示してます。

こちらも好みで調整してみてください。

AddToAny Share Buttons_オフセット(例)

アイコンサイズ

アイコンサイズはその名の通り、アイコンのサイズを調整する機能です。

好みのサイズに変更してみましょう。

背景

AddToAny Share Buttons_背景

背景はシェアボタンの背景色を変更することができます。

基本的にはデフォルトで良いと思いますが、こだわりたい方は変更してみてください。

追加CSS(アイコンを半透明にする)

最後にちょっと役立つ設定です。

上記の設定を全て行った場合、スマホでの表示は以下の通りになります。

シェアボタンサンプル

正直、このアイコンがずっと追従するのは少し目障りです。

そこで以下のコードを『追加CSS』に追加します

/*AddToAnyモバイル固定半透明化*/
.a2a_floating_style.a2a_default_style {opacity:0.5;}

すると、以下のように変化します。

シェアボタン_追加CSS

そうです。

半透明化します。

これで少しは悪目立ちする可能性は低くなったと思います。

まとめ:「AddToAny Share Buttons」は導入して損なし!

「AddToAny Share Buttons」についてまとめます。

AddToAny Share Buttonsとは

  • 全99個のシェアボタンを表示されることができる
  • 画面スクロールに合わせて表示/非表示ができる
  • 画面の任意の位置に固定できる

AddToAny Share Buttonsはこんな人におすすめ

  • ピンタレストを導入してるが「保存マーク」が鬱陶くて改善したい人
  • ブログの見た目を少しでもオシャレに、更にシェアしてもらう確率をあげたい人

AddToAny Share Buttonsの設定方法

  • 筆者の設定方法は以下の通り。

「AddToAny Share Buttons」の必要性・導入方法等は分かってもらえたと思います。

ちょっとした工夫で見やすさ・シェアしてもらえる確率が上がるので導入して損はない!と考えます。

本ブログでは、他にもブログ運営で役に立つ情報を発信しているので良ければ見てみてください。

ブログのノウハウ_アイキャッチ
【完全保存版】ブログのノウハウを全て公開|初心者のためのブログ運営!! 2021年5月22日:初版発行2021年6月30日:記事追加(6記事追加) 2021年2月10日よりブログを開始し、...

今後もおしゃれで見やすいブログ・記事作りを頑張っていきます!

では、また!!

にほんブログ村 にほんブログ村へ

関連記事はこちら!

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA