今回は、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の枠線を加えると、こんなイメージになります。
もし、QooQのサイドバーボックスをカスタイズしたいときは、
#sub-content .widgetを使います。
最初、sidebar-boxとかいろいろ試したのですが、変更できなかったため、スタイルシートを確認したところ、サイドバーボックスは、上記に書かれたものが使用されていました。
なので、Cocoonなど、他のですが、テーマを使っている場合は、また書き方が違うため、調べる必要があります。(;^ω^)…。cocoonのカスタマイズの話は、もう少し後で書く予定にしています汗。
QooQ サイドバーボックスに影を付ける場合
上下左右対称に影をつけると、フェミニンな印象ある影になるかと思います。サルワカくんのCSSを参考にしています。※
上下左右対称の影をサイドバーボックスにつけるときのソースコード(QooQの場合)
#sub-content .widget {
box-shadow: 0 0 8px gray;
}
他の影のコードは、サルワカくんの記事が参考になります。
まとめ
コピペでできるので、もし気に入ってもらえた場合、参考にして使ってみてくださいね＾＾
コピペで使えない場合は、テンプレートのスタイルシートを覗いてみると、だんだんわかってくるようになります。
コメント