こんにちは、yojipapa です。
今回は、ホームページ(ブログ)に簡単でオシャレにシェアボタン(共有ボタン)を設置できるオススメのプラグイン、AddToAny Share Buttons(エーディーディートゥーエニィ シェア ボタンズ)の導入方法をお伝えします。
シェアボタンの設置は、SNSが活況する今となっては必須と言っていいSEO対策です。
AddToAny Share Buttons を導入することで記事の拡散が見込めるようになり、検索エンジンのインデックスの上位表示にも有利に働くようになります。
ですが、どうせ設置するなら、できるだけシンプルにデザイン良く設置したいものです。
(^ – ^
「 AddToAny Share Buttons 」は、シンプルで邪魔にならずに設置でき、更にカスタマイズもできるワードプレス必須のプラグインと言ってもいいプラグインですので、導入しておきましょう。
* プラグインとは
プラグインはワードプレスのセキュリティーを強めたり、より使いやすくカスタマイズするためのシステムです。
プラグインを導入することにより、より快適にワードプレスを楽しむことができます。
WordPress おすすめシェアボタン設置プラグイン「 AddToAny Share Buttons 」~ はてなブックマーク・LINE対応 ~ 導入方法
① 「 WordPress(ワードプレス)管理画面 」を表示します。
・ 「 プラグイン 」をクリックします。
② 「 プラグイン 」画面が表示されます。
・ 「 新規追加 」をクリックします。
③ 「 プラグインを追加 」画面が表示されます。
・ キーワードに、「 AddToAny Share Buttons 」を入力します。
・ AddToAny Share Buttons が表示されるので、「 今すぐインストール 」をクリックします。
・ インストールが完了すると、「 有効化 」の表示に変わるので「 有効化 」をクリックします。
④ プラグインページに「 AddToAny Share Buttons 」が追加されます。
・ 「 設定 」をクリックします。
⑤ 「 AddToAny 」共有設定画面が表示されます。
標準 設定のデフォルト(標準)はこのような設定となっています。
Floating 設定のデフォルト(標準)はこのような設定となっています。
当ブログのシェアボタン設置設定
当ブログは、ワードプレステーマ、Cocoon(コクーン)を使用しているので、ページ下には、Cocoon標準のシェアボタンが設置されているので、AddToAny Share Buttons のシェアボタンは、Floating(画面左に設置している追従シェアボタン)のみを使用しています。
それでは、当ブログと同じ設定方法の説明です。
標準 設定
・ Icon Style は、36 pixels に変更しています。
・ Share Buttons は、Cocoon のシェアボタンと全く同じに合わせ、ツイッタ-・フェイスブック・はてなブックマーク・Pocket(ポケット)・LINE を設置しています。
・□枠の、「 サービスの追加/削除 」をクリックします。
・□枠の中で設置したいシェアボタンサービスを選択します。
・ 当ブログはこのように選択されています。
* アイコンをドラッグ&ドロップして移動するとシェアボタンの表示順序が変更できます。
・ ユニバーサルボタン は、
このように、⊞ ボタンをクリックすると、他のシェアボタンも表示されます。
「 ⊞詳細 」をクリックすると、このように更に多くのシェアボタンが窓表示されます。
すごい数ですね。
(^ – ^
・ ブックマークボタンの場所 は、Cocoon のシェアボタンがあるので一切設置せず、☑ を全て外しています。
・ 「 変更を保存 」をクリックします。
Floating 設定(縦ボタン)
当ブログは、Floating(画面左に設置している追従シェアボタン)のみを使用しています。
・ ブックマークのボタンの場所 は、「 Attach to content 」に、⦿ します。
・ レスポンシブ化 は、上の数値を 750 pixels に変更しています。(デバイスが750pixels以下なら非表示という意味です。ipad で非表示にしたいので750にしています。)
・ 位置 は、180 pixels に変更しています。(画面TOPからの位置指定です。)
・ オフセット は、-81 pixels に変更しています。(画面左からの位置指定です。)
・ アイコンサイズ は、36 pixels に変更しています。
Floating 設定(横ボタン)
・ Floating 横ボタンは設置していないので、変更していません。
・ 「 変更を保存 」をクリックします。
以上で、当ブログで設置しているシェアボタンの設定方法です。
実際の表示は、このようになっています。
Cocoon のシェアボタンと同じ順番で表示されています。
コピーはありませんが、
(^ – ^
画面をスクロールすると、シェアボタンも同じ位置で追従します。
いかがだったでしょう。
シェアボタンの設定は、使用しているテーマに合わせて色々と試してみると良いと思います。
わたしはゴチャゴチャしているのが嫌いなので、記事の邪魔にならないようにシンプルに表示するようにしています。
「 AddToAny Share Buttons 」は、はてなブックマークやLINEにも対応しているので嬉しいプラグインです。
(^ – ^
以上、WordPress おすすめシェアボタン設置プラグイン「 AddToAny Share Buttons 」~ はてなブックマーク・LINE対応 ~ 導入方法でした。
お疲れさまでした。
(^ – ^