MENU
カゲオ
管理人
陰ながらサイト運営を応援するブログ「カゲサイ」の管理人です。
WordPressやブログについてかゆいところに手が届く解説を心がけています。

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版限定ですが、ショートコード

を使うと、ボタンの表示領域を指定できます。

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

一応px単位で指定できますが、この辺はざっくりで大丈夫です。
要は

入れた位置からボタンが表示され、
入れた位置でボタンが非表示になります。

BFBの出現領域

導入文



最初の見出し



2番目の見出し
ここに

を入れる
ここからボタンが表示される



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

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

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

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

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

Blog Floating Buttonの使い方

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

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

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

コメントフォーム

※日本語が含まれない内容は投稿できません。

目次