アフィリエイトツールで生活満足

ガジェット、ドローン、ゲーム、ライフハック、ツールビジネス

記事の横にアイコンがついてくるSharebarをカスタマイズ

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

Sharebar(シェアバー)って何?

今まで他の人のブログを見てて、気になってたけど
その名前がわからなかったサイドバーのアイコン集

その正体がSharebar(シェアバー)というプラグイン

これを導入すると、今見ている記事の横に出てるように
ソーシャルメディアへの情報共有用アイコンが表示されます

Sharebarを導入する利点

記事をいいね!してもらいたい(facebook)

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

ブックマークしてもらいたい(はてなブックマーク)

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

そんな願望があって、ソーシャルアイコンを記事に設置しても
記事の上では最初に押さない、記事の下では気づかない

わざわざ戻って探してまで押さないですからね(笑)

そこで、記事のスクロールについてくるようにすれば
記事を読んでて、これいいね!という時点で押してもらえる

・・という可能性もあるので導入してみました

また、テーマで設定されているレイアウトの外への設置なので
利用しているワードプレステーマの影響を受けないのも魅力のひとつ

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

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

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

Sharebarを設置してみよう!

sharebar検索

SharebarはWPのプラグインなので
プラグイン検索で「Sharebar」で探して有効化してください

たったこれだけですぐに導入!・・はできますが
色々と手直しが必要なので、続いて設定を行って行きます

Sharebarの設定方法

管理画面の設定項目から「Sharebar」をクリック
画面のhomeには利用可能なアイコンが表示されます

ここで、利用したい、アイコン項目にチェックを入れて
Enble(有効化)を押すと、ブログの横に表示されます

sharebar 表示

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

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

sharebar 表示設定1

スクロールバーを固定ページと記事ページとで表示するかどうかの選択です
ここにチェック入れなきゃ意味ないです(笑)

とりあえず、固定ページでも記事ページでも表示したいなら
どっちもチェックを入れておくといいです

sharebar 設定

①:水平バー(スマホ・タブレットで表示するか?)

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

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

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

③:表示される場所

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

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

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

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

ここで指定した数値を下回ると、サイドの表示がなくなり
水平バーの設定をしてる場合はそちらが表示されます

これはレスポンシブWEBデザインを考慮したもので
閲覧するユーザーに最適な表示にするための設定です

利用してるテーマのCSSの設定幅をみて調整してください
※私のテーマは960pxだったので、そう設定してます

sharebar 設定

次は表示幅を設定します

デフォルトでは60pxと若干小さめになって見切れるので
ここを自分で好きなサイズに調整してください(私は100px)

背景の色や輪郭線の変更はクリックすると
カラーコードが立ち上がるのでお好みの色を選択してください

Sharebarのカスタマイズ

初期設定では、フェイスブックとツイッター
海外系のソーシャルメディアアイコンしかないですが

ここにはてなブックマークやGoogle+などを設定していきます

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

まずはこちらのページにアクセス

はてなブックマークアイコン作成ページ

情報を入力する時のポイントはURLとタイトルです

はてなブックマーク アイコン作成

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

URL:[url]
タイトル:「title]

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

PCで表示されるアイコン(ビッグ)と指定サイズ以下で表示される
アイコン(スモール)のふたつのケースを作成しておいてください

Sharebar画面にの Add new Button をクリックして入力画面を開き
名前を適当に(はてなブックマーク)と入力したら

ビック用のアイコンとスモール用のアイコンを
それぞれのエリアにタグを貼り付けます

addnewbutton

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

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

Google+のタグ作成ページ

Google アイコンタグ追加

表示されない場合

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

<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone></g:plusone>

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

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

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

facebookボタン作成ページ

facebookボタン作成

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

sharebar 表示設定

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

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

さて、ここまで設置してお気づきだと思いますが
Sharebarって簡単に言えば、サイドバーと一緒です

HTMLソースに設置したものが横に表示される仕組みなので
実は任意のタグやボタンリンクなども設置可能です

sharebar ボタン作成

考え方としては

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

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

このふたつのエリアに任意のHTMLソースを設置すれば
ソーシャルボタン以外でも好きなものが設置できます

例えば、このブログの場合以下の要素を追加してます

  • 応援ボタン(ランキング)
  • ことづて(ブログパーツ)
  • お問い合わせボタン(任意のリンク)
  • プロフ画像(カーソルを乗せると絵が変わるよ)
スモールボタンだけを表示しない方法

スモールボタンの表示=スマホ・タブレットでの表示ですが・・
画面サイズによっては物凄く微妙~な事になるケースもあるので

最初から表示したくないという場合は
水平バーの表示をしないにチェックをいれてください

Sharebarが良い!と思う点

  1. レスポンシブWEBデザインの事を考慮している(条件分岐)
  2. アイコンを自分で好きなように追加できる(カスタマイズ性)
  3. ワードプレステーマのサイドバーと独立している(自由度)
  4. ユーザーのスクロールに追随してくれる(利便性)

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

初見さんへ!他のカテゴリも見てね!

たぬきち
このブログがどんなブログか?トップページに戻ってみてください。個人的に気になるゲーム情報、PCガジェットレビュー、ライフハック情報、ラジコンホビー動画、旅行に料理、ビジネスに役立つソフトウェアの解説など、一言では語りきれない情報満載です

上部メニューから詳細なカテゴリを選択できます。ブログ更新、最新動画のアップはツイッターと連携してる他、たまに中の人がつぶやくのでフォローお願いします(笑)

LEAVE A REPLY

*
*
* (公開されません)

CAPTCHA


This site uses Akismet to reduce spam. Learn how your comment data is processed.

Return Top
trigger trigger