【SWELL】追従ヘッダーの背景を半透明ガラス風に

当サイトでも使用しているWordPressテーマ「SWELL」の追従ヘッダーの背景を半透明ガラス風にする設定方法です。

追従ヘッダーの設定

外観＞カスタマイズ＞ヘッダー＞追従ヘッダー（PC）の背景不透明度を “0” に設定

CSSを “style.css” に追加

外観＞テーマファイルエディタ＞style.cssに下記の内容を追加。

/* ヘッダーメニュー */
.l-fixHeader {
	background-color: rgba(0, 0, 0, 0.2); /* 背景色・透過 */
	-webkit-backdrop-filter: blur(15px); /* ぼかし具合 */
	backdrop-filter: blur(15px); /* ぼかし具合 */
}

以上で追従ヘッダーの背景をガラス風にカスタマイズする方法です。