【はてなブログ】スクロールすると追従するSNSボタンの設定方法！

今回は、スクロールしても追従するSNSボタンの設置方法をご紹介します！

通常、SNSボタンは記事の一番下に並んで表示されますよね。

そのため、「シェアしたいな〜」と思ったときにすぐシェアできないという欠点があります。

しかし、スクロールしても常にSNSボタンが表示されるようにする事で、シェアしたい時にいつでもシェアする事ができるのです！

表示イメージは下記のサイト様のような感じになります。
www.clrmemory.com

さらに、SNSボタンを「ギザギザ」の歯車型SNSボタンに装飾していきます。

ボタンの装飾は下記のサイト様を参考にしました。
saruwakakun.com

カーソルを合わせると歯車が回るので、つい押してしまいたくなるようなボタンになっており、とても気に入ってます。

それでは、早速設定方法を紹介していきたいと思います！

設定方法

ソースは上記の２つのサイト様を参考にさせて頂きました。感謝！

「jQuery」と「Font Awesome」の読み込み設定

「設定」→「詳細設定」→「headに要素を追加」の欄に下記のコードを追記します。

既に２つとも導入済みの方は、この作業は不要です。

<!--「jQuery」参照URL-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--「Font Awesome」参照URL-->
<link href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" rel="stylesheet">

HTML（記事下）

「デザイン」→「カスタマイズ」→「記事」→「記事下」の欄に下記のコードを追記します。

<!--↓----SNSシェアボタン_歯車_追従----↓-->
<div class="side-share-btn">
    <div class="unq_btn">
        <div class="fixed-share-inner">
            <a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="hatena-bookmark-btn" target="_blank" data-hatena-bookmark-title="{Title}" data-hatena-bookmark-layout="simple" title="この記事をはてなブックマークに追加">
                <span class="fa-stack">
                    <i class="fas fa-certificate fa-stack-2x"></i>
                    <i class="fab fa-blogger-b fa-stack-1x"></i>
                </span>
            </a>
            <a href="http://twitter.com/intent/tweet?text={Title} {URLEncodedPermalink}" target="_blank" class="twitter-btn" title="この記事をTwitterで共有">
                <span class="fa-stack">
                    <i class="fas fa-certificate fa-stack-2x"></i>
                    <i class="fab fa-twitter fa-stack-1x"></i>
                </span>
            </a>
            <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-btn" title="この記事をFacebookで共有">
                <span class="fa-stack">
                    <i class="fas fa-certificate fa-stack-2x"></i>
                    <i class="fab fa-facebook-f fa-stack-1x"></i>
                </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-btn" title="この記事をGoogle+に追加">
                <span class="fa-stack">
                    <i class="fas fa-certificate fa-stack-2x"></i>
                    <i class="fab fa-google-plus-g fa-stack-1x"></i>
                </span>
            </a>
            <a href="http://getpocket.com/edit?url={URLEncodedPermalink}" class="pocket-btn" target="_blank" title="この記事をPocketに追加">
                <span class="fa-stack">
                    <i class="fas fa-certificate fa-stack-2x"></i>
                    <i class="fab fa-get-pocket fa-stack-1x"></i>
                </span>
            </a>
        </div>
    </div>
</div>

<script>
$(window).on("DOMContentLoaded", function(){
  $('#content').prepend($('.side-share-btn'));
});
</script>
<!--↑----SNSシェアボタン_歯車_追従----↑-->

CSS（デザインCSS）

「デザイン」→「カスタマイズ」→「デザインCSS」の欄に下記のコードを追記します。

/*↓----SNSシェアボタン_歯車_追従----↓*/
.side-share-btn{
    position: relative;
    width: 100%;
}
.fixed-share-inner{
    position: fixed;
    width: 50px;
    left: 130px; /*ボタン表示位置*/
}
.fixed-share-inner > a {
    margin-bottom: 5px;
}
.unq_btn a{
    display: inline-block;
    text-decoration: none;
    font-size: 25px; /*ボタンサイズ*/
}
.unq_btn .fa-stack-1x {
    color: white;
    font-size: 20px; /*アイコンサイズ*/
}
.unq_btn .fa-stack-2x {
    transition: .3s;
}
.unq_btn .hatena-bookmark-btn .fa-certificate {
  color: #3c7dd1;
}
.unq_btn .twitter-btn .fa-certificate {
  color: #74c1f8;
}
.unq_btn .facebook-btn .fa-certificate {
  color: #668ad8;
}
.unq_btn .pocket-btn .fa-certificate {
  color: #f79393;
}
.unq_btn .feedly-btn .fa-certificate {
  color: #acde71;
}
.unq_btn .googleplus-btn .fa-certificate {
  color: #ed7168;
}
.unq_btn a:hover .fa-stack-2x {
    -ms-transform: rotate(60deg);
    -webkit-transform: rotate(60deg);
    transform: rotate(60deg);
}
/*↑---- SNSシェアボタン_歯車_追従----↑*/

まとめ

いかがでしたでしょうか？
SNSボタンも、ひと工夫で色んな見せ方ができるので、是非試してみて下さい！