SWELL:CSSで差を付ける磨りガラス風ヘッダー

この記事では、WordPressテーマ「SWELL」において、CSSを追加して磨(す)りガラス風のヘッダーデザインにする方法を解説します。

また、この記事における解説は、「SWELL」バージョン: 2.6.6.1で動作を確認しています。

お使いの「SWELL」のバージョンにより、記事中のコードをコピペしても期待どおりに動作しない場合もありますのでご注意ください。

磨りガラス風ヘッダー

完成イメージは以下のとおりです。

このように、ヘッダーが磨りガラスになったように、ヘッダー下のコンテンツをうっすらぼかす効果を付けてみたいと思います。

カスタマイザーによる設定

まず、追加のCSSを記述する前に、「SWELL」のカスタマイザーでベースとなる設定を行います。

カスタマイザーの「ヘッダー」の中の項目を以下のように設定します。

ヘッダー境界線: なし
ヘッダーの背景を透明にするかどうか: しない
ヘッダーを追従させる: PC、SP共にチェックを入れる
追従ヘッダー(PC)の背景不透明度: 0

本記事では「SWELL」デフォルトの追従ヘッダーを使用していますが、それ以外にヘッダーを固定する方法に関しては、こちらの記事もあわせてご覧ください。

CSSを記述する

カスタマイザーの「追加CSS」、もしくは子テーマでカスタムしている方は独自のCSSファイルに、以下の記述を追加します。

/* ヘッダー＆追従ヘッダー */
.l-header,
.l-fixHeader {
  background-color: rgb(255, 255, 255, .6);
  box-shadow: 0 2px 4px 0 rgb(0, 0, 0, .1);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

順番に解説していきます。

1行目の.l-headerは、PC用の(通常の)ヘッダー、およびスマホ用の追従ヘッダーのClass名です。
2行目の.l-fixHeaderは、PC用の追従ヘッダーのClass名です。
この二つを[,]で並べて同様の効果を指定しています。

3行目のbackground-color: rgb(255, 255, 255, .6);は、ヘッダーの背景色として、RGB値で色と不透明度を指定しています。最初の255, 255, 255は、HEX値でいうところの#ffffff（白）を表しています。
.6は不透明度を指定していて、0が完全に透明となるので、0〜1の数値で指定します。
つまりこの場合は、白の半透明という指定になりますね。

HEX値からRGB値への変換はこのようなサイトを参考にしてみてください。