MENU

運営中のサブブログ

主に私のデスク周りアイテムを紹介しています。
在宅作業の参考になるかもしれません。

マンニメバナー画像

趣味の1つ漫画アニメについて書いています。
鬼滅のレビューはコメント600件以上きました。

カゲオ
サイト管理人
当ブログはWordPressが今より楽しく、便利になるをテーマに分かりやすい解説記事を心がけています。
サブブログ|デスク環境構築サイト運営中⇒見てみる

Blog Floating Buttonの使い方とCSSカスタマイズ

当ページのリンクには広告が含まれています。
Blog Floating Buttonの使い方

管理人のデスク環境ブログも運営中です

在宅作業の参考になるアイテムがあるかもしれません。
デスク周りのアップデートを検討されている方はぜひ覗いてみてください。

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

値段は4,980円です。

さて、私なりに気になった点をいくつかCSSで調整してみました。
無料版」の方でも調整できるものです。

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

当記事のカスタマイズでできること

Blog Floating Buttonカスタマイズ

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

Blog Floating Buttonカスタマイズ

FABボタンを前に重ねる

デフォルト0.3秒
カスタマイズ0.9秒

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

Blog Floating Buttonボタンを小さくする

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

目次

Blog Floating Buttonのバツを消す

/* バツを消したい */
.inner_bfb .bfb_closed{
  display:none;
}
/* バツを左側にズラしたい */
.inner_bfb .bfb_closed{
  right: auto!important;
  left:10px;
}
Blog Floating Buttonバツ被り

FABボタンと被っている場合は、左側にズラした方がいいかと思います。

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

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

デフォルトの0.3秒だと、ちょっと早すぎるかなぁと思います。
9の値を変えれば、秒数を指定できます。

Blog Floating Buttonの位置をズラす

/* スマホ時ボタンサイズ指定・左側にズラす */
@media(max-width:500px) {
#bfb_content_sp a.bfb_btn{
  margin-right:65px!important;
  width: 250px;	
}}

/* SANGO用なので別テーマは各自変更 */
.totop{
  z-index:10000;
}

デフォルトではFABボタンと思いっきり被っていましたので、スマホだけボタンを少し左にズラしつつ、微調整しました。

Blog Floating Buttonの重なり順は「9999」に指定されているため、10000以上なら前にできます。

※あとこのカスタマイズはBlog Floating Button側のスマホ設定も調整してください。

Blog Floating Button共通設定
Blog Floating Button共通設定

例えば文字サイズが14pxだと、ボタン内テキストは14字以内におさめないと二段になってしまいます。
このあたりを各自調整してください。

Blog Floating Buttonボタン

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

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

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

<style>
#bfb_content_sp a.bfb_btn {
    padding: 5px 20px;
}
</style>

上記のコードをボタンサイズを変更したい記事カスタムHTMLブロックで入れてください。
パソコン側も変更したい方は、#bfb_content_pcを使いましょう。

Blog Floating Buttonのボタンだけを使ったマイクロコピーの応用編

通常はマイクロコピーとボタンを分けて使いますが、先ほど解説したボタン上下の余白改行される文字数15字を利用すれば、ボタン内にマイクロコピーを作成できます。

Blog Floating Buttonカスタマイズ

Blog Floating Buttonショートコードの使い方

PRO版限定ですが、ショートコード[bfb_show][bfb_hide]を使うと、ボタンの表示領域を指定できます。

Blog Floating Buttonショートコード共通設定

一応px単位で指定できますが、この辺はざっくりで大丈夫です。
要は[bfb_show]入れた位置からボタンが表示され、[bfb_hide]入れた位置でボタンが非表示になります。

BFBの出現領域

導入文



最初の見出し



2番目の見出し
ここに[bfb_show] を入れる
ここからボタンが表示される



最後の見出し
ここに[bfb_hide]を入れる
ここから先はボタンが消える

こちらのショートコードは、記事中に一度しか使えません。

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

以上、Blog Floating Buttonで気になった箇所のカスタマイズとショートコードの使い方を解説しました。

ササッと触っただけなので、他にも良い使い道があるかもしれません。

Blog Floating Buttonの使い方

この記事が気に入ったら
フォローしてね!

シェアしていただけると励みになります
  • URLをコピーしました!

記事への質問等はこちらからどうぞ

コメントする

※日本語が含まれていないコメントは投稿できません。

目次