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

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

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

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

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

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

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

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

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

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

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

f:id:bulldra:20140329144036p:plain

.ninja_onebutton {
   top: 90px;
   margin-left: -133px;
   float: left;
   position: fixed;
   z-index: 1;
   border: solid 1px #ddd;
   background-color: #FFFFFF;
   padding: 10px 3px 0px 10px;
   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;
}