WordPressテーマ「SWELL」をカスタマイズ!ヘッダーをもう少し浮かせる方法。

2019 12/01
WordPressテーマ「SWELL」をカスタマイズ!ヘッダーをもう少し浮かせる方法。

WordPressテーマ「SWELL」にはテーマカスタマイザーのデザイン・レイアウトにてサイトの質感を
フラット」か「立体」に変更することができます。
立体を選択するとヘッダーも少し浮いたような立体感が出るのですが、
個人的には「もう少し浮いてほしい」と思ったので記事にしました。
今回はその手順をご紹介していきます。

目次

SWELLのヘッダーを浮かせる方法

サイトのデザインを変更するのは「CSS」という言語を使っておこないます。
CSSについてここでは詳しく説明をしませんが、サイトに影響が出ない手順で説明をしていきますね。

テーマカスタマイザーを開こう

画像

まず安全にCSSを書くためにテーマカスタマイザーを開きます。
テーマカスタマイザーを開いたら、左側のメニューの「追加CSS」をクリックしてください。

画像

すると左の画像のような表示がされるので
赤丸を囲んだところに「CSS」を記載していきます。
記載するCSSは下記に書きますね。

ヘッダーをもう少し浮かせるCSSコード

では先ほどの赤丸の所に以下のコードをコピー&ペーストしてください。

#header {
    box-shadow: 0 2px 6px rgba(0,0,0,.2);
}

最後に「公開」をクリックしたら保存されます。

CSS「box-shadow」の補足

box-shadowは枠に対して「影」を付けるのに、よく利用されます。
以下が記載例とその動きです。

◯◯ {
	box-shadow: 左右の向きpx  上下の向きpx ぼかしpx 広がりpx 色 内側指定;
}

例 .box {box-shadow: 2px 2px 4px -2px gray inset}

「ヘッダーを浮かせる方法」のまとめ

いかがでしょうか。
ヘッダーの浮かし方1つでもサイトの雰囲気は変わってきます。
ちょっとした事ですが
ぜひ、参考にしてみてくださいね。

この記事が気に入ったら
フォローしてね!

目次
目次