プラグイン

【Blog Floating Button】無料プラグイン導入方法と使用例を紹介

BFB(Blog Floating Button)プラグイン
  • 無料プラグイン「Blog Floating Button」の導入方法が知りたい!

この記事では、無料プラグイン「BFB(Blog Floating Button)」の導入方法と使用例を紹介しています。

BFB(Blog Floating Button)とは

ABCオンラインを主宰されている「なかじさん(@ds_nakajima)」が開発された無料プラグインです。

導入方法はとっても簡単で、お問い合わせボタンを1つ表示するだけならたったの5分!

BFB(ボタンやバナー画像)を表示することで、おすすめしたい記事を目立たせることができます。

まだ導入していない方は、ぜひこの機会に無料版をおためしくださいね!

この記事はこんな方におすすめ

  • BFB(Blog Floating Button)の導入方法や使用例がしりたい方
  • おすすめの記事や商品がある方
  • ブログで初発生を狙いたい方
\クリック率アップ!/BFB公式サイトはこちら無料のワードプレスプラグイン

BFB(Blog Floating Button)とは

BFB(Blog Floating Button)プラグイン

引用先:BFB公式サイト

BFB(Blog Floating Button)とは

成約数を向上させるフロートボタンを実装するWordPressのプラグインです。

ボタンの他にもバナー画像も表示できます!

 

BFBのダウンロード方法

BFB(Blog Floating Button)プラグイン

BFB(Blog Floating Button)公式サイトよりZIPファイルをダウンロードして行います。

BFB(Blog Floating Button)公式サイトはこちらから

 

BFBのダウンロード方法

Download BFBをクリック

BFB(Blog Floating Button)プラグイン

なかじさんの「無料メルマガを登録をする」、もしくは登録をせずにダウンロード」どちらかを選ぶ

BFB(Blog Floating Button)プラグイン

フォルダーを開くをクリック

BFB(Blog Floating Button)プラグイン

ZIPファイルの場所を確認

BFB(Blog Floating Button)プラグイン

 

BFBのプラグイン追加方法

BFB(Blog Floating Button)プラグイン

先程のZIPファイルを、ワードプレスのプラグインに追加していきます。

 

BFBプラグインの追加方法

ワードプレスのプラグイン新規追加をクリック

BFB(Blog Floating Button)プラグイン
  1. プラグインのアップロード
  2. 参照クリック
  3. ダウンロードしたZIPファイルを選択
  4. 今すぐインストールをクリック
BFB(Blog Floating Button)プラグイン

インストール完了後、プラグインを有効化をクリック

BFB(Blog Floating Button)プラグイン

プラグイン一覧でBFBが導入されているかチェック

BFB(Blog Floating Button)プラグイン

 

BFBの設定方法

BFB(Blog Floating Button)プラグイン

BFB(Blog Floating Button)の設定は3つです。

  1. 共通設定
  2. PC(パソコン)設定
  3. スマホ(携帯)設定

共通設定

PCとスマホの共通設定をしていきます。

設定出来るものはこちら

  1. PCのボタンデザイン
  2. スマホのボタンデザイン
  3. 文字サイズ(PC)
  4. 文字サイズ(スマホ)
  5. トップページの表示
  6. 除外記事ID

ワードプレスの設定⇒BFB設定をクリック

BFB(Blog Floating Button)プラグイン

共通の設定のタブをクリック

BFB(Blog Floating Button)プラグイン

以下の設定をお好みでしてみてください。

PCのボタンデザイン ボタンのみ・説明文+ボタン・ボタン+ボタン・バナー画像・表示しない
スマホのボタンデザイン ボタンのみ・説明文+ボタン・ボタン+ボタン・バナー画像・表示しない
文字サイズ(PC) 13~15pxがおすすめ
文字サイズ(スマホ) 13~15pxがおすすめ
トップページの表示 表示・トップページのみ表示・トップページのみ非表示
除外記事ID 表示したくないページのID
自動非表示機能 下スクロール時は非表示・常に表示
開発モード 管理者のみ表示・全体公開
PRO版ライセンスキー 購入した方のみ、ライセンスキーを入力

表示したくないページのIDは投稿一覧より探せます

BFB(Blog Floating Button)プラグイン

 

PC(パソコン)・スマホ(携帯)設定

表示方法は4つあります。お好きな表示をお選びください。

選んだあとは変更を保存を押してくださいね。

1.ボタン単体

BFB(Blog Floating Button)プラグイン
  • ボタンタイプ:角丸ボタン、四角ボタン
  • ボタン色:赤、オレンジ、黄色、青、緑
  • ボタンの分言:
  • リンク先URL:
  • リンクの開き方:同じタブか別タブ

2.説明文+ボタン

BFB(Blog Floating Button)プラグイン
  • 説明文:
  • ボタンタイプ:角丸ボタン、四角ボタン
  • ボタン色:青、赤、オレンジ、黄色、緑
  • ボタンの文言:
  • リンク先URL:
  • リンクの開き方:同じタブ、別のタブ

3.ボタン+ボタン

BFB(Blog Floating Button)プラグイン
  • ボタンタイプ:角丸ボタン、四角ボタン

左ボタンと右ボタンを設定します。

BFB(Blog Floating Button)プラグイン
  • ボタンの色:赤、オレンジ、青、緑、黄色
  • ボタンの文言
  • リンク先URL
  • リンクの開き方:同じタブ、別のタブ

4.バナー画像

BFB(Blog Floating Button)プラグイン
  • 配置:PC(画面右上、右下、左上、左下)スマホ(画面上、画面下)
  • 画像URL:
  • リンク先:
  • リンクの開き方:同じタブ、別のタブ

PCの画像サイズ:300×300
スマホの画像サイズ:640×120px

私はバナー画像を「Canva」で作りました。

▼Canvaの使い方は、こちらの記事を参照してくださいね。

【Canva】アイキャッチの作り方を図解で解説!デザイン知識ゼロでも魅力的に作る方法
【Canva】アイキャッチの作り方を図解で解説!デザイン知識ゼロでも魅力的に作る方法 ブログのアイキャッチの作り方を知りたい! 魅力的なアイキャッチが簡単に作りたい! そんな方に、ブログのア...

 

BFBの使用例|ボタンとバナー画像

BFB(Blog Floating Button)プラグイン

無料版BFB(Blog Floating Button)では、選択後にプレビューができません。

プレビューは、PRO版を購入するとついてくる機能の1つです!

いろいろな組み合わせができますので、ご自身の好みに合わせて作ってみてくださいね。

 

BFBの使用例|ボタンとバナー画像

ボタン単体

BFB(Blog Floating Button)プラグイン

説明文とボタン

BFB(Blog Floating Button)プラグイン

ボタンとボタン

BFB(Blog Floating Button)プラグイン

バナー画像

BFB(Blog Floating Button)プラグイン

私はバナー画像をCanvaで作りました。

▼Canvaの使い方は、こちらの記事を参照してくださいね。

【Canva】アイキャッチの作り方を図解で解説!デザイン知識ゼロでも魅力的に作る方法
【Canva】アイキャッチの作り方を図解で解説!デザイン知識ゼロでも魅力的に作る方法 ブログのアイキャッチの作り方を知りたい! 魅力的なアイキャッチが簡単に作りたい! そんな方に、ブログのア...

\すぐにプレビューが見たい方/
PRO版の購入はこちらから

 

BFBをおすすめしたい方

BFB(Blog Floating Button)プラグイン

BFB(Blog Floating Button)は、ブログで収益化を目指している全ブロガーさんにおすすめです。

おすすめしたいポイント

  • 無料プラグインであること
  • 設定方法が簡単でわかりやすいこと
  • 下スクロール時に表示が消えるので、読み手への負担がへること

設定方法はとても簡単なので、まずは無料版でおためしくださいませ。

\クリック率アップ!/BFB公式サイトはこちら無料のワードプレスプラグイン

 

【Blog Floating Button】無料プラグイン導入方法と使用例を紹介|まとめ

今回は、無料プラグインのBFB(Blog Floating Button)導入方法と使用例を紹介してきました。

BFBのおすすめポイント

  • 無料プラグインであること
  • 設定方法が簡単でわかりやすいこと
  • 下スクロール時に表示が消えるので、読み手の負担がへること

ブログ初心者にもわかりやすく出来ているので、プロフィールやお問い合わせボタン1つの設定なら5分ほどで出来てしまいます。

初発生のお手伝いをしてくれる、BFB(Blog Floating Button)をぜひ導入してみてくださいね。

無料BFBは、こちらから

PRO版BFBは、こちらから

ここまで読んで頂き、ありがとうございました。

\こんなお悩みありませんか?/

ABOUT ME
アバター
夏目 C4
小学生向けプログラミングの3つの学び方(独学・教材・教室)を紹介しています。息子の自己肯定感アップのため「ほめ育子どもコーチング」の資格取得✨『なつスタ』管理人

COMMENT

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください