なかじさん(@ds_nakajima)が販売している「Blog Floating Button」プラグインPro版購入しました。
値段は4,980円です。
夜中の変なテンションだったので、無料版を使う前に意味もなく即決。
まぁこれくらいの値段なら効果なくてもいいかなって感じです。この人商売上手いから値上げする可能性もありそうですしね。
とはいえ、販売開始から怒涛のアップデートで日に日に改善しててすげーなと思ってます。
さて、このプラグイン自体は使いこなしていないんですが、私なりに気になった点をいくつかCSSで調整してみました。「無料版」の方も調整できるものです。
また「Pro版」のみになりますが、ショートコードの使い方も解説しましたので、イマイチ使い勝手がわからない方も参考になるかもしれません。

バツマークを左側へ移動または消す

FABボタンを前に重ねる
ボタンのアニメーションをゆっくりに
該当記事だけボタンを小さくする。
目次・読みたい所へタップできます
Blog Floating Buttonのバツマークのカスタマイズ
style.csscopyする/* バツを消したい */ .inner_bfb .bfb_closed{ display:none; }
style.csscopyする/* バツを左側にズラしたい */ .inner_bfb .bfb_closed{ right: auto!important; left:10px; }
当サイトは様子見で消してますけど、そうでなくともFABと被ってる方は左側にズラした方がいいかと思います。
Blog Floating Buttonのアニメーションをゆっくりにする
デフォルトは0.3秒なんですが、早すぎてボタン押す前に引っ込んじゃうんですよね。
style.csscopyする/* スマホとPC両方共0.9秒に変更 */ #bfb_content_sp,#bfb_content_pc{ transition: .9s; }
「.9」で0.9秒なので「.」なくせば1秒単位にできますが、これくらいにしておかないとウザくなりそうです。
_sp・_pc
部分がそれぞれスマホ・PCなので、コードを消せばそれぞれ対応できます。
Blog Floating Buttonの位置をズラす
デフォルトだとFABボタンと思いっきり被ってます。なのでスマホだけボタンを少し左にズラしつつ幅を指定、FABボタンはデバイス関係なく前に重ねます。
style.csscopyする/* スマホ時ボタンサイズ指定・左側にズラす */ @media(max-width:500px) { #bfb_content_sp a.bfb_btn{ margin-right:65px!important; width: 250px; }} /* SANGO用だから別テーマは各自変更 */ .totop{ z-index:10000; }
ボタンのサイズと位置は小さいスマホ(iPhone5とか)を意識するならこれがベストかも。
.totop
はSANGO用なんで、別テーマの方は各自変更してください。
Blog Floating Buttonの重なり順は「9999」に指定されているので「10000」にすればそれより前にきます。
※ただしこのカスタマイズはBlog Floating Button側のスマホ設定も調整してください。

Blog Floating Button共通設定

また当サイトはマイクロコピーなしなので、ボタン上下の余白を高めにしていますが、コピーを入れるならデフォルトでいいと思います。
Blog Floating Buttonのボタンを該当記事だけサイズ変更
現状だと共通設定にあるサイト全体でしかボタンサイズを変更できません。
PCの方はそんなに気になりませんが、スマホだとマイクロコピーありなしで高さがだいぶ変わってしまうので、それに合わせてボタンサイズを変更したい方もいるはずです。
そういった場合は、以下のコードをサイズ変更したい記事に埋め込んでください。
style.csscopyする#bfb_content_sp a.bfb_btn { padding: 5px 20px; }
5px
を変更すれば、ボタン上下の余白を調整できます。20px
は横の余白になりますので、イジるとボタン内のテキスト改行位置がズレてしまうため変更しないことをオススメします。
PCも変えたい人は#bfb_content_sp
部分を#bfb_content_pc
に置き換えてください。
クラシックエディターの方はテキストエディタに以下を貼り付けてください。
style.csscopyする<style> #bfb_content_sp a.bfb_btn { padding: 5px 20px; } </style>
Blog Floating Buttonのボタンだけを使ったマイクロコピーの応用編
通常はマイクロコピーとボタンを分けて使いますが、上記で解説したボタン上下の余白や改行位置(15字)を利用すればボタンだけでマイクロコピーを作成できます。
こんな感じです。
まだデータを取れていませんが、こうすることでよりボタンをクリックしやすくなるかなと。
そもそもボタンが小さすぎると非常に押しづらいので、この辺りは検証が必要ですね。
Blog Floating Buttonショートコードの使い方
新しく追加されたショートコード[[bfb_show]]
と[[bfb_hide]]
について、使ってみた範囲で解説します。
一応上記の共通設定で表示範囲をpx指定できるみたいですが、イマイチ分かりづらい。
要するに[[bfb_show]]
これを記事中に挟むとそこを通過したところからボタンが現れるようになります。
で、もう1つの使い方としては[[bfb_show]]
で表示位置を決めて、[[bfb_hide]]
でボタンを非表示にする方法です
イメージとしてはこんな感じですね。
- 導入文
- ・
- ・
- ・
- 最初の見出し
- ・
- ・
- ・
- 見出し2
- ここに
[[bfb_show]]
を挿入 - ここからボタンが表示されます。
- ・
- ・
- ・
- 見出し4
- ここに
[[bfb_hide]]
を挿入 - ここから先ボタンは表示されません。
これなら好きなタイミングで、訴求することができますね。
こちらのショートコードは一度切りしか使えないので、[[bfb_hide]]
のあとにもう一度[[bfb_show]]
を挟んでもボタンは表示されません。
Blog Floating Buttonカスタマイズ・まとめ
以上Blog Floating Buttonで気になった箇所のカスタマイズとショートコード応用編でした。
ササッと触っただけなので、他にも使い道があるかもしれません。なにかいい設定方法があれば教えてください。
※日本語が含まれていないコメントは投稿できません。(スパム対策)