qooqカスタマイズ:ヘッダーに立体っぽく影をつける方法

2019年6月6日

カスタマイズ

t f B! P L

こんばんは~!

昨日は記念すべき20記事目ったのでカスタマイズはお休みだったんですが、今日はがっつりやりますよ~っ!しゅっしゅっしゅっ!(ボクサーのパンチの音)

今回は(しゅっ)bloggerのテンプレート「qooq」の(しゅっ)ヘッダーを立体っぽくする、影をつけるカスタマイズですっ♪(しゅっしゅっ)

カスタイマイズイメージ



↓↓↓ これが! ↓↓↓



こうなる!
影があるとなんか立体ぽくなってかわいくなりますよね。

ん?かわいくはない?

…そんなことは…ないっ!笑

カスタマイズ方法

はいっ!ということでぇ~…。

こうれいのコピペタイムっ!

カスタマイズのcssにこれをぺりぺりっと貼りつけてねっ♪
「#bbb0bb」の部分は影の色。あかーい影とかもできるし、もっとまっくろな影とかもできる!

というか…コピペするだけで影のソースコード作ってくれるやつがあってこれ使うとべんり。
作成者さんにかんしゃかんしゃですね~♪
https://www.cssmatic.com/box-shadow

↓↓↓ コピペ ↓↓↓
#header{
  box-shadow:0px 2px 2px 0 #bbb0bb;
}
↑↑↑ コピペ ↑↑↑

カスタマイズ終了!

ちなみに…

わたしはヘッダーとナビゲーションの位置をまるまるいれかえてるので、#headerにじゃなくって#navigationに上のソースコードをはりつけてます。
ヘッダーとナビゲーションの位置をいれかえる方法

わたしとおんなじようにqooqのヘッダーとナビゲーションの場所をいれかえてる方は、こっちをコピペでお願いしますっ。
↓↓↓ コピペ ↓↓↓
#navigation{
  box-shadow:0px 2px 2px 0 #bbb0bb;
}
↑↑↑ コピペ ↑↑↑

おわり

ブログランキング参加中!

このブログを検索

QooQ