ザツログ

雑学、幕末、80年代、ブログカスタマイズ、ITトラブルシューティングなど。

MENU

はてなブログに設置したソーシャルボタンを『追尾型』にする方法

f:id:maekeeeeen:20141017200401j:plain

画面をスクロールしても追いかけてくる追尾型ソーシャルボタンの作成方法です。

 

ソーシャルボタンを設置

前回紹介した『忍者おまとめボタン』を使って追尾型ソーシャルボタンを作成します。

⑩コピーしたスクリプトコードをブログに張り付ければ、ソーシャルボタンが表示されます。

はてなブログの場合は、管理画面より、『デザイン』 > 『カスタマイズ』 > 『記事』 > 『記事下』に貼り付ければ、ソーシャルボタンが表示されます。

前回の記事の上記設定の部分を下記のように読み替えて設定します。

管理画面より、『デザイン』 > 『カスタマイズ』 > 『記事』 > 『記事下』に貼り付け

①管理画面より、『デザイン』 > 『カスタマイズ』 > 『サイドバー』 > 『モジュールを追加』を選択します。

②『HTML』を選択し、コピーした『忍者おまとめボタン』のスクリプトコードを貼り付け『適用』をクリックします。
※『タイトル』は何も入力しません。

f:id:maekeeeeen:20141024023332p:plain

 

ソーシャルボタンを追尾させるCSSを設定

①管理画面より、『デザイン』 > 『カスタマイズ』 > 『デザインCSS』を選択します。

②下記のコードを『デザインCSS』に貼り付けます。

 /* 忍者おまとめボタン位置設定 */ .ninja_onebutton{ position: fixed; bottom: 55px; left:5px; background-color:rgba(255,255,255,0.5); } 

 

[bottom]

画面下からの距離です。
このコードの場合、下から"55ピクセル"の位置という意味です。


[left]

画面左からの距離です。
このコードの場合、左から"5ピクセル"の位置という意味です。

 

[background-color:rgba]

"rgb"で色を指定します。
このコードの場合、"255.255.255"なので『ホワイト』です。

"a"で透明度を指定します。
このコードの場合、透明度を"0.5"にしています。

 

このように、『忍者おまとめボタン』が、半透明の枠に囲まれ、追尾型ソーシャルボタンとなりました。

f:id:maekeeeeen:20141024025854p:plain