【SWELL】追従ヘッダーをおしゃれな「すりガラス風（半透明）」にするCSSカスタマイズ

2026年9月2日

当ページのリンクには広告が含まれています。

スクロールしたときに付いてくるヘッダー（追従ヘッダー）を、
流行りのすりガラス風（半透明＋背景ぼかし）に変える方法を解説します。

PCだけでなく、スマホにも完全対応したコードを用意しました。
コピペだけで5分で終わるので、ぜひ試してみてください！

ステップ1：SWELLのカスタマイズ設定を確認する

CSSを入れる前に、SWELLの機能でヘッダーが「不透明」に固定されていないか確認します。
ここが設定されていないと、コードを貼っても透けない原因になります。

設定の手順

WordPress管理画面から 「外観」＞「カスタマイズ」 を開く
「ヘッダー」 をクリックする
以下の2つの項目をチェックします。
- 追従ヘッダー（PC）：「背景の不透明度」を 0 にする
- 追従ヘッダー（SP）：背景色が設定されている場合は、一度クリア（空欄）にする

設定が終わったら、右上の「公開」ボタンを押しておきます。

ステップ2：すりガラス風にするCSSをコピペする

次に、すりガラスのエフェクトをかけるCSSコードを貼り付けます。
あなたのサイトのデザイン（明るい系・暗い系）に合わせて、どちらか1つを選んでコピーしてください。

貼り付け先

WordPress管理画面の 「外観」＞「カスタマイズ」＞「追加CSS」 の一番下に貼り付けます。

白っぽいすりガラス（ライトモード向け）

サイト全体の背景が白っぽい、明るいデザインのサイトにおすすめです。

/* PC・スマホの追従ヘッダーをすりガラス風にする（白） */
.l-fixHeader {
    background-color: rgba(255, 255, 255, 0.65) !important; /* 白の透過度 */
    -webkit-backdrop-filter: blur(12px) !important; /* ぼかし量（Safari用） */
    backdrop-filter: blur(12px) !important; /* ぼかし量 */
}
@media not all and (min-width: 960px) {
    .l-header {
        background-color: rgba(255, 255, 255, 0.65) !important; /* 白の透過度 */
        -webkit-backdrop-filter: blur(12px) !important; /* ぼかし量（Safari用） */
        backdrop-filter: blur(12px) !important; /* ぼかし量 */
    }
}

黒っぽいすりガラス（ダークモード向け）

サイト全体が黒っぽい、またはクールでかっこいいデザインのサイトにおすすめです。

/* PC・スマホの追従ヘッダーをすりガラス風にする（黒） */
.l-fixHeader {
    background-color: rgba(0, 0, 0, 0.5) !important; /* 黒の透過度 */
    -webkit-backdrop-filter: blur(12px) !important; /* ぼかし量（Safari用） */
    backdrop-filter: blur(12px) !important; /* ぼかし量 */
}
@media not all and (min-width: 960px) {
    .l-header {
        background-color: rgba(0, 0, 0, 0.5) !important; /* 黒の透過度 */
        -webkit-backdrop-filter: blur(12px) !important; /* ぼかし量（Safari用） */
        backdrop-filter: blur(12px) !important; /* ぼかし量 */
    }
}

貼り付けたら「公開」をクリックして完了です！

ステップ3：自分好みに微調整する方法（応用）

「もう少し透けさせたい」
「もっとボカしたい」
という場合は、コード内の数値を少し書き換えるだけで簡単に調整できます。

① 透け具合（透明度）を変える

rgba(255, 255, 255, 0.65) の一番右の数字（0.65）を変更します。

0.4 などの小さい数字にする＝ もっと透ける（透明に近づく）
0.8 などの大きい数字にする＝ あまり透けない（すりガラスが濃くなる）

② ぼかしの強さを変える

blur(12px) の数字を変更します。

20px など大きくする ＝ 後ろの文字や画像が強くボケる（すりガラス感がアップ）
5px など小さくする ＝ 後ろがハッキリ見える

まとめ：一気におしゃれなサイトに変身！

追従ヘッダーをすりガラス風にすることで、スクロールしたときに後ろのコンテンツが
「ふわっ」と透けて見え、サイト全体に高級感が出ます。

スマホで見たときもバッチリ反映されるので、ぜひあなたのサイトでも試してみてくださいね！

ちなみに当サイトのCSSはこちらです！

/* モバイルヘッダー　すりガラス風 */
.l-fixHeader {
    background-color: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}
@media not all and (min-width: 960px) {
    .l-header {
        background-color: rgba(255, 255, 255, 0.2);
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
    }
}

よかったらシェアしてね！

URLをコピーしました！