「スマホ画面上にいつでもツイッターやフェイスブックなどのシェアボタンを固定したいのだけど、何かいい方法はない?」
「同じく、PCのブラウザ画面上でも。」
という疑問にお答えします。
ここで使用する方法は一つで、Wordpressのあるプラグインを使用します。
設定にかかる時間は約3分です。
本記事で得られる結果は下記の画像のように画面上にシェアボタンが画面固定(スクロール追従)で設置できます。
最終的なイメージ
PC画面での仕上がりイメージ
スマホ画面での仕上がりイメージ
それでは、さっそくご説明をさせていただきますが、操作・設定などは本記事を見ながら進めていただくことをお勧めします。
具体的な設定方法
AddToAny Share Buttonsのプラグインをインストール
1,まずはこの→「 AddToAny Share Buttons 」をコピペしましょう。
2,あなたのブログ・サイトにログインし、下記の画面になったら、あなたのサイト名をクリックしましょう
3,下記画面になったら、プラグインをクリック
4,新規追加をクリック
5,検索バーに「AddToAny Share Buttons」をコピペ
6,インストールをクリック
7,有効化をクリック
AddToAny Share Buttonsの設定
必要なアイコンを選択
ここでは、ブログ上に表示される必要なアイコンを追加します。
初期設定では、フェイスブック・ツイッター・メールのみ表示されているため、LINE・はてブなども追加をしていきましょう。
8,「設定」→「AddToAny」をクリック
9,「サービスの追加 / 削除」をクリック
10,必要なコンテンツを追加しましょう。
ここでは、「メール」をクリックして削除し、「LINE・はてブ・Google+」をクリックして追加しました。
11,下までスクロールして、「変更を保存」をクリック。
いよいよスクロール追従の設定へ
12,上までスクロールして、「Floating」をクリック。
PC画面上の設定(縦ボタン)
13,基本的には下記の設定を真似れば仕上がりイメージ通りになりますが、位置調節は下記の画像を参考に行ってください。
スマホ画面上の設定(横ボタン)
14,基本的には下記の設定を真似れば仕上がりイメージ通りになりますが、これもまた、位置調節は下記の画像を参考に行ってください。(アイコンの大きさは26pixelにしています。理由はこれ以上大きくなるとスマホ画面上では、厚かましいアイコンになるので。)
15,変更を保存をクリック
これで作業はすべて終了です。
イメージ通りになったのではないでしょうか?
ちなみに、私のアイコンは下記のように真っ赤になっておりますが、サイトに合わせてアイコンの色を変えたい場合は、下記の説明を参考にしてみてください。
自分のサイトの雰囲気に合わせてアイコンの色をワンポイントカラーにする方法
「設定」→「AddToAny」をクリック
アイコンの色を設定しましょう。
下記の画像を参考に、あなたのお好きな色を選択してみましょう。
「変更を保存」をクリックすればすべての作業はこれで完了です。
あとがき
いかがだったでしょうか?
アフィリエイト・集客をする上ではサイトのデザインも大事だと思っております。
そこで、今回のように、シェアボタンのアイコンをワンポイントカラーで強調したりと、あくまでも一つの工夫ですが、サイトの印象はがらりと変わるのではないでしょうか?
本記事を次回のサイト作りにも役立てるように、メモとしてシェアしていただければ幸いです。
(役に立ってればですが・・・)
以上、「【Wordpress】シェアボタンを画面上に固定する方法。スマホ・PC」でした。