Blog Floating ButtonのCSSカスタマイズとショートコードを解説

→ サイトを見てみる

なかじさん（@ds_nakajima）が販売している「Blog Floating Button」プラグインPro版購入しました。

値段は4,980円です。

夜中の変なテンションだったので、無料版を使う前に意味もなく即決。

まぁこれくらいの値段なら効果なくてもいいかなって感じです。この人商売上手いから値上げする可能性もありそうですしね。

とはいえ、販売開始から怒涛のアップデートで日に日に改善しててすげーなと思ってます。

さて、このプラグイン自体は使いこなしていないんですが、私なりに気になった点をいくつかCSSで調整してみました。「無料版」の方も調整できるものです。

また「Pro版」のみになりますが、ショートコードの使い方も解説しましたので、イマイチ使い勝手がわからない方も参考になるかもしれません。

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

---

FABボタンを前に重ねる

---

ボタンのアニメーションをゆっくりに

デフォルト0.3秒

カスタマイズ0.9秒

---

該当記事だけボタンを小さくする。

---

Blog Floating Buttonのバツマークのカスタマイズ

style.css
copyする

/* バツを消したい */
.inner_bfb .bfb_closed{
display:none;
}

style.css
copyする

/* バツを左側にズラしたい */
.inner_bfb .bfb_closed{
right: auto!important;
left:10px;
}

当サイトは様子見で消してますけど、そうでなくともFABと被ってる方は左側にズラした方がいいかと思います。

Blog Floating Buttonのアニメーションをゆっくりにする

デフォルトは0.3秒なんですが、早すぎてボタン押す前に引っ込んじゃうんですよね。

style.css
copyする

/* スマホとPC両方共0.9秒に変更 */
#bfb_content_sp,#bfb_content_pc{
transition: .9s;	
}

「.9」で0.9秒なので「.」なくせば1秒単位にできますが、これくらいにしておかないとウザくなりそうです。

_sp・_pc部分がそれぞれスマホ・PCなので、コードを消せばそれぞれ対応できます。

Blog Floating Buttonの位置をズラす

デフォルトだとFABボタンと思いっきり被ってます。なのでスマホだけボタンを少し左にズラしつつ幅を指定、FABボタンはデバイス関係なく前に重ねます。

style.css
copyする

/* スマホ時ボタンサイズ指定・左側にズラす */
@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共通設定

文字サイズがデフォルトの14pxだとすると、ボタンテキストは14字以内におさめないと二段になってカッコ悪くなるので注意してください。

また当サイトはマイクロコピーなしなので、ボタン上下の余白を高めにしていますが、コピーを入れるならデフォルトでいいと思います。

Blog Floating Buttonのボタンを該当記事だけサイズ変更

現状だと共通設定にあるサイト全体でしかボタンサイズを変更できません。

PCの方はそんなに気になりませんが、スマホだとマイクロコピーありなしで高さがだいぶ変わってしまうので、それに合わせてボタンサイズを変更したい方もいるはずです。

そういった場合は、以下のコードをサイズ変更したい記事に埋め込んでください。

style.css
copyする

#bfb_content_sp a.bfb_btn {
    padding: 5px 20px;
}

5pxを変更すれば、ボタン上下の余白を調整できます。20pxは横の余白になりますので、イジるとボタン内のテキスト改行位置がズレてしまうため変更しないことをオススメします。

PCも変えたい人は#bfb_content_sp部分を#bfb_content_pcに置き換えてください。

クラシックエディターの方はテキストエディタに以下を貼り付けてください。

style.css
copyする

<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]]でボタンを非表示にする方法です

イメージとしてはこんな感じですね。

これなら好きなタイミングで、訴求することができますね。

Blog Floating Buttonカスタマイズ・まとめ

以上Blog Floating Buttonで気になった箇所のカスタマイズとショートコード応用編でした。

ササッと触っただけなので、他にも使い道があるかもしれません。なにかいい設定方法があれば教えてください。

BFB公式サイト

→ サイトを見てみる