読者です 読者をやめる 読者になる 読者になる

太陽がまぶしかったから

C'etait a cause du soleil.

はてなブログにスクロール追尾するソーシャルボタンセットを付ける

はてなブログにスクロール追尾するシェアボタンを付ける

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

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

忍者おまとめボタンでソーシャルボタンセットを作成

 『ツイートボタン、いいねボタンなどをまとめて簡単設置|忍者おまとめボタン』はソーシャルボタンをまとめて設置できるサービスで、はてなブログの行末にあるようなボタンを作るためのものです。こちらを利用すれば、GUIでどのボタンを使うかを簡単に選択できます。

 こちらで作成したボタンセットについて、プレビュー画面で縦配置化が行えます。またスマートフォン機能について、今回はフッターに配置するためスマートフォンでは動作しません。記事下に配置すれば表示できますが、小さい画面の中では邪魔なので無効にした方が無難と思われます。

 管理画面に戻って「コード」ボタンを押すことでコードが取得できます。

ソーシャルボタンセットをはてなブログに配置

 位置を固定化するため、コード自体はどこに置いても良いのですが、今回はフッターに取得したコードを追加しています。前述の通り、スマートフォンでは動かさない前提です。

ソーシャルボタンセットにスタイルを適用

 コードには<div class="ninja_onebutton">があるため、デザインCSS設定から、「ninja_onbutton」のスタイルを指定することで固定化させます。ついでに角丸化などの装飾も施します。

f:id:bulldra:20140329144036p:plain

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

.ninja_onebutton {
   top: 90px;
   margin-left: -133px;
   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 #DDDDDD;
}

まとめ

 これで、縦位置を固定化することができます。topなどの値については自身のブログのデザインに応じて調整が必要になるかもしれません。またソーシャルボタンについては忍者おまとめボタンの機能で増減できます。

 ちなみにJavaScriptを使って100pxぐらいスクロールしたらフェイドインしてくる処理を入れたりもしてたのですが、はてブボタンがでてくるまでにタイムラグがあったりするし、結局アテンションが奪われて文章が読みにくくなるので、CSSだけでシンプルに実装することとしました。

 そんなわけで、サイドバーにスクロール追尾するソーシャルボタンセットを付ける方法について書きました。気になるかたは実装してみたらいかがでしょうか。

修正履歴

 忍者おまとめボタン側のCSSに無茶苦茶でかいz-index値が!importantで設定されてますね。はてな側のz-index値をそれより大きくすることで対応出来ました。ありがとうございます。

 スタイルシートに修正を反映していますので、お手数をおかけしますが、使用中の方はスタイルシートの修正をお願いいたします。ただでさえ万超えはどうかと思っていたのに、ドラゴンボールの戦闘力かよってレベルでインフレしてる。なお、設置サポートや表示スタイル/アルゴリズムのカスタマイズ等のご依頼がありましたらサポートライセンスの購入をお願いいたします。

.ninja_onebutton {
    clear: both;
    /*padding-bottom: 10px;*/
    z-index:10350000 !important;
    /* overflow: auto; */
}

HTML5+CSS3の新しい教科書 基礎から覚える、深く理解できる。

HTML5+CSS3の新しい教科書 基礎から覚える、深く理解できる。