スポンサードリンク


ShareBarの高度な設定方法!サイト訪問者に求められる機能満載!デザインをカスタマイズ!

    ShareBar 大改造

    WordPressのSNSボタン設置プラグイン「ShareBar」の設定方法をまとめました。

    デザインを完成させるまで結構大変だったので、誰でも簡単に設定できるように解説していきます。

    WordPressブログ運営していて、ShareBarを使っていないという方は、導入を検討してみて下さい。

     

    ShareBarのSNSボタンの設定!

    WordPressの管理画面のメニューから「設定」の中の「ShareBar」を選択します。

    下の方を見ると、登録済みのSNSボタンが一覧で表示されます。

    ShareBar 管理画面

     

     

     

    正直言うと、馴染みのないSNSばかりなので、邪魔なので一旦すべて削除します。

    削除は「ACTINOS」欄にあるdeleteをクリックしていくだけです。

     

    はい、すっきりしました!

    shareBar 削除

    すべて削除したので、何もない状態です。

    ここから「はてなブックマーク」「ツイッター」「フェイスブック」「Google One」を入れていきます。

    それでは Add New Button からどんどん作っていきましょ。

     

    はてなブックマークのSNSボタンを追加!

    はてなブックマークのSNSボタンを追加していきます。

    それではAdd New Buttonで開いたページで以下のように入力していきます。

    shrebar はてなブックマーク

    • Name: 自分がわかり易い名前で大丈夫です。半角英数字にしておきましょう。
    • Position: SNSボタンの表示位置となります。数字が小さいほど上側に表示。
    • Enabled?: チェックを入れないとSahreBarに表示されません。
    • Big Button: こちらにSNSボタンのソースを記載。
    • Small Button: レスポンシブ対応時に使いますが、私は使いません。

     

    注意点としては、①は絶対にチェックを入れます

    よくチェックを入れ忘れていて、ShareBarに表示されないと言う方がいらっしゃいます。

    SNSボタンは②のBig Buttonだけで大丈夫です。

    個人的に、Small Buttonの方は使い物になりません。

    詳しくは後述で解説します。

     

    Big Buttonに記載するソースコード

    上記のコードを貼りつけるだけです。

    最後にAdd Buttonをクリックして保存します。

     

    同様の作業を3回繰り返します。

     

    ツイッターのSNSボタンを追加!

    ツイッターのSNSボタンを追加していきます。

    Add New Buttonで開いたページで以下のように入力していきます。

    shrebar ツイッター

     

    Big Buttonに記載するソースコード

     

     

    フェイスブックのSNSボタンを追加!

    フェイスブックのSNSボタンを追加していきます。

    Add New Buttonで開いたページで以下のように入力していきます。

    shrebar フェイスブック

     

    Big Buttonに記載するソースコード

     

     

    Google OneのSNSボタンを追加!

    Google OneのSNSボタンを追加していきます。

    Add New Buttonで開いたページで以下のように入力していきます。

    shrebar Google One

     

    Big Buttonに記載するソースコード

     

    以上でSNSボタン追加作業を終わります。

    反映されるまでに若干時間がかかる場合があります。

    また、記事を見たときに一部SNSボタンが表示されないことがあります。

    そういう場合は、各SNSボタンのedit画面でenabledが有効になっているか確認して下さい。

    新規追加時の場合、enabledのチェックが効いてくれない時があります。

     

    実際にShareBarを表示してみた!

    ShareBar 文字切れる

    登録したSNSボタンは正しく表示されているのに、とても残念なことになっちゃっています。

    ShareBarの幅が足らなくて、各ボタンが途中で切れてしまっていますね。

    これはShareBarの設定で簡単に修正できます。

     

    スポンサードリンク

     

    ShareBarの設定ページの上の方に「Settings」という項目があるのでクリックします。

    ShareBar setting

     

     

    ShareBarの設定画面が表示されます。

    設定を変更する部分は3箇所です。

    ShareBar 設定方法

     

    順番に見ていきましょう。

     

    ①Display horizontal Sharebar if the page is resized to less than 1000px?

    この項目は、ブラウザの横幅が1000px以下になった時に、ShareBarを記事中に横向き表示に切り替える機能です。

    スマホでサイトを閲覧した際に、レスポンシブ対応できるので、良い機能ですが、

    私が試してみたところ、記事によっては稀にShareBarの表示がぐちゃぐちゃになってしまうことがありました。

    こちらの項目は、チェックを外します。

     

    ※一応参考に、この項目を有効にすると以下のようになります。

    ShareBar 設定方法

     

    ②ShareBar Width

    ShareBarの横幅を指定するオプションです。

    この項目を正しい数値に変えれば、先ほどのSNSアイコンの表示が途中で切れてしまうのを解消できます。

    一番バランスが良い横幅は110pxでした。

    この項目には110と指定します。

     

    初期状態のままでもいいんですが、この項目はツイッターでツイートボタンが押されたときに

    メッセージ内容に設定したツイッターのアカウントを表示してくれる機能。

    最初はShareBar開発者のアカウントが入っていますが、自分のアカウントにしておきましょう。

    未記入にしてもかまいません。

     

    参考にこんな感じで表示されます。

    ShareBar 開発者

    まあ入れておいて損はないでしょうね。

     

    各種設定の変更を終えたら、一度ShareBarの表示を確認します。

    ShreBar レイアウト崩れ

    やっと、きれいに表示されるようになったのも束の間。

    なぜか、Twitterだけ変な余白ができてしまう・・・。

     

    原因はこのSNSボタンのwidthが100%になっているからだ。

    要するにShareBarの横幅をフルに取得して表示してしまうこと。

    ならばと、TwitterのSNSボタンのソースに横幅を任意で指定するも、変化がない・・・。

    この問題がなかなか解決できなかった・・・。

     

    CSSで指定してみたらどうか、と試したところできました!

    普通にCSSで横幅指定すればよかったんだね。

     

    このCSSコードをWordPressのstyle.cssに追記します。

    テーマによっては別のcssファイルになりますので注意。

    横幅は70pxで指定しています。

    「!important」を入れることで、このプロパティ値が優先させます。

     

    やっときれいに表示されるようになりました!

    ShreBar レイアウト崩れ

     

     おまけ!ShareBarのデザイン用CSS!

    CSSファイルに追記して、ShareBarのデザインを弄る時にお使い下さい!

     

    以上でShareBarの設定は終わりですが、

    お使いのWordPressの環境によっては、ShareBarの設定ページで以下のようなエラーが出ます。

    ShareBar warning

    気になる方は以下の解決方法のページをご覧下さい。 

     

      The following two tabs change content below.
      よっき プロフィール画像
      パソコンが大好きな青年。職業はプログラマ/SE。 フリーランスとしてウェブサイトの構築・保守の業務に従事。専門学校とパソコンスクールで講師も担当。幼少期からパソコンが大好きで、趣味がそのまま仕事に転じた。自作PCの魅力に惹かれたのは学生時代の頃。自作PC専門ブログで、お得な情報を紹介しています。

      スポンサードリンク


      1 Responses to “ShareBarの高度な設定方法!サイト訪問者に求められる機能満載!デザインをカスタマイズ!”

      コメントを残す




      CAPTCHA


      このページの先頭へ