【SWELL】PC・SPヘッダー背景を半透明ガラス・すりガラス化する方法

当コンテンツには広告が含まれる場合があります。

2026-02-132026-02-14

CSSのカスタマイズは、自己責任でお願いいたします。

このカスタマイズは、SWELLのヘッダー背景を「PC・SP」ともに常に「すりガラス化」するものです。

【反映条件】

外観＞カスタマイズ＞ヘッダー＞ヘッダーの背景を透明にするかどうか＞「する」に変更

外観＞カスタマイズ＞ヘッダー＞追従ヘッダー（PC）の背景不透明度＞「０」に変更

外観
- カスタマイズ
  - CSS追加
    - 以下をコピペ

/* =======================================
  ヘッダー すりガラス（PC・SP
SWELL設定条件：背景透明＆追跡透明０
========================================*/

:root{
  --glass-blur-pc: 6px;
  --glass-blur-sp: 6px;

  --glass-bg-pc: rgba(255, 255, 255, 0.50);   /* PC追従：白ガラス */
  --glass-bg-sp: rgba(255, 255, 255, 0.50); /* 通常/スマホ：白ガラス */
}

/* =========================
  PC追従ヘッダー（ヘッダーメニュー）
========================= */
.l-fixHeader{
  background-color: var(--glass-bg-pc) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur-pc)) !important;
  backdrop-filter: blur(var(--glass-blur-pc)) !important;
}

/* =========================
  通常ヘッダー（スマホ含む）
========================= */
.l-header{
  background-color: var(--glass-bg-sp) !important;
  -webkit-backdrop-filter: blur(var(--glass-blur-sp)) !important;
  backdrop-filter: blur(var(--glass-blur-sp)) !important;
}

＼SWELLのWEB制作代行をお承りしています／

事例・デモサイト一覧