こんにちは aonamiです。
みなさんはweb閲覧でソーシャルボタン活用されていますか？aonamiは全然使ったことがないです（ブックマークにほりこんでしまう古い人間です）
私はそんなのですが…しっかり活用されている方向けにボタンは用意しておいた方がいいですよね。拡散してもらえれば閲覧機会も増やせます。
今回は、AddToAny Share Buttonsというプラグインを使ってワードプレスにSNSボタンを設置していこうと思います。
ある程度日本語化されているので、導入しやすいかなと思います。
それでは早速、設置していきましょう。
完成のイメージからご覧頂きます。
ブログ左側に、追従型SNSボタンを設置します。
topからの高さを指定してやるとサイトの見栄えが良くなると思いますので、そこも手を加えます。
記事を開いた際の記事下には、固定のSNSボタンを設置します。
スマホなどからの閲覧では追従ボタンが表示されないので、その対策です。
ごちゃごちゃしない最低限の配置で設置することにしました。
ここまでが、今回行う設定となります。
当サイトで施したカスタマイズの説明になりますが、いろいろ変化をつけて自分好みに仕上げて頂ければと考えます。
それでは、AddToAny Share Buttonsの設定を進めていきます。
(有効化までの手順は省略します)
記事下の固定SNSボタンの設置
設定のStandardタブを開きます。
３点、設定変更を加えました。
まず図にあります２つ。
ボタンの大きさ選択と、設置したいSNSを決めます。
Largeとありますがそんなに大きくないです。
左側にボタン見えてると思いますが、当サイトの指定はLargeです。
SNSは自分の好みのものをピックアップして表示させることができます（いくつでも）
次、どこのページに設置させるかを設定します。
PCからの閲覧は左側にある追従ソーシャルボタンで全てのページを対応できます。
が、この追従型ボタンはスマホからの閲覧だと表示されないみたいなので。
ですので本当ならここのチェックは外したいのだけど、モバイル閲覧対策に最小限の固定ボタンを配置します。
当ブログでは、記事を開いた際の記事下のみにボタンを設置するよう設定（上図のチェックボタン参照）
あまりにチェックをここで入れすぎると、ソーシャルボタンが表示されすぎ印象が悪くなると思いました。
これで、固定するソーシャルボタンの設定は完了です。
ブログ左側へ追従型SNSボタンの設置
設定画面のFloatingタブを開きます。
①左右好きな方にSNSボタンを配置します。デフォルトではｎｏｎｅになっています。
②topからのSNSボタンまでのピクセル指定です。何度も数字を更新ながら、お好みの高さに調整します。
これで設定完了となります。
あとがき
いかがでしたでしょうか。
AddToAny Share Buttonsの設定について記事にしてみました。
もっと上手にPCとモバイルでSNSボタン表示切り替えの設定できるのかもしれませんが、
素人ながらにカスタマイズしてみるとこんな感じで落ち着きました。
表示崩れも今のところ無いようですので、しばらくはこれで満足しようと思います。
