f:id:bulldra:20140425080137p:plain

追尾型ソーシャルボタンセットにスクロール機能を付ける

　Word Press界隈ではよく見かけていたのですが、嫌味じゃない程度に追尾するソーシャルボックスがあると、読んでる途中でも「シェア」や「あとで読む」がやりやすくなって確かに便利です。Word PressではShareBarというプラグインで実現しているようです。

　この機能について、はてなブログで実装する事を考えた時、手動で作り込むと管理が面倒かもと思っていたのですが、『ツイートボタン、いいねボタンなどをまとめて簡単設置｜忍者おまとめボタン』で生成したソーシャルボタンセットを利用すれば比較的簡単に管理できるように実装できます。

<a href="http://bulldra.hatenablog.com/entry/2014/03/29/145534">はてなブログにスクロール追尾するソーシャルボタンセットを付ける - 太陽がまぶしかったから</a>

　上記エントリでは、『ツイートボタン、いいねボタンなどをまとめて簡単設置｜忍者おまとめボタン』で作ったソーシャルボタンセットをスクロール追尾させる方法について解説しました。このソーシャルボタンセットについて、PageTopやPageDownへのスクロールボタンを付けます。

　ページ最上部に行くためのボタンは、よく見かけるのですがデザイン的な兼ね合いもあってページ最下部にいくためのボタンも付けてみました。それぞれJQueryで実装しています。なおスマートフォンの狭い画面で追尾されると鬱陶しいので、PCのブラウザでのみで動かす想定です。

ソーシャルボタンセットを配置

　はてなブログのデザイン画面のフッターに配置します。忍者おまとめボタンのコードについては、『はてなブログにスクロール追尾するソーシャルボタンセットを付ける - 太陽がまぶしかったから』の手順でご自身のものを取得してください。

<div class="ninja_onebutton">
<p id="page-top" class="page-navi"><a href="#wrap">▲</a></p>
<!-- ここから忍者おまとめボタンで取得したコードを利用 -->
<script type="text/javascript">
//<![CDATA[
(function(d){
if(typeof(window.NINJA_CO_JP_ONETAG_BUTTON_XXX)=='undefined'){
    document.write("<sc"+"ript type='text\/javascript' src='http:\/\/omt.shinobi.jp\/b\/XXX'><\/sc"+"ript>");
}else{
    window.XXX.ONETAGButton_Load();}
})(document);
//]]>
</script><span class="ninja_onebutton_hidden" style="display:none;"></span><span style="display:none;" class="ninja_onebutton_hidden"></span>
<!-- ここまで忍者おまとめボタンで取得したコードを利用 -->
<p id="page-bottom" class="page-navi"><a href="#wrap">▼</a></p>
</div>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
    $('#page-top').click(function () {
        $('body,html').animate({ scrollTop: 0 }, 700);
        return false;
    });
    
    $('#page-bottom').click(function () {
        $('body,html').animate({ scrollTop: $(document).height() }, 700);
        return false;
    });
});
</script>

CSS

　デザイン画面のCSSに以下の表記を追記します。自身のブログに合わせて適宜調整してください。

f:id:bulldra:20140329144036p:plain

.hatena-bookmark-bookmark-panel {
   z-index:10350001 !important;
}

.ninja_onebutton {
   top: 65px;
   height: 380px; /*適宜調整*/
   margin-left: -138px;
   float: left;
   position: fixed;
   border: solid 1px #ddd;
   background-color: #FFFFFF;
   padding: 10px 3px 0px 10px;
   width: 100px;
   border-radius: 5px 5px 5px 5px;
   -moz-border-radius: 5px 5px 5px 5px;
   -webkit-border-radius: 5px 5px 5px 5px;
   box-shadow: 0 0 5px #999;
}

.page-navi a {
    background: #850505;
    color: #fff;
    width: 80px;
    padding: 5px 0;
    margin: 0px 0px 10px 0px;
    text-align: center;
    display: block;
    border-radius: 5px;
}

.page-navi a:hover {
    text-decoration: none;
    text-shadow:  0 0 3px #000;
    opacity: 0.8;
}