Elementor スマホ固定CTAバー CSS 上位版（表示条件・閉じるボタン対応）

💡Elementorでスマホ固定CTAバーをスクロール後に表示したい方へ

「スクロール後に表示したい」「問い合わせフォーム付近だけ非表示にしたい」「上スクロール時だけ再表示したい」──そんな表示条件を、CSS・JSを貼るだけで簡単に実装したいと思ったことはありませんか？

本テンプレートは、スマホ用の固定CTAバーに「スクロール後の表示」「特定セクションでの非表示」「上スクロール時のみ表示」「閉じるボタン」といった表示条件を組み込んで提供するテンプレートです。フッター重なりの回避、状態保持（同一タブ内）まで、すべて解決済みの状態で提供します。

基本の固定CTA表示・フッター回避はCSS/JSだけで動作するため、Elementor無料版でも導入できます。表示条件をきめ細かく設定したい場合は、Elementor Proの標準機能「Attributes（属性）」を使って値を入力するだけで有効になります。

🆚 無料版と上位版で、できることが変わります

本テンプレートは、Elementorの無料版・Pro版どちらでも設置できますが、できる範囲が異なります。誤解を防ぐため、先にご案内します。

表示条件の指定には、Elementor Pro標準の「Attributes（属性）」機能を使用します。この入力欄自体が無料版には存在しないため、条件制御を使う場合はElementor Proが必要です。「基本のCTAとしてはPro不要、条件を細かく制御したいならPro」とご理解いただくのが正確です。

✅このテンプレートでできること

• 指定セクションをスクロール後に表示（show-after）
• 特定セクション付近ではCTAを非表示（hide-on／複数指定可）
• 上スクロール時のみCTAを表示（show-direction）
• フッターとの重なりを自動回避（停止モード／フェードモードから選択）
• 閉じるボタン＋同一セッション中の状態保持（ページ再読み込みしても非表示を維持）
• 表示位置の判定ラインをCSS変数で調整可能（–mhd-cta-trigger-position）
• スマホのみ／タブレットも表示を切り替え可能
• JS不調時も基本CTAとして表示されるフォールバック設計
• Elementor V3・V4両対応（V4は暫定対応）

🔍よくある実装との違い

スマホ固定CTAバーは、常時表示のまま設置されることが多く、

• フッターや問い合わせフォームと重なってしまう
• 読了前のセクションでも表示され続け、邪魔に感じられる
• 特定のセクションだけ隠す、といった細かい制御がしづらい
• 閉じるボタンや状態保持を毎回自前で実装する必要がある

といった問題があります。

本テンプレートでは、

• 表示条件をAttributesへ入力するだけで設定完了
• CSS変数でトリガー位置や見た目を細かく調整可能
• フッター重なりを自動で回避（JS実装済み）
• 閉じるボタンの状態保持もあらかじめ組み込み済み

👉 「作れる」ではなく「作る手間をなくす」ためのテンプレートです

🙋‍♀️こんな方におすすめ

• Elementorでスマホ固定CTAバーを設置している方
• CTAとフッター・フォームが重なってしまい困っている方
• 「このセクションを読んだ後だけ表示したい」を毎回自前で実装している方
• 問い合わせフォーム付近だけCTAを隠したい方
• 閉じるボタンや表示状態の保持を、コードを書かずに設定したい方

🛠導入は2ステップ＋オプション設定（貼るだけ）

1. クラスを設定
   CTAコンテナに「mhd-cta」を付与します。フッター回避を使う場合は、フッター要素に「mhd-footer」も付与します。
2. CSS・JSを貼り付け
   外観 → カスタマイズ → 追加CSS にCSSを、WPCode等でフッターにJSを貼り付けます。
3. 【任意】フッター回避のモードを選択
   「mhd-cta–stop」（停止）または「mhd-cta–fade」（フェード）のクラスを追加します。未指定の場合は停止モードになります。
4. 【任意】表示条件をAttributesへ入力
   CTAコンテナの「詳細設定 → Attributes」に、スクロール後の表示・特定セクション非表示・上スクロール表示・閉じるボタンなど、必要な項目だけ入力します（Elementor Pro限定）。

導入手順・Attributesの入力方法はスクリーンショット付きの導入ガイドで詳しく解説しています。

⚙対応環境・前提条件

基本のCTA表示・フッター回避

• WordPress
• Elementor（無料版で動作可能）

表示条件の細かい制御（スクロール後表示・特定セクション非表示・上スクロール表示・閉じるボタン）

• Elementor Pro必須（Attributes機能を使用するため）

ご注意

• スクロール後表示と上スクロール表示を併用すると、「上スクロールしないとCTAが表示されない」という直感的でない挙動になります。基本的にはどちらか一方の利用をおすすめします。

🖥️動作確認環境

• Windows：Chrome / Edge
• iOS：iPhone（Safari）実機確認済み
• Android：Chrome 実機確認済み
• Elementorボタンウィジェット：V3（elementor-button）／V4（e-button-base）両対応。V4は暫定対応のため、ご利用の構造にあわせて動作確認を推奨します。

📖導入難易度・必要スキル

【基本のCTA表示】★☆☆☆☆（かんたん）
【表示条件の設定まで含める場合】★★☆☆☆（やや簡単）

• WordPress / Elementorの基本操作ができる方
• CSS・JSをコピー＆貼り付けできる方
• 表示条件を使う場合：Elementor ProのAttributes欄に文字列を入力できる方（解説付き）