WordPress初心者の方も、愛用者の方も、
楽しく学べるフォローサイト!

WP-Master.club ヘッダーロゴ

ヘッダー部分を固定し、薄く影を付けるCSS

縦にスクロールしてもヘッダーを固定した場合、「ここはヘッダーだよ」という事がビジュアル的にわかると、ユーザビリティ的に良いですよね。

ヘッダーの背景に薄く色を付けるなどの方法もありますが、今回はヘッダーの下に薄く影を付けて表現したいと思います。

CSSは、ヘッダー部分に下記のbox-shadow部分を付け足すだけ。

 

完成はこんな感じになります。

若干のシャドウが付いているのが分かるかと思います。

サイトも見やすくなりますので、是非お試しください。