記事読んでると横にするするついてくるあれ「Sharebar」って言うらしい。前から導入してみたかったものを見つけたので、導入方法と自分なりのカスタマイズ方法をまとめてみた

Sharebar（シェアバー）って何？

今まで他の人のブログを見てて、気になってたけど
その名前がわからなかったサイドバーのアイコン集
その正体がSharebar（シェアバー）というプラグイン
これを導入すると、今見ている記事の横に出てるように
ソーシャルメディアへの情報共有用アイコンが表示されます

Sharebarを導入する利点

記事をいいね！してもらいたい（facebook）

記事をつぶやいてもらいたい（ツイッター）

ブックマークしてもらいたい（はてなブックマーク）

ランキングの応援をしてもらいたい

そんな願望があって、ソーシャルアイコンを記事に設置しても
記事の上では最初に押さない、記事の下では気づかない
わざわざ戻って探してまで押さないですからね（笑）
そこで、記事のスクロールについてくるようにすれば
記事を読んでて、これいいね！という時点で押してもらえる
・・という可能性もあるので導入してみました
また、テーマで設定されているレイアウトの外への設置なので
利用しているワードプレステーマの影響を受けないのも魅力のひとつ

Sharebarの設置までの一連の流れ

一連の流れをこちらに動画で作っておきましたので
まずはこちらを軽い気持ちでぽんぽんと眺めてみてください

以下より、詳細な解説になります

Sharebarを設置してみよう！

SharebarはWPのプラグインなので
プラグイン検索で「Sharebar」で探して有効化してください
たったこれだけですぐに導入！・・はできますが
色々と手直しが必要なので、続いて設定を行って行きます

Sharebarの設定方法

管理画面の設定項目から「Sharebar」をクリック
画面のhomeには利用可能なアイコンが表示されます
ここで、利用したい、アイコン項目にチェックを入れて
Enble（有効化）を押すと、ブログの横に表示されます

表示条件に関する詳細設定

上部メニューのsettingをクリックして
詳細な表示に関する条件を決めます

スクロールバーを固定ページと記事ページとで表示するかどうかの選択です
ここにチェック入れなきゃ意味ないです（笑）
とりあえず、固定ページでも記事ページでも表示したいなら
どっちもチェックを入れておくといいです

①：水平バー（スマホ・タブレットで表示するか？）

⑥の設定で、指定した画面サイズを下回った時に
タブレットやスマホ用にスモールボタンを水平並びに表示する訳ですが
これを表示するかどうか？必要ないならチェックをはずせばいいです

②：sharebarのクレジットの表示

プラグインページへのリンクです。必須ではないのではずしてもOK

③：表示される場所

ブログの右側・左側のどちらに表示させるかの選択です
例えば、このブログは右サイドバーなので左ですが
これが右だったら、何かおさまり悪いですよねｗ

④⑤：配置場所とコンテンツの距離

③で設置した場所に対し、隣り合うコンテンツとの距離の設定
指定した分だけ余白ができると考えてください

⑥：最大画面サイズの指定

ここで指定した数値を下回ると、サイドの表示がなくなり
水平バーの設定をしてる場合はそちらが表示されます
これはレスポンシブWEBデザインを考慮したもので
閲覧するユーザーに最適な表示にするための設定です
利用してるテーマのCSSの設定幅をみて調整してください
※私のテーマは960pxだったので、そう設定してます

次は表示幅を設定します
デフォルトでは60pxと若干小さめになって見切れるので
ここを自分で好きなサイズに調整してください（私は100px）
背景の色や輪郭線の変更はクリックすると
カラーコードが立ち上がるのでお好みの色を選択してください

Sharebarのカスタマイズ

初期設定では、フェイスブックとツイッター
海外系のソーシャルメディアアイコンしかないですが
ここにはてなブックマークやGoogle+などを設定していきます

はてなブックマークアイコンを追加する方法

まずはこちらのページにアクセス
はてなブックマークアイコン作成ページ
情報を入力する時のポイントはURLとタイトルです

普通に入力すると、指定した記事のURLだけになってしまうけど
URLとタイトルを以下のように設定すると、設置したページの情報を取得します

ビック用とスモール用アイコンをふたつ作ろう

PCで表示されるアイコン（ビッグ）と指定サイズ以下で表示される
アイコン（スモール）のふたつのケースを作成しておいてください
Sharebar画面にの　Add new Button　をクリックして入力画面を開き
名前を適当に（はてなブックマーク）と入力したら
ビック用のアイコンとスモール用のアイコンを
それぞれのエリアにタグを貼り付けます

Google+アイコンを追加する方法

まずはGoogleにログインした状態でこちらのページにアクセス
Google+のタグ作成ページ

表示されない場合

コードを取得してもうまく反映されない場合
以下のタグがブログ内に設置されてないケースがあります
これをheadタグ内に入れておきましょう

アイコンサイズと形式を選択して
ふたつのアイコン用タグをsharebarに追加セットします

facebookアイコンを追加する方法

フェイスブックに関してはデフォルトでもアイコンがありますが
・・うーん、ボタンの形が気に入らないという人は
まずはfacebookにログインした状態でこちらにアクセス
facebookボタン作成ページ

情報を入力する際に、URLだけは空にしておいて
同様に2つのパターンのアイコンタグを取得して貼り付けます

追加した利用したいタグの横にチェックを入れて
Enble（有効化）を押すと、ブログの横に表示されます

HTMLソースを利用しよう（応用カスタマイズ）

さて、ここまで設置してお気づきだと思いますが
Sharebarって簡単に言えば、サイドバーと一緒です
HTMLソースに設置したものが横に表示される仕組みなので
実は任意のタグやボタンリンクなども設置可能です

考え方としては

大きいボタン：PC上で表示される要素

小さいボタン：タブレット・スマホなどで表示される要素

このふたつのエリアに任意のHTMLソースを設置すれば
ソーシャルボタン以外でも好きなものが設置できます
例えば、このブログの場合以下の要素を追加してます

• 応援ボタン（ランキング）
• ことづて（ブログパーツ）
• お問い合わせボタン（任意のリンク）
• プロフ画像（カーソルを乗せると絵が変わるよ）

スモールボタンだけを表示しない方法

スモールボタンの表示＝スマホ・タブレットでの表示ですが・・
画面サイズによっては物凄く微妙～な事になるケースもあるので
最初から表示したくないという場合は
水平バーの表示をしないにチェックをいれてください

Sharebarが良い！と思う点

ぜひ、使ってみてください