コピペで簡単！シェアボタンを付け替えました。【レスポンシブ対応】

はてなブログのカスタマイズが楽しくて仕方ありません。
これも使いやすいテンプレートや先人の方の知恵のおかげです。

とてもありがたく使わせていただいております。
ありがとうございます。

それに負けじとたくさん記事をアップしていきたいと思っているのですが、書きかけの原稿が溜まっていくだけで未完成の原稿ばかりが溜まっております。

今回はまた、ブログカスタマイズの話になります。

シェアボタンのサイズやズレが気になっていろいろと弄りはじめたら、良さげな記述に巡り会えたので、新しく変更しました。
短いですが簡単に紹介させていただきます。

レスポンシブ対応のシェアボタンを改めて探してみた

レスポンシブデザインの難しいところは、PCやスマホなど画面サイズの違う端末で見る環境によって見え方が違うところですよね。フォントサイズが大きくてはみ出したり、レイアウトが崩れたり実機で確かめてみないと分からないことが多いです。

先日設置したシェアボタンがレスポンシブデザイン対応ではあったのですが、どうもスマホでみると数ピクセルずれるとか気になるところが増えてきたので新しいデザインを試してみることにしました。

www.tokidokioton.com

シェアボタンといえば、TwitterやFacebookやはてなブックマークですが、アイコンでほとんど視認できるレベルなのでサイト名とか無くてもいいですよね。
とてもステキなシェアボタンがあったので実装することにしました。

以前使用していたものとあまり変わらないところも気に入った理由でもあります。
ご紹介するのは以下のサイトに掲載されていた内容になります。

www.yukihy.com

特徴はレスポンシブデザインに対応していることと、スマホ画面用では「LINE」のシェアボタンにも対応していることです。
私はまだ「LINE」は連絡用にしか使いませんが、良い記事があれば確かに共有したくなる気もするので良いと思います。

設置方法について

まず、ヘッダーに「Font Awesome Icons」の読み込みを行うために以下の記述をヘッダーに設定しましょう。
私は既に設置していたシェアボタンでも使っていたのでそのまま流用で問題ありませんでした。

ヘッダー

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

設置は、「設定 > 詳細設定 > 検索エンジン最適化 > headに要素を追加」から行います。

次にシェア数をカウントするためのjQueryの記述を記述していきます。
記述する場所は、「記事下」でOKです。

シェア数をカウントするjQuery

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<!--シェア数の数字-->
<script>
//Facebookのシェア数を取得
function get_social_count_facebook(url, selcter) {
  jQuery.ajax({
    url:'https://graph.facebook.com/',
    dataType:'jsonp',
    data:{
      id:url
    },
    success:function(res){
      jQuery( selcter ).text( res.share.share_count || 0 );
    },
    error:function(){
      jQuery( selcter ).text('0');
    }
  });
}
//はてなブックマークではてブ数を取得
function get_social_count_hatebu(url, selcter) {
  jQuery.ajax({
    url:'http://api.b.st-hatena.com/entry.count?callback=?',
    dataType:'jsonp',
    data:{
      url:url
    },
    success:function(res){
      jQuery( selcter ).text( res || 0 );
    },
    error:function(){
      jQuery( selcter ).text('0');
    }
  });
}
jQuery(function(){
  get_social_count_facebook('{Permalink}', '.facebook-count');
  get_social_count_hatebu('{Permalink}', '.hatebu-count');
});
</script>

うまくできましたでしょうか？
まだ、画面では確認できません。

次にCSSになります。
「{}デザインCSS」のところに記述しましょう。

スタイルシート

/*シェアボタン*/
.share-3d{
    margin-bottom: 10px;
    text-align: center;
}
.share-3d-inner a {
    position: relative;
    display: inline-block;
    width: 15%;
    height: 40px;
    line-height: 20px;
    border-radius: 5px;
    font-size: 16px;
    text-align: center;
    color: #ffffff;
    text-decoration: none;
}
.share-3d .small-text{
    font-size: 10px;
}
.share-3d .hatena-bookmark-button{
    background: #00A4DE;
    box-shadow: 0 3px #43638b;
}
.share-3d .twitter-button{
    background: #55ACEE;
    box-shadow: 0 3px #0092ca;
}
.share-3d .googleplus-button{
    background: #C53727;
    box-shadow: 0 3px #ad3a2d;
}
.share-3d .facebook-button{
    background: #405BA7;
    box-shadow: 0 3px #2c4373;
}
.share-3d .pocket-button{
    background: #EE4256;
    box-shadow: 0 3px 0 #c0392b;
}
.share-3d .line-button{
    position:relative;
    top: 1px;
    background: #00C300;
    box-shadow: 0 3px 0 green;
}
.share-3d .share-3d a:active{
    top: 3px;
    box-shadow: none;
}
.share-3d .line-button:active{
    top: 4px;
}
@media screen and (min-width: 480px) {
    .line-hide{
        display: none;
    }
    .share-3d-inner a{
        width: 18%;
    }
}

私の場合もそうですが、前の記述が残っている場合は記述をテキストエディタなどにバックアップを取るなどして削除してください。
まだ、画面では確認できません。

あと一息です。
次にシェアボタンの記述になります。

シェアボタンの記述については「記事上」と「記事下」など、実際に設置したい箇所に記述します。

シェアボタンの記述

<!--シェアボタン-->
<div class="share-3d">
<span style="font-size: 8px">シェアする</span>
<div class="share-3d-inner">
<!--はてブ-->
<a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="hatena-bookmark-button" target="_blank" data-hatena-bookmark-title="{Title}" data-hatena-bookmark-layout="simple" title="このエントリーをはてなブックマークに追加"><i class="blogicon-bookmark lg"></i><br> <span class="hatebu-count small-text"><i class="fa fa-spinner fa-spin"></i></span></a>
<!--Facebook-->
<a href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}" onclick="window.open(this.href, 'FBwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" class="facebook-button"><i class="blogicon-facebook lg"></i><br><span class="facebook-count small-text"><i class="fa fa-spinner fa-spin"></i></span></a>
<!--Twitter-->
<a href="http://twitter.com/intent/tweet?text={Title} {URLEncodedPermalink}" target="_blank" class="twitter-button"><i class="blogicon-twitter lg"></i><br><span class="small-text">Twitter</span></a>
<!--ググタス-->
<a href="https://plus.google.com/share?url={URLEncodedPermalink}" onclick="window.open(this.href, 'Gwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" class="googleplus-button"><i class="fa fa-google-plus"></i><br><span class="small-text">Google</span></a>
<!--Pocket-->
<a href="http://getpocket.com/edit?url={URLEncodedPermalink}" class="pocket-button" target="_blank"><i class="fa fa-get-pocket"></i><br><span class="small-text">Pocket</span></a>
<!--ライン-->
<span class="line-hide">
<a href="http://line.me/R/msg/text/?{Title} {URLEncodedPermalink}" class="line-button">
<img src="http://cdn-ak.f.st-hatena.com/images/fotolife/f/ftmaccho/20150905/20150905143148.png" width="18px" height="18px" alt="LINEで送る" /><br><span class="small-text">Line</span>
</a></span>
</div>
</div>

以上です。

うまく記述できましたでしょうか？
保存して画面から確認をとってみましょう。

いい感じですね。
サイズ感が絶妙でなんともいえません。

スマホでも押しやすいサイズにおさまっていると思います。

プラス月5万円で暮らしを楽にする超かんたんアフィリエイト

まとめ

LINEのボタンがズレて表示される場合があるようです。
私も少しですがズレがでていたので、topを2pxに調整させていただきました。

LINEのボタンの微調整

.share-3d .line-button{
    position:relative;
    top: 2px;
    background: #00C300;
    box-shadow: 0 3px 0 green;
}

「Brooklyn」だとおそらくこれで上手くいくと思います。
とてもスッキリした見た目になってとても気に入りました。

皆さんもお試しください。

カスタマイズもあと少しだと思いますが、記事が増えてきたので一段落ついたところでまとめ記事にしたいと思います。