Blogger #6:デザイン変更 (3)

Bloggerのデザイン、現在は Ethereal Humming Birds Two Tone というテンプレートを使っているが、
もう少し自分好みのデザインへ変更したいと思う。

※ 前回記事:#5:デザイン変更 (2)


今回は オレンジ系のグラデーションをグレー系のグラデーションへ変更してみる。

背景色の変更

グラデーションの描画は テンプレートxmlの Content で始まる箇所の body { … background: $(body.background); の記述で行っている模様。
body.backgroundの定義は、Variable name="body.background" ~ の所で https://resources.blogblog.com/blogblog/data/1kt/ethereal/birds-2toned-bg.png のイメージで行っている。

手っ取り早く body の所の background: $(body.background) の記述を削除することで、グラデーションは無効となり、背景は白の単色となった。

引き続いて グレー系のグラデーションですが bodyの所にCSSで実装する。
 background: -moz-linear-gradient(left, #FFFFFF, #AAAAAA); 
background: -webkit-linear-gradient(left, #FFFFFF, #AAAAAA); 
background: linear-gradient(to right, #FFFFFF, #AAAAAA);
本当は斜めにグラデーション(top left)をかけたかったが、縦スクロールするとかっこ悪くなってしまったので、横方向のグラデーション(left)とした。


Blogger

0 件のコメント:

その他の記事