QooQ サイドバーボックスに枠線・影をつける方法

ブログ構成を考えるイメージの画像 Blogger

スポンサーリンク
今回は、Blogger無料テンプレートのサイドバーボックスに、CSSだけで枠線をつける方法についてご紹介したいと思います。


サイドバーボックスの枠線カスタマイズ QooQの場合


今回、このブログと同じように背景カラーや、サイドバーボックスなど、サイト全体を白にしたいと思いました。

QooQ初期設定は、デコデコ感なくデザイン全体が平面感をめいいっぱい演出したイメージで作られているため、枠線が使用されていません。
多分、今の主流がこのスタイルなのかもしれないですね^^


QooQの背景カラーや、サイドバーボックスに設定されているカラーは、「Bloggerテーマデザイン」画面で変更可能です。

当然、背景カラーとサイドバーボックスカラーを同じ色にすると、境界線がなくなってしまいます。そのあたりは、カスタマイズでカバーするといいかな?と思います。


QooQのサイドバーボックス枠線ソースコード


コピペ※で変更可能です。
※貼り付ける場所は、QooQ テンプレート全体 フェードインのCSSカスタマイズを参考にしてくださいね。

枠線ソースコードは、参考サイトhttp://customize.komaxy.com/article/177141086.html を参考にさせてもらいました。QooQ専用にすこしだけ、手を加えています。


/*サイドバーボックス枠線CSS*/

/*** サイドバーボックス枠線 ***/
#sub-content .widget {
border: 1px solid #A7B3BE;
background-color: #FFFFFF;
padding: 8px;
color: #79828B;
}
/*サイドバーボックス枠線CSSここまで*/


QooQのテンプレートに、太さ1pxの枠線を加えると、こんなイメージになります。


Blogger無料テンプレートQooQのサイドバーボックスに枠線をつけたときのイメージ
枠線の太さを1pxにすると、目立たない境界線が作れます。


もし、QooQのサイドバーボックスをカスタイズしたいときは、

#sub-content .widget 

を使います。


最初、sidebar-boxとかいろいろ試したのですが、変更できなかったため、スタイルシートを確認したところ、サイドバーボックスは、上記に書かれたものが使用されていました。

なので、Cocoonなど、他のですが、テーマを使っている場合は、また書き方が違うため、調べる必要があります。(;^ω^)…。cocoonのカスタマイズの話は、もう少し後で書く予定にしています汗。


QooQ サイドバーボックスに影を付ける場合


上下左右対称に影をつけると、フェミニンな印象ある影になるかと思います。サルワカくんのCSSを参考にしています。※


上下左右対称の影をサイドバーボックスにつけるときのソースコード(QooQの場合)


#sub-content .widget  {
  box-shadow: 0 0 8px gray;
}
Blogger無料テンプレートQooQのサイドバーボックスに影をつけたときのイメージ
緩い境界線って感じですよね


他の影のコードは、サルワカくんの記事が参考になります。


【CSS】box-shadowで影をつける方法とサンプル集
CSSのbox-shadowを使って影をつける方法と、コピペで使えるCSSサンプルをいくつか紹介します。向きやぼかし方、色の変え方まで詳しく解説しています。


まとめ


コピペでできるので、もし気に入ってもらえた場合、参考にして使ってみてくださいね^^

コピペで使えない場合は、テンプレートのスタイルシートを覗いてみると、だんだんわかってくるようになります。


スポンサーリンク


   にほんブログ村 ブログブログ ブログノウハウへ

Blogger
この記事を書いた人
berry

2019年、現在アラフィフで外でパートを再開した主婦です。ブログ執筆歴は長く、Wordpressは4年ほどになります。

最近、海外ドラマをAmazonプライムで観まくっています。主人にそそのかされてモンストも少々。アニメは名探偵コナンが好きで、漫画はのだめカンタービレがお気に入り。

ブログの副収入10万円夢見るようになりました。

berryをフォローする
berry105

コメント