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