Nov 06, 2006

「css Zen Garden」

いろんな人がブログを触ってるわけで、そのほとんどの人が「そのブログのデザインを好きに変えられますよー」ってのは知っておられることやと思います。あらかじめ用意されてる中から選んでたり、自分で作成した画像を使用してみたり、いろんな方法で変えてると思うわけです。で、「ブログのデザインって結局何を変えてるの?」ってなことを、もうちょっと知りたいぞってな方にお勧めなのが「css Zen Garden」なのであります。

WEBの見せ方ってのも日々変わっておりまして、一昔前まではHTMLでゴリゴリにテーブルタグを組み立てて作っておったのでありますが(ワタクシのHPも)、いつのまにか今日日のWEBはそんな作成の仕方が流行っておりません。ブロックごとにテキストや画像を用意して、CSSファイル(スタイルシート)ってやつで、それをどう配置するかを設定するって方法に変わってきておるのでありますね。「これの下にこれ」とか「これの横にこれ」とかね。

今は各ブログがそーなってるわけで(「My Yahoo!」とかもね)、つまり「見せたい情報」と「画面上のデザイン」を完全に分けて作っておくと「なかなか便利やんかいさ」ってな方法なのであります。「書き込み内容」と「デザインと配置」ってのが別ファイルで出来てるんで、「デザインと配置」担当の「CSSファイル」ってやつを変えることが、「ブログのテーマ変更」ってやつなのですね。

で。前置きがながーくなりましたが「css Zen Garden」です。「View All Categories」ってとこ見ると、いろんなデザインのページが見れるのでありますが、これが実は「見せたい情報(HTMLファイル)」が全部同じであります。で、「デザインと配置」担当のCSSファイルだけを変更したものなのですね。同じ情報でも「CSSファイル」を変えるだけで「こんだけ別もんに出来ちゃうのよーん」ってな「CSSはすごいぞ」な投稿サイトであります。

日本語で翻訳されたこのページの趣旨はここにありますが、「変えちゃだめっすよ」な固定のHTMLファイル(決まった情報がブロック化されてるわけやね)が予め用意されてて、それを元にみんながCSSファイルと画像ファイルでデザインしまくり、「こんなにしちゃいましたー」って世界中のデザイナーさんが投稿したおしてるわけです。もうねー、圧巻やねー。「ひょえー」であります。サムネイル集作ってる人もいて、これまた一発でいろいろ見れて便利ー。すごーい。

こんなん見るとねー、またワタクシったらHPを「全部作り変えたろかしらー」とか思っちゃうわけっすよね。ブログもねー、どーしよっかなー。どんなことにしたろっかなー。ま、ワタクシの野望は置いといて「自分のブログをもうちょっと何とかしてみたい」とか思われてる方、いろんなネタが詰まってるんで覗いてみると楽しいっすよ。

※ 本好きのワタクシは、このサイトの中のデザインのいくつかをピックアップして、中身を詳しく解説してくれてる本(こいつ→)まで購入してしまいましたが、いやー、これがまた一瞬見ただけではわからん、裏技とか細かい工夫も紹介されててですね。なかなか楽しいっす。

この本でも紹介されてますが、Firefoxを入れてる人は「Web Developer」ってプラグインを入れてみるのもお薦めっす。表示してる画面の情報を、視覚的にわかりやすく表示・解析してくれちゃったりするのであります。例えばこのブログの「ブロック要素を枠表示」とか「要素名を表示」とかしてみると、←のようなことになるわけっすよ。ソース見てもわかるんやろけど、目で見ると一目瞭然で更にわかりやすいっすね。

更に「CSSを変更」ってやると、勝手にCSSを変えてデザイン変更させちゃったりも出来るので、ブログデザインとかを好きに変えて遊ぶことも可能やったりするっすよ。自分とこを変えるもの楽しいけど、他人のとこのを勝手に変えて遊ぶのもこれまた楽しそー。

※ ってなわけで、影響をすぐ受けるワタクシは、早速デザインを変えてみちゃったりしたのでありました。わーい、それなりに出来たでするーヽ(´ー`)ノ

Edit this entry...

wikieditish message: Ready to edit this entry.
















A quick preview will be rendered here when you click "Preview" button.