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

 

 

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

 

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

 

【反映条件】

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

外観>カスタマイズ>ヘッダー>追従ヘッダー(PC)の背景不透明度>「0」に変更

 

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

 

/* =======================================
  ヘッダー すりガラス(PC・SP
SWELL設定条件:背景透明&追跡透明0
========================================*/

: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制作代行をお承りしています/

事例・デモサイト一覧

 

メディア

クリニック

レストラン

フィットネスジム

沖縄庭園デモサイト

コーポレートサイト

和食料理店

ブログ

 

 

  • URLをコピーしました!
目次