【SWELL対応】Blog Floating Button（PRO）の使い方｜バナー画像の×（閉じる）を非表示にする方法（CSS/JS完全版）

Blog Floating Button（BFB）とは？できることをサクッと解説

Blog Floating Button（以下BFB）は、Webサイトの右下などに**追従するボタン（フローティングボタン）**を設置できるWordPressプラグインです。

たとえば、こんな用途で使われます。

• LINE登録へ誘導（友だち追加）
• お問い合わせページへ誘導
• 予約ページ・資料請求への誘導
• 特設LPへ誘導（キャンペーン用）

固定CTAは「見られる・押される」確率が上がるので、ポートフォリオや店舗サイト、サービスサイトと相性が良いのが特徴です。

---

PRO版でできること

BFBは無料版でも使えますが、PRO版になるとより“実戦向き”になります。代表的なメリットは次の通り。

• バナー画像モード（画像をそのまま追従表示）
• 表示条件の細かい制御（ページや端末条件など）
• 非表示期間（×で閉じた後しばらく出さない）などの挙動制御

特に「バナー画像モード」は、LPやホームページで完成されたCTA画像をそのまま追従表示できるので、デザイン的にも強いです。

---

PRO版「バナー画像モード」の×印が気になる問題

PRO版のバナー画像モードを使っていると、右上（または左上）に**×（閉じる）**が表示されます。

この×はユーザーが閉じられるため親切な反面、

• 「世界観的に×が邪魔」
• 「CTAに集中させたい」
• 「バナー画像だけを見せたい」

というケースでは、×を消したい場面が出てきます。

---

まず結論：×印はCSSで消せる場合と消せない場合がある

ここが一番重要です。

CSSで消せるケース

• ×がHTML要素として存在し、CSSが普通に当たる
• 例：.bfb_closed などの要素を display:none できる

CSSが効かないケース（今回の実例）

• BFB側が×を JavaScriptで生成/再生成している
• 表示後に上書きされ、Computedが display:block のままになる
• キャッシュ削除しても変わらない

この場合は、CSSではどうやっても勝てないので、最終的に JSで要素を削除するのが正解になります。

この記事では両方を紹介します。

---

【方法1】CSSで×印を非表示にする（基本）

まずはCSSで消せるか試すのが最短です。

手順（SWELL想定）

1. WordPress管理画面
2. 外観 → カスタマイズ → 追加CSS
3. 下記を貼り付けて保存

CSS（PC/SP両方）

/* BFB（バナー画像モード）：×（閉じる）を非表示（基本） */
.bfb_closed{
  display: none !important;
}

この1行で消えればOKです。

---

【方法2】構造が違う場合に備える（セレクタを強くする）

環境によっては、BFBのコンテナIDが変化していたり、PC/SPで分かれている場合があります。

その場合は「bfb_content系の中にある×だけ」を狙って、少し強めに指定します。

/* BFB：bfb_content 配下の×だけを非表示（PC/SP想定） */
[id^="bfb_content"] .bfb_closed{
  display: none !important;
}

さらに×が画像（img）として残るケースもあるので、その場合は img も一緒に消します。

/* ×がimgの場合の保険 */
[id^="bfb_content"] .bfb_closed img{
  display: none !important;
}

---

ここでチェック：消えないなら「CSSで無理」判定

CSSを入れても消えないときは、検証ツールで原因を切り分けます。

確認手順（Chrome）

1. ×印を右クリック → 検証
2. 右側の 計算済み（Computed）
3. display を検索

• display: none になっている → CSSが当たっている（別要素の可能性）
• display: block のまま → CSSが当たっていない or JSで再生成されている

今回の現場では display:block のままで、CSSだけでは消せませんでした。

---

【方法3】CSSで消せない場合はJSで削除する（確定版）

CSSで勝てない場合の最終解です。
BFBが×を再生成しても、生成された瞬間に削除し続ける方式にします。

設置場所（SWELL）

外観 → カスタマイズ → 高度な設定 →「bodyタグ終了直前に出力するコード」

JS（確定版：再生成にも対応）

<script>
(function () {
  function removeBfbClose() {
    document.querySelectorAll('.bfb_closed').forEach(el => el.remove());
  }
  removeBfbClose();

  const observer = new MutationObserver(removeBfbClose);
  observer.observe(document.body, { childList: true, subtree: true });
})();
</script>

---

なぜJSだと確実に消えるのか

CSSは「表示されている要素にスタイルを当てる」だけですが、BFBの×は環境によって

• 表示後にJSで作られる
• 表示後に別のCSSで上書きされる
• 再生成される

といった挙動になります。

JSで要素そのものをDOMから削除してしまえば、上書き合戦が発生しないため、確実に消せます。

---

注意点（クライアント案件向け注意）

• キャッシュが強い環境だと反映が遅れます
  SWELL高速化・キャッシュプラグイン・Cloudflare等は確認
• JSを入れたら、ブラウザは Ctrl + F5 推奨
• ×を消す＝ユーザーが閉じられないので、運用ポリシーは要確認
  （「閉じる導線を残したい」場合は×は残すのが無難）

---

まとめ：まずCSS、ダメならJSが最短ルート

• まずは .bfb_closed { display:none; } で試す
• だめなら [id^="bfb_content"] で範囲を絞って再トライ
• それでもダメなら JS（MutationObserver）で削除が確定版

BFBはめちゃくちゃ便利なので、×問題さえ解決できると、バナー画像CTA運用がかなり強くなります。

---

追記：この記事を読んだ方向け（相談テンプレ）

もし「自分の環境では消えない…」という場合は、検証ツールで×の要素をクリックして

• class名
• 親のid
• imgのsrc

この3つが分かれば、ピンポイントでCSSを1行に落とし込めます。

同じプラグインでもサイト環境（キャッシュ/最適化/テーマ）で挙動が変わるので、検証ツールで“要素の正体”を見て判断するのが最短です。