🔍こちらは「CSS版（Pro専用・最軽量）」です
✅こんな人におすすめ
- Elementor Pro を使っている
- ヘッダーは Sticky にする予定
- JSを増やしたくない、最軽量で組みたい
- CSS変数で見た目を細かく調整したい
🆚 もうひとつの「CSS+JS版（Elementor無料版OK）」もあります
無料版を使っている方、Sticky以外のヘッダー構成で使いたい方はこちら → CSS+JS版はこちら
💡Elementorのヘッダーをスクロールで変更したい方へ
よくある「ロゴやメニューを切り替える方法」ではありません。
本テンプレートでは、ロゴやメニューを複製せず、
1つのヘッダー構造のまま、
スクロール状態に応じて背景色・文字色を切り替えます。
判定にはElementor Pro標準のSticky機能（Motion Effects）を使用するため、
JavaScriptは一切使いません。読み込みファイルが増えないぶん、表示速度にも優しい構成です。
スタイルの制御はすべてCSSで完結し、
CSSをコピー＆貼り付けするだけで導入できます。
作業時間の目安は5〜10分です。
色・速度・ブラーの強さなどはCSS変数16個で管理しているため、
コードを読まなくても見た目を自由に調整できます。
詳しい設定方法は、導入ガイドで
スクリーンショット付きで解説しています。
✅このテンプレートでできること
- 1つのヘッダー構造のまま、スクロールで背景色・文字色を切り替え
- JS不要・Elementor Pro標準のSticky機能のみで動作
- スクロール後：背景色＋backdrop-filterによるガラス風ブラー
- スクロール後：見出し・ナビ・段落・CTAボタンの文字色/配色が連動（V3・V4両対応）
- CSS変数16個で色・速度・ブラーの強さを自由にカスタマイズ
- SP/タブレットのドロップダウンメニューで、白背景×白文字の事故を防止
- ロゴをinline SVGで設定している場合、SVGの構造を壊さずに色を連動させられる設計（上級者向け・任意）
- FVをヘッダーに重ねるmhd-fv-topクラスで、マイナスマージンの調整も不要
🔍よくある実装との違い
Elementorで「スクロール時に色を変える」方法として、
ロゴやメニューを複製して切り替える手法や、JavaScriptでスクロール量を判定する方法がよく紹介されています。
このテンプレートでは、
ロゴ・メニューを増やさず、
JSも使わず、Elementor Pro標準のSticky機能とCSSだけで配色を制御します。
DOM構造がシンプルなため、管理しやすく崩れにくいのが特長です。
なお、Elementor無料版をお使いの方や、Sticky以外のヘッダー構成で使いたい方には、
JavaScriptでスクロール判定を行うCSS+JS版もご用意しています。
👉 「作れる」ではなく「作る手間をなくす」ためのテンプレートです
🙋♀️こんな方におすすめ
- Elementor Proを使っていて、スクロールでヘッダーの色を自然に切り替えたい方
- ヘッダーをSticky設定で運用する予定の方
- JSを増やさず、最軽量な構成にこだわりたい方
- ロゴやメニューを増やさず、シンプルな構成を保ちたい方
- 色・速度・ブラーなどを自分で細かく調整したい方
🛠導入は3ステップ＋任意1ステップ（貼るだけ）
- ヘッダーにクラスを設定
ヘッダー親コンテナの「高度な設定 → CSSクラス」に「mhd-scroll-header」を付与します。 - Sticky設定
ヘッダー親コンテナの Motion Effects で Sticky を「Top」に設定し、Effects Offset にPC・タブレット・モバイルすべての値を入力します。 - CSSを貼り付け
外観 → カスタマイズ → 追加CSS（またはElementorのカスタムCSS）に貼り付けます。 - 【任意】FVをヘッダーに重ねる
FVセクションのCSSクラスに「mhd-fv-top」を付与すると、ヘッダー下にFVを重ねて配置できます。
導入手順はスクリーンショット付きの導入ガイドで詳しく解説しています。
⚙対応環境・前提条件
必須
- WordPress
- Elementor Pro（Sticky機能・Theme Builderを使用するため）
ご注意
- ヘッダーのコンテナはV3コンテナを使用してください（V4ではスマホ用メニュー表示に問題が出る場合があります）※V4対応セレクタも同梱
- Effects Offsetは、PC・タブレット・モバイルの3欄すべてに値を入力してください（空欄だとスマホ表示時に最初から色が変わって見える不具合が起きます）
🖥️動作確認環境
- 対応テーマ：Hello Elementor / Astra / Cocoon で動作確認済み
- （ブラウザ・実機環境は確認中）
🎨SVGロゴについて（上級者向け・任意）
ロゴをinline SVGで設定している場合、
CSSによるロゴカラーの制御が可能です。
図形要素（path・rect等）のみを指定する設計のため、
SVG内部のmask・defs構造を壊さずにカラーを連動できます。
※ SVGの作成方法や変換手順はサポート対象外です。
SVGが扱える方のみご利用ください。
📖導入難易度・必要スキル
【導入難易度】★★☆☆☆（やさしめ）
- WordPress / Elementor Proの基本操作ができる方
- Motion Effects（Sticky設定）を操作できる方
- CSSをコピー＆貼り付けできる方
✅まとめ
ロゴやメニューを切り替えず、
Elementor Pro標準のSticky機能とCSSだけで、
ヘッダーの配色をスマートに制御できます。
JS不要・追加ファイルなしのため、最軽量。
Proユーザーの方に、シンプルで再現性の高い解決策を提供します。
無料版をお使いの方、Sticky以外のヘッダー構成で使いたい方には、
別商品の「CSS+JS版」もご用意しています。
→ CSS+JS版はこちら
レビュー
レビューはまだありません。