WordPress
その他
運営中のサブブログ
主に私のデスク周りアイテムを紹介しています。
在宅作業の参考になるかもしれません。
運営中のサブブログ
主に私のデスク周りアイテムを紹介しています。
在宅作業の参考になるかもしれません。
なかじさん(@ds_nakajima)が販売している「Blog Floating Button」プラグインPro版購入しました。
値段は4,980円です。
さて、私なりに気になった点をいくつかCSSで調整してみました。
「無料版」の方でも調整できるものです。
また「Pro版」のみになりますが、ショートコードの使い方も解説しましたので、イマイチ使い勝手がわからない方も参考になるかもしれません。
当記事のカスタマイズでできること
バツマークを左側へ移動または消す
FABボタンを前に重ねる
ボタンのアニメーションをゆっくりに
該当記事だけボタンを小さくする
/* バツを消したい */
.inner_bfb .bfb_closed{
display:none;
}
/* バツを左側にズラしたい */
.inner_bfb .bfb_closed{
right: auto!important;
left:10px;
}
FABボタンと被っている場合は、左側にズラした方がいいかと思います。
/* スマホとPC両方共0.9秒に変更 */
#bfb_content_sp,#bfb_content_pc{
transition: .9s;
}
デフォルトの0.3秒だと、ちょっと早すぎるかなぁと思います。
9の値を変えれば、秒数を指定できます。
/* スマホ時ボタンサイズ指定・左側にズラす */
@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側のスマホ設定も調整してください。
例えば文字サイズが14pxだと、ボタン内テキストは14字以内におさめないと二段になってしまいます。
このあたりを各自調整してください。
現状だと共通設定内のサイト全体でしか、ボタンサイズを変更できません。
パソコンだとそんなに気になりませんが、スマホだとマイクロコピーありなしで高さがだいぶ変わってしまうため、それに合わせてボタンサイズを変更した方が良さそうです。
<style>
#bfb_content_sp a.bfb_btn {
padding: 5px 20px;
}
</style>
上記のコードをボタンサイズを変更したい記事にカスタムHTMLブロックで入れてください。
パソコン側も変更したい方は、#bfb_content_pc
を使いましょう。
通常はマイクロコピーとボタンを分けて使いますが、先ほど解説したボタン上下の余白や改行される文字数15字を利用すれば、ボタン内にマイクロコピーを作成できます。
PRO版限定ですが、ショートコードと
を使うと、ボタンの表示領域を指定できます。
一応px単位で指定できますが、この辺はざっくりで大丈夫です。
要は を入れた位置からボタンが表示され、
を入れた位置でボタンが非表示になります。
導入文
・
・
・
最初の見出し
・
・
・
2番目の見出し
ここに を入れる
ここからボタンが表示される
・
・
・
最後の見出し
ここにを入れる
ここから先はボタンが消える
こちらのショートコードは、記事中に一度しか使えません。
以上、Blog Floating Buttonで気になった箇所のカスタマイズとショートコードの使い方を解説しました。
ササッと触っただけなので、他にも良い使い道があるかもしれません。
この記事が気に入ったら
フォローしてね!
記事への質問等はこちらからどうぞ