Articles
CSS で装飾してください。
R'style の思いつき企画。
（っていうか、ほぼ「css Zen Garden」なんですけど。）
この企画は終了しました。第２弾があるのでそちらをどうぞ。
CSS で装飾してください。 vol. 2.0
- 企画内容
-
R'style が考えた、若干軽量 XHTML を、チョットした条件の下、CSS だけでステキなテンプレートに仕上げてください。
※ 装飾対象はトップページ（プラグイン無効状態）
プラグインタグ（<!--plugin--><!--/plugin-->）内はご自由に。テンプレートが完成したら、当記事へトラックバックで宣伝してください。少なくとも R'style が喜んで拝見しに行きます
- チョットした条件
- タグの総数を増やしてはいけない
（ただし、減らすことに制限なし） - 他の部分でタグを削れば、その同数タグの追加は可
- xml 宣言、head 要素 内などは上記条件の対象外。
- 一般的なブログとしての機能は確保してあること
（コメント、トラックバック、ナビゲーション、なるべくトップに記事） - テキスト部分、及び属性などは全て自由に編集可
（タグ以外の編集に制限なし） - RSS Feed、管理者ページへのリンクなどの記述位置・有無は自由。
- id 属性は 10 個まで任意で追加可
- class 属性は 5 種類まで任意で追加可
- CSS で使用する画像サイズに制限なし
以上の条件は全てトップページのみに限る。
テンプレートとする為のトップページ以外への工夫は自由。- タグの総数を増やしてはいけない
これくらい条件を設けても恐らく似たようなモノばかりにはならないと思っているので、たくさんのトラックバックを期待しています。
ちなみに、[simple_code] と [cyberspace_behind] が上記条件下で私が作成したモノです。
続きは XHTML ソースを載せておきます。
PS. 参加された方はこの機会に「css Zen Garden」のデザインも考えられてはいかがでしょう？主旨が若干異なりますし、面白いと思います。
ちなみに、次回はある理由から、css Zen Garden のような XHTML を考えようかと思っています。
<?xml version="1.0" encoding="EUC-JP"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=euc-jp" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title><%blog_name><!--not_index_area--> - <%sub_title><!--/not_index_area--></title>
<link rel="stylesheet" type="text/css" href="<%css_link>" media="all" title="default" />
<link rel="alternate" type="application/rss+xml" href="<%url>?xml" title="RSS" />
</head>
<body>
<div>
<h1><a href="./" title="<%blog_name>"><%blog_name></a></h1>
<p><%introduction></p>
<h2>logs</h2>
<div>
<!--topentry-->
<h3 id="entry<%topentry_no>"><a href="<%topentry_link>" title="<%topentry_title>"><%topentry_title></a></h3>
<div><%topentry_body>
<!--more_link-->
<p><a href="<%topentry_link>#more" title="「<%topentry_title>」の続き">...続きを読む</a></p>
<!--/more_link-->
<!--more-->
<div id="more"><%topentry_more></div>
<!--/more-->
</div>
<ul>
<li><%topentry_day>/<%topentry_month>/<%topentry_year></li>
<li><a href="<%topentry_category_link>" title="カテゴリ「<%topentry_category>」の記事一覧"><%topentry_category></a></li>
<li>
<!--allow_tb-->
<a href="<%topentry_link>#tbs" title="「<%topentry_title>」へのトラックバック">トラックバック (<%topentry_tb_num>)</a>
<!--/allow_tb-->
<!--deny_tb-->
トラックバック (-)
<!--/deny_tb-->
</li>
<li>
<!--allow_comment-->
<a href="<%topentry_link>#coms" title="「<%topentry_title>」へのコメント">コメント (<%topentry_comment_num>)</a>
<!--/allow_comment-->
<!--deny_comment-->
コメント (-)
<!--/deny_comment-->
</li>
</ul>
<!--/topentry-->
<!--trackback_area-->
<div id="tbs">
<h4>トラックバックURL</h4>
<p><%trackback_url></p>
<h4>この記事へのトラックバック</h4>
<!--trackback-->
<h5 id="trackback<%tb_no>"><a href="<%tb_url>" title="「<%tb_title>」のトラックバック発信元"><%tb_title></a></h5>
<blockquote cite="<%tb_url>"><%tb_excerpt></blockquote>
<ul>
<li><%tb_day>/<%tb_month>/<%tb_year></li>
<li>From : <%tb_blog_name></li>
</ul>
<!--/trackback-->
</div>
<!--/trackback_area-->
<!--comment_area-->
<div id="coms">
<h4>この記事へのコメント</h4>
<!--comment-->
<h5 id="comment<%comment_no>"><%comment_title></h5>
<p><%comment_body></p>
<ul>
<li><%comment_day>/<%comment_month>/<%comment_year></li>
<li><%comment_mail+name> ♦<%comment_trip></li>
<li><%comment_url+str></li>
<li>[ <a href="<%comment_edit_link>" title="コメントの編集">編集</a> ]</li>
</ul>
<!--/comment-->
<form method="post" action="./" id="comment_form" name="comment_form">
<fieldset>
<legend>コメント投稿フォーム</legend>
<input type="hidden" name="mode" value="regist" />
<input type="hidden" name="comment[no]" value="<%pno>" />
<label for="name"><span>Name</span><input id="name" type="text" name="comment[name]" size="30" value="<%cookie_name>" /></label>
<label for="subject"><span>Subject</span><input id="subject" type="text" name="comment[title]" size="30" value="" /></label>
<label for="mail"><span>Mail</span><input id="mail" type="text" name="comment[mail]" size="30" value="<%cookie_mail>" /></label>
<label for="url"><span>URI</span><input id="url" type="text" name="comment[url]" size="30" value="<%cookie_url>" /></label>
<label for="comment"><span>Comment</span><textarea id="comment" cols="50" rows="5" name="comment[body]"></textarea><br /><script type="text/javascript" src="http://blog1.fc2.com/load.js"></script></label>
<label for="pass"><span>Password</span><input id="pass" type="password" name="comment[pass]" size="20" /></label>
<label for="himitu"><span>Secret</span><input id="himitu" type="checkbox" name="comment[himitu]" />管理者にだけ表示を許可する</label>
<p><input type="submit" value="送信" /></p>
</fieldset>
</form>
</div>
<!--/comment_area-->
<!--edit_area-->
<h4>投稿したコメントの編集</h4>
<div id="coms">
<form method="post" action="./" id="comment_form" name="comment_form">
<fieldset>
<legend>コメント編集フォーム</legend>
<input type="hidden" name="mode" value="edit" />
<input type="hidden" name="mode2" value="edited" />
<input type="hidden" name="edit[rno]" value="<%eno>" />
<label for="name"><span>Name</span><input id="name" type="text" name="edit[name]" size="30" value="<%edit_name>" /></label>
<label for="subject"><span>Subject</span><input id="subject" type="text" name="edit[title]" size="30" value="<%edit_title>" /></label>
<label for="mail"><span>Mail</span><input id="mail" type="text" name="edit[mail]" size="30" value="<%edit_mail>" /></label>
<label for="url"><span>URI</span><input id="url" type="text" name="edit[url]" size="30" value="<%edit_url>" /></label>
<label for="comment"><span>Comment</span><textarea id="comment" cols="50" rows="5" name="edit[body]"><%edit_body></textarea><br /><script type="text/javascript" src="http://blog1.fc2.com/load.js"></script></label>
<label for="pass"><span>Password</span><input id="pass" type="password" name="edit[pass]" size="20" /></label>
<label for="himitu"><span>Secret</span><input id="himitu" type="checkbox" name="edit[himitu]" />秘密にする</label>
<p><input type="submit" value="送信" /></p>
<p><input type="submit" name="edit[delete]" value="削除" /></p>
</fieldset>
</form>
</div>
<!--/edit_area-->
<h4>Paging Navigation</h4>
<ul>
<!--prevpage--><li><a href="<%prevpage_url>" title="前頁へ移動する">PREVIOUS</a></li><!--/prevpage-->
<!--nextpage--><li><a href="<%nextpage_url>" title="次頁へ移動する">NEXT</a></li><!--/nextpage-->
<li><a href="<%url>" title="トップへ戻る">HOME</a></li>
</ul>
</div>
<h2>Navigations, etc.</h2>
<!--not_plugin-->
<dl>
<dt>Calendar</dt>
<dd><table summary="Calendar" id="calendar">
<caption><a href="<%prev_month_link>" title="前月"><%prev_month>/<%prev_year></a> | <%now_month>/<%now_year> | <a href="<%next_month_link>" title="次月"><%next_month>/<%next_year></a></caption>
<tr>
<th abbr="日曜日" scope="col" id="sun">Sun</th>
<th abbr="月曜日" scope="col" id="mon">Mon</th>
<th abbr="火曜日" scope="col" id="tue">Tue</th>
<th abbr="水曜日" scope="col" id="wed">Wed</th>
<th abbr="木曜日" scope="col" id="thu">Thu</th>
<th abbr="金曜日" scope="col" id="fri">Fri</th>
<th abbr="土曜日" scope="col" id="sat">Sat</th>
</tr>
<!--calender-->
<tr>
<td><%calender_sun></td>
<td><%calender_mon></td>
<td><%calender_tue></td>
<td><%calender_wed></td>
<td><%calender_thu></td>
<td><%calender_fri></td>
<td><%calender_sat></td>
</tr>
<!--/calender-->
</table>
</dd>
<dt>Recent Entries</dt>
<!--recent-->
<dd><a href="<%recent_link>" title="<%recent_title>"><%recent_title></a></dd>
<!--/recent-->
<dd><a href="<%url>?xml" title="RSS">RSS Feed (RSS 1.0)</a></dd>
<dt>Recent Comments</dt>
<!--rcomment-->
<dd><a href="<%rcomment_link>#comment<%rcomment_no>" title="Subject: <%rcomment_title>"><%rcomment_etitle><br />└ <%rcomment_name></a></dd>
<!--/rcomment-->
<dt>Recent Trackbacks</dt>
<!--rtrackback-->
<dd><a href="<%rtrackback_link>#trackback<%rtrackback_no>" title="<%rtrackback_title>"><%rtrackback_etitle><br />└ <%rtrackback_blog_name></a></dd>
<!--/rtrackback-->
<dt>Categories</dt>
<!--category-->
<dd><a href="<%category_link>" title="カテゴリ「<%category_name>」の記事一覧"><%category_name>（<%category_count>）</a></dd>
<!--/category-->
<dt>Monthly Archives</dt>
<!--archive-->
<dd><a href="<%archive_link>" title="「<%archive_year>年<%archive_month>月」の記事一覧"><%archive_year>年<%archive_month>月（<%archive_count>）</a></dd>
<!--/archive-->
<dt><label for="search_text">Search</label></dt>
<dd><form id="search_form" name="search_form" method="get" action="./">
<input id="search_text" type="text" name="q" size="20" value="" /><br /><input type="submit" value="検索" />
</form></dd>
<dt>Links</dt>
<!--link-->
<dd><a href="<%link_url>" title="<%link_name>"><%link_name></a></dd>
<!--/link-->
<dd><a href="./?admin">管理者ページ</a></dd>
<dt>About Author</dt>
<!--myimage-->
<dd><img src="<%image>" alt="<%author_name>" /></dd>
<!--/myimage-->
<dd>Name: <%author_name></dd>
<dd><%introduction2></dd>
<dt>Appendix</dt>
<!-- 広告タグ削除不可 -->
<dd><%ad><br /><%ad2></dd>
</dl>
<!--/not_plugin-->
<!--plugin-->
<h3>プラグイン機能には対応させていません。</h3>
<!--/plugin-->
<p>Copyright
(c) <%author_name> All Rights Reserved.</p>
</div>
</body>
</html>
インデントがないのは地味な軽量化だったり… 改行をなくしたりと、微小な軽量化はまだまだアリマス（ﾎﾞｿ
- 20070101
- Subset of Project.R
- パーマリンク
- トラックバック (8)
- コメント (18)
トラックバックURL
http://rstyle.blog1.fc2.com/tb.php/88-49becaec
この記事へのトラックバック
PRF的？（2）
（前記事の続き） body 内の全てを含む DIV は Rstyle さんのオリジナル（ simple_cord ）のような「額」を作る場合は必要ですが、今回の私のテンプレは「余白の節約」も視野に入れてましたので省き、代わりに記事単体を DIV で囲いました（各記事を「額」に嵌めた
- 20051102
- From : FCafe
CSS で装飾してください。の感想
細かな調整などしてみましたが、現状で完成とします。こういうのはテンションを保つのが難しいと感じました。一気に全部やる、というのは意外と正解かも。普段なら考えないようなことで試行錯誤したり、かなりネタに走ったこともでき、で楽しい時間でした。企画・ソース提
- 20051108
- From : 春木屋
CSSだけで装飾してみました。
R'styleさんの企画、ウチも参加してみることにしました。企画内容R'style が考えた、若干軽量 XHTML を、チョットした条件の下、CSS だけでステキなテンプレートに仕上げてください。
- 20051113
- From : BeigeHeart_べーじゅのこころ
CSS で装飾してください。に便乗
livedoorに帰参するとか言っておいてむこうは全く更新していないわけで・・・というのもBlukfeedsの検索で面白そうな企画を見つけたので少しずつ作業してました。その企画というのはCSS
- 20051117
- From : buena suerte!@FC2BLOG
CSS で装飾してください。に参加
R'styleさんの CSS で装飾してください。に参加してみました。R'style が考えた、若干軽量 XHTML を、チョットした条件の下、CSS だけでステキなテンプレートに仕上げてください。画像は使
- 20051117
- From : わるいおもいで
「CSS で装飾してください。」
R'styleさんの企画 “CSS で装飾してください。”に参加。画像は使用しないで作ってみた。集中して頑張ればもっと凝ったものにできたと思うのだけど、最近いまいち集中力が持続
- 20051202
- From : Ripples
この記事へのコメント
プチＲ計画？
興味を惹かれました。
・・・慣れてませんが
勉強を兼ねて２カラムに挑戦してみます。
(」゜ロ゜)」 おぉ
多分、第一号ですねヽ(´▽｀)/〜♪
daniel さんの2カラム、かなり楽しみです＾＾
このテンプレートでは pre 要素にスタイルが適用されていませんでしたね、すみません＾＾；
スタイルシート書いておきます。
あと、多分 R 計画の範疇です。
なんだか、
面白そうな企画ですね。
時間があるときにちょっと作ってみましょか。
是非是非
馬琴さんにも作っていただけるとは…。
楽しみがまた増えました＾＾
参加希望です
いつも読ませていただいてます。春木屋のsugです。
ちょうど、クリスマス向けなテンプレを作りたいと思っていたので、この”R 計画”に参加希望です。
自サイトもいじりかけなので遅いペースになりそうですけど、完成したら報告します。
どうぞどうぞ
sug さん、どうも。
クリスマス向けのテンプレートに使っていただけるとは…
どんな感じになるか楽しみです＾＾
チャレンジしてみました
はじめまして。
CSSもはじめましてでした。トラックバックを送るほどのでもなかったのですが、「初めてでここまでがんばってみました」と言うことで、送信させていただきました。
あーもーすごい楽しかったです。泣きそうだったけど。
いい機会をくれてありがとうございました。
拝見しました
cyaimi さん、初めまして。
初めて１から CSS を書かれたそうですが、この XHTML は少々癖があるので、苦戦されたかもしれませんね＾＾；
でも、楽しんで頂けて何よりです。 (´ー｀)
楽しかったです
コメントありがとうございました。
製作したテンプレを、もう少しデチューンして（IEにも優しくして）フリーウエアとして共有に登録したいと考えてます。
自分が編集すると、R'styleさんの軽量化の利点がなくなってしまいそうです。
ソースの扱いはどのようにすればよいでしょうか？
追伸。 時折お題を変えて募集したら面白いと思います。テーマ：赤 とか ミッション：float封印 とか。
どうもコメントありがとうです
R'styleさんはじめまして。
私のデザイン途中作品御覧頂きありがとうです(^^;
夜中の３時に眠い目をこすって悪戦苦闘していたので細かいチェックが出来ていませんでした(^^;
それにしてもCSSって奥が深いですよね。
すぐにテーブルとかに頼ってしまう自分ですが、今回の事でまだまだスタイルシートには隠された機能が有るのかと勉強になりました。
で、次はどんな事を？（笑）
次はどうしましょ
>> sug さん
ソースですか…
そうですねぇ…、基本的に個人がカスタマイズしたものはどう使って頂いても構いません。「"チョットしたルール" に則っている」と明記されない限りは何でもアリです。
ミッション：float封印 φ(°ー°) メモメモ
そういえば、sug さんの CSS 内のコメントの書き方はいいですね。 流石ダークサイダーズ。 CSS 内にコメントを書かれる方には是非ソースを覗いて見て欲しいところですね。
>> 有希之武 さん
あら、まだ途中だったんですか…＾＾；
そうとは知らず、余計なことまで書いてしまいましたね orz
> それにしてもCSSって奥が深いですよね。
こう思っていただけただけで、私が大満足だあると共に、この企画は大成功だと言えます。
※ 次回以降に関して
実は、この企画は一回モノではありません。
[simple_code] には兄弟が居たり…
方向性としては難度を上げるか下げるかの二通りありますね。
ちなみに、今回は条件をやや甘めに設定したつもりです。
（sug さんには "甘め" にする必要がなかったようですが…（笑））
が、しばらく待っててください。
今、イロイロ重なって結構忙しくやっているので…＾＾；
もう少ししたら、この企画のネタばらし（？）的なことを書くかもしれません。
とりあえず、お楽しみということで (´ー｀) ウフフ
何でもアリ
＞「"チョットしたルール" に則っている」と明記されない限りは何でもアリです。
了解しました。
FC2に身を置いている以上、ひとつくらいは共有に登録したかったので、この機会を逃してはと（笑
もうひとがんばりしてみます。
＞次はどうしましょ
（間をあけてくれないと、身（とネタ）が持たない･･･）
はじめまして。
以前から拝見しておりましたが、いつかこんな企画をされるんじゃないかと密かに思っておりました。
迷いながらの迷走CSSというようなモノしかできませんでしたが、よろしければご覧下さいませ。
いつもやってるようにやり始めて、つまずき...という繰り返しでした。
でも、とっても良い勉強＆経験になりました。ありがとうございました。
拝見してきました
Chako さん、初めまして。
いやぁ、スッキリしていてキレイなテンプレートでした。
CSS もコメントのスタイルが一貫していていいと思いました。
> でも、とっても良い勉強＆経験になりました。
何か Chako さんのプラスになることがあれば良いなと思っています＾＾
はじめまして。
はじめまして。
Bulkfeedsの検索RSSでこの企画を発見後、少しずつ作業しやっと見せられるまでになりましたのでトラックバックさせてもらいました。
それにしても己の知識不足を実感させられる楽しい企画でした。
ありがとうございました。
[壁]ロ°)ハッ
cie さん、はじめまして。
楽しんで頂けて何よりです。
まさか cie さんに参加していただけるとは…
LivedoorBlog を利用していた時から一方的に知っていたので驚きました。
えっと、今頃って感じかもしれませんが、以前に作ったものの改良版ができました。
(。・_・。)ノ
禁止ワードの問題でトラックバックの受信ができないということらしいのでコメントにアドレス書いておきますね。
//batoukin.blog1.fc2.com/?style2=05-orange_style&no=281
でわでわ・・・
あら…
気づくのが遅くなってしまってすみません <(＿ ＿)>
トラックバック受信不可といい、ホント申し訳ないです…