黒木ノ水岩

黒木ノ水岩

自分の経験や実体験を元に、商品紹介や様々なHowTo等を紹介していきます。尚、当ブログの利用や掲載内容等により生じた損害等の責任は一切負いかねますので、ご了承下さい。

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

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


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

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


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

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


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

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


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

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


設定方法

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

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

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

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

<!--「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ボタンも、ひと工夫で色んな見せ方ができるので、是非試してみて下さい!