CSSだけで装飾してみました。
R'styleさんの企画、ウチも参加してみることにしました。
企画内容
R'style が考えた、若干軽量 XHTML を、チョットした条件の下、CSS だけでステキなテンプレートに仕上げてください。
R'style Lab in FC2 - CSS で装飾してください。
いつも自分の作りやすいようにHTMLを書いているので、他の方の書かれたHTMLをほとんど変更無しでCSSだけで飾り付けというのは、生まれて初めての経験でした。
こんなにシンプルなHTMLでも、やってやれないことはないんだなぁ〜とわかって、すごーく勉強になりました。
何しろ条件が色々あったので、いつも作っているような雰囲気にできるのか？という不安がありましたが、まあまあいつもの「べーじゅカラー」にできたかな？
とは言っても、画像を使えば自分のカラーを出すのはわりと容易なことです。
問題はその画像をどう組み込むか...。そして、限られた範囲でのデザイン。
途中で風邪引いてテンションが変わってしまったので、このアタリで終了にします。
今回、得たモノはこれからすごく役に立ちそうです。
また同じような企画があったら、今度はもう少し凝ったモノも作れるかな〜？
他の方が同じHTMLでどんなものをデザインされたのか、R'styleさんのところでぜひぜひご覧下さい。
R'styleさんからの条件は以下の通りです。
チョットした条件この条件下で変更した部分は以下の通りです。
- タグの総数を増やしてはいけない
（ただし、減らすことに制限なし）- 他の部分でタグを削れば、その同数タグの追加は可
- xml 宣言、head 要素 内などは上記条件の対象外。
- 一般的なブログとしての機能は確保してあること
（コメント、トラックバック、ナビゲーション、なるべくトップに記事）- テキスト部分、及び属性などは全て自由に編集可
（タグ以外の編集に制限なし）- RSS Feed、管理者ページへのリンクなどの記述位置・有無は自由。
- id 属性は 10 個まで任意で追加可
- class 属性は 5 種類まで任意で追加可
- CSS で使用する画像サイズに制限なし
【追加id 属性】
<div id="container">
<p id="introduction">
<div id="layout_main">
<dl id="layout_side">
<p id="layout_footer">
※プラグイン対応部分を追加しました。
（これは、作成中にプレビューをした時、自ブログがプラグインオンになっていても確認が出来るようにしたものなので、設定は中途半端です。）
【プラグイン対応時追加id 属性】
<div id="layout_side">
【追加class 属性】
<div class="entry">
<ul class="entry_state">
<ul class="entry_navi">
<h4 class="navi">
<%topentry_body>を囲んでいた<div>を削除し
<!--topentry-->を<div class="entry">で囲みました。
キレイ
冬の澄んだ空気の感じがありますね。
点線が効果的に使われていて、赤のアクセントが好きです。
こういうクリスマスもあるんですね。（ホワイトクリスマス？）
> こんなにシンプルなHTMLでも、やってやれないことはないんだなぁ〜とわかって、すごーく勉強になりました。
私としてはこういう感想が一番嬉しいです＾＾