SWELL

SWELL|追従ヘッダーを透明にする・背景をぼかす

【SWELL】追従ヘッダーを透明にする・背景をぼかすカスタマイズ(モバイルも可)

SWELLの追従ヘッダーを透明にしたり、すりガラスのようなぼかした透明背景にする方法を解説します。

追従ヘッダーを透明にするカスタマイズ

まずは透明にするカスタマイズから紹介します。

PCの場合

PCの場合はSWELLのカスタマイザーで透明度を変えることができます。

SWELLのカスタマイザーでヘッダーの透明度を変更
外観 > カスタマイズ > ヘッダー > ヘッダーの追従設定

CSSのopacityと同じで1が不透明、0で透明になります。

スマホの場合

スマホの場合はCSSで透明にする必要があります。
下記のCSSをスタイルシート(style.css)か、カスタマイズの追加CSSに貼り付けましょう。

.l-header{
	background: rgba(255,255,255,0); /*背景色*/
  box-shadow:none; /*影を消去*/
}
  • 2行目:backgroundでrgba値を指定。お好みで変更してください
  • 3行目:box-shadow: noneにして影を消去。半透明にする場合は行をまるごと削除してください

追従ヘッダーの背景をぼかすカスタマイズ

ついでに背景をぼかしてすりガラス調にするCSSも紹介します。

完成イメージとしてはこんな感じです。

事前準備

背景をぼかすとヘッダーとコンテンツの境界が曖昧になるので、カスタマイズの「ヘッダー境界線」を"線"に設定しておくことをおすすめします。

SWELLのカスタマイザーでヘッダーの境界線を変更

CSS

使用するのはCSSのbackdrop-filter。値を指定するだけで背景をぼかしてくれる便利なプロパティです。

/*** PCの追従ヘッダー ***/
.l-fixHeader::before {
    opacity: 0.64; /*背景を透明に*/
}
.l-fixHeader{
  backdrop-filter: blur(5px); /*背景をぼかす*/
	-webkit-backdrop-filter: blur(5px);
}
/*** モバイルの追従ヘッダー ***/
.l-header{
	background: rgba(255,255,255,0.64); /*背景色*/
  backdrop-filter: blur(5px); /*背景をぼかす*/
	-webkit-backdrop-filter: blur(5px);
}
  • 11行目のrgba()の値を変えることで、背景色や透明度を変更できます(モバイル)
  • 6~7, 12~13行目のblur()の値を変えることで、ぼかし度合いを変更できます

コンテンツの背景色などを考慮して、ぼかし度合いや透明度を調整してください。ヘッダー内の文字がちゃんと見える程度にしておきましょう。

ちなみに、3行目のopacityはPCのヘッダー色(rgba)です。まとめて管理できるように書いているだけなので、カスタマイザーで透明度を指定する場合は削除して大丈夫です