bloggerブログのカスタマイズ サイドバーの背景色を変更する

このBloggerブログはあまりテンプレのカスタマイズをしてないのだが、
ちょっと思うことがあり、サイドバーを右から左に変えてみた。

そうすると、右の時には気にならなかったが、サイドバーと本体部分の境目がないせいで、
本文が読みづらく感じた。

ということで、サイドバーに背景色を付けられないかと模索。
教えて！グーグル先生！




■必要なCSSを追加

検索してみたところ、BloggerのブログはCSSを直接触るのではなく、
「追加」という形で情報を追記していく方法をとっているらしい。

管理画面から、テンプレート　→　カスタマイズ　→　上級者向け　と進み
「CSSを追加」をクリックし、「カスタムCSSを追加」に追加したいCSSを追加するとのこと。


で、ネットの有能な先達のアドバイスに従うと、追加すべきコードは以下。

.column-right-outer{background-color:#E6E6FA }

(※もちろん#の部分は任意のカラー指定)


■右サイドバーと左サイトバーの違い

上記のコードのままだと、おそらく右サイドバーの背景色変更になるのだろう。
現在の本ブログは左サイトバーなので、このままだとうまくいかない。
で、classのrightをleftに変えてみて実験。

※左サイトバーの背景色変更

.column-left-outer{
background-color:#E6E6FA }

一応成功。
ただしこれだと、サイドバー全体ではなく、サイドバーの中にコンテンツがある部分だけ
色が変更されることになる。つまり、サイドバー内の一番下のコンテンツから下は、
また真っ白になるわけだ。


■もう一声。サイドバー全体の色を変えるには？


できれば、サイドバー全体が色変わったほしいなあ、ということで、
諦めてソースを覗いてみることに。
※最初からそうすれば良いのだがBloggerのソースはややこしくて気が滅入る。

で、divの構成をおいかけていくと、上記の「column-left-outer」の上のdivとして
「fauxcolumn-left-outer」があることがわかった。
というわけで、追加するcssを以下に変更。

.fauxcolumn-left-outer{
background-color:#E6E6FA;}

試してみてところ、サイドバーを全体 できた。
よって解決！

ウェブログ入門－BloggerとMovable Typeではじめる【CD-ROM付】