スタイルシートいじってみました

gooブログのテーマサロンに gooブログのスタイルシートいじってみました というテーマがあったので、さっそく虎を発射してみました。

……って、これだけじゃ記事として成り立たないですね。ここはひとつ、このテンプレについて少し語ってみましょう。


まず、トップのところ。通常のカスタムブルーとは一味違うんですが、何が違うでしょう？　そうです、BLOGタイトルとBLOGの概要の上下の位置関係が逆転しているんです。これは.bTitleの位置設定をTOP:45pxに、.bDescの位置設定をbottom:15pxと変更したことにより得られたデザインです。実はこうなったのは単なる偶然なんですけどね。偶然出来上がってしまうもまた良し、です。

それからトップのグラデーション背景ですが、これは背景にフィルターを掛けることで実現しています。.headerLight に
filter:progid:DXImageTransform.Microsoft.Gradient(startColorstr='#FF85bcf4', endColorstr='#FFffffff', gradientType='0');
を加えることで、画像を使わずにこのようなグラデーションを表現する事ができるわけです。ただしIEではOKなんですが、NNだとダメみたいですね。ここのところは画像にするかこのままでいくか、悩みどころなんですよねぇ。

さらにリンクの背景も弄ってあります。BLOG内の全てのリンクは触ると背景に色がつき、カーソルが十字に変わるようにしてあります。意味は……特に無いです。強いて言えば単なる下線なのかそれともリンクなのか、区別ができるようになったというところでしょうか。

あとは、お決まりのスクロールバーの配色を変えたのと、記事の区切り線をグラデーションに変えたところくらいでしょうか。

以上の作業をだいたい３時間くらいで終わらした結果がこのデザインです。Remとしては、結構な力作だと思ってますが、みなさんはどう感じましたか？