SWELL:CSSで差を付ける磨りガラス風ヘッダー

この記事では、において、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値への変換はこのようなサイトを参考にしてみてください。

4行目のbox-shadow: 0 2px 4px 0 rgb(0, 0, 0, .1);は、box-shadowとして影の効果を付与しています。
影の太さや濃さはお好みで指定してください。

5行目のbackdrop-filter: blur(6px);は、ヘッダーの下のコンテンツに対するぼかし効果を指定しています。
数値が大きくなるほどぼかし量が大きくなります。
6行目の記述は、backdrop-filterに対するベンダープレフィックスとなり、Safariブラウザでこの効果を効かせるためのおまじないです。

これらの記述を追加することで、PCとスマホ用の追従ヘッダーを、磨りガラスのようなデザインにすることができます。

スマホ用の磨りガラス風ヘッダー

注意点

一つ注意点として、このbackdrop-filterというぼかし効果を持ったプロパティは、現状Firefoxブラウザでは機能しません
したがって、前項で紹介したCSSコードを記述した場合、Firefoxブラウザのみ以下のような見え方となります。

Firefoxブラウザでの見え方

このように、ぼかし効果が効かないため、白の半透明のみが反映された状態となります。

そのため、background-color: rgb(255, 255, 255, .6);で指定した色と不透明度の数値によっては、視認性が低下する場合があるため、不透明度の下げ過ぎにはご注意ください(おすすめは0.8か0.9くらい)。

Firefoxブラウザでの見え方に注意しつつ、色やぼかし具合をカスタムして、いろいろな磨りガラスヘッダーを試してみてください!

この記事がお役に立てたのならシェアをお願いします!
  • URLをコピーしました!
目次