LABORATORY.R-STYLES in FC2

http://www.r-styles.net/weblog/ にログをイッパイ移動

Articles

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

CSS で装飾してください。 vol. 2.0

R'style の思いつき企画第2弾。

企画内容

R'style が考えた、若干重量 XHTML2006/8/26 更新) を、チョットした条件の下、CSS だけでステキな FC2BLOG 用テンプレートに仕上げてください。

※ プラグインタグ(<!--plugin--><!--/plugin-->)内はご自由に。
プラグイン機能に完全対応するとソースが汚くて仕方ないんですが…

テンプレートが完成したら、CSS 部分のみを CSS ファイルとして保存&アップロードした後、アップロードした CSS ファイルの URI を教えてください。

最終的に当ブログにおいて CSS 切り替えのみでデザインを変更して見られるようにする予定です。具体的には sug さん作の Alt Style を利用させて頂きます。

チョットした条件
  • XHTML ソースの変更不可
  • テンプレート足ること。
    (ユーザに固有の要素を画像文字等で無効にしない, etc.)

今回は余分な要素を入れています。一応3カラムも可能ですし、extraDiv の使い方次第では面白いものができるかも。

私の作品は [samurai_bamboo] です。

続きは XHTML ソースを載せておきます。

PS. 参加された方はこの機会に「css Zen Garden」のデザインも考えられてはいかがでしょうか。


<?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 id="<!--index_area-->index<!--/index_area--><!--permanent_area-->permanent<!--/permanent_area--><!--category_area-->category<!--/category_area--><!--search_area-->search<!--/search_area-->">

<div id="wrapper">

<div id="branding">
<h1><a href="./" title="<%blog_name>"><span><%blog_name></span></a></h1>
<p id="descript"><%introduction></p>
</div>

<ul id="skipper">
<li>Skip to: <a href="#navs">Site Navigation</a></li>
<li>Skip to: <a href="#mainContent">Main Content</a></li>
</ul>

<div id="mainContent">

<h2 id="mainHead"><span>Articles</span></h2>

<div id="articles">

<!--topentry-->
<div class="article">
<h3 id="entry<%topentry_no>"><span><a href="<%topentry_link>" title="<%topentry_title>"><%topentry_title></a></span></h3>
<div class="articleText"><%topentry_body>
<!--more_link-->
<p class="continue"><a href="<%topentry_link>#more" title="「<%topentry_title>」の続き">...続きを読む</a></p>
<!--/more_link-->
<!--more-->
<div id="more"><%topentry_more></div>
<!--/more-->
</div>
<ul class="articleInfo">
<li class="date"><span class="yyyy"><%topentry_year></span><span class="mm"><%topentry_month></span><span class="dd"><%topentry_day></span></li>
<li class="cat"><a href="<%topentry_category_link>" title="カテゴリ「<%topentry_category>」の記事一覧"><%topentry_category></a></li>
<li class="parmalink"><a href="<%topentry_link>">パーマリンク</a></li>
<li class="tb">
<!--allow_tb-->
<a href="<%topentry_link>#trackbacks" title="「<%topentry_title>」へのトラックバック">トラックバック (<%topentry_tb_num>)</a>
<!--/allow_tb-->
<!--deny_tb-->
トラックバック (-)
<!--/deny_tb-->
</li>
<li class="com">
<!--allow_comment-->
<a href="<%topentry_link>#comments" title="「<%topentry_title>」へのコメント">コメント (<%topentry_comment_num>)</a>
<!--/allow_comment-->
<!--deny_comment-->
コメント (-)
<!--/deny_comment-->
</li>
</ul>
</div>
<!--/topentry-->


<!--trackback_area-->
<div id="trackbacks">

<h4><span>トラックバックURL</span></h4>
<p><%trackback_url></p>

<h4><span>この記事へのトラックバック</span></h4>
<!--trackback-->
<div class="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 class="tbInfo">
<li class="date"><span class="yyyy"><%tb_year></span><span class="mm"><%tb_month></span><span class="dd"><%tb_day></span></li>
<li class="from">From : <%tb_blog_name></li>
</ul>
</div>
<!--/trackback-->
</div>
<!--/trackback_area-->


<!--comment_area-->
<div id="comments">
<h4><span>この記事へのコメント</span></h4>
<!--comment-->
<div class="comment">
<h5 id="comment<%comment_no>"><%comment_title></h5>
<p><%comment_body></p>
<ul class="comInfo">
<li class="date"><span class="yyyy"><%comment_year></span><span class="mm"><%comment_month></span><span class="dd"><%comment_day></span></li>
<li class="name"><%comment_mail+name> ♦<%comment_trip></li>
<li class="url"><%comment_url+str></li>
<li class="edit">[ <a href="<%comment_edit_link>" title="コメントの編集">編集</a> ]</li>
</ul>
</div>
<!--/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>" />
<div class="component"><label for="name"><span>Name</span></label><input id="name" type="text" name="comment[name]" size="30" value="<%cookie_name>" /></div>
<div class="component"><label for="subject"><span>Subject</span></label><input id="subject" type="text" name="comment[title]" size="30" value="Re: <!--topentry--><%topentry_title><!--/topentry-->" /></div>
<div class="component"><label for="mail"><span>Mail</span></label><input id="mail" type="text" name="comment[mail]" size="30" value="<%cookie_mail>" /></div>
<div class="component"><label for="url"><span>URI</span></label><input id="url" type="text" name="comment[url]" size="30" value="<%cookie_url>" /></div>
<div class="component"><label for="comment"><span>Comment</span></label><textarea id="comment" cols="50" rows="5" name="comment[body]"></textarea><br /><script type="text/javascript" src="http://blog1.fc2.com/load.js"></script></div>
<div class="component"><label for="pass"><span>Password</span></label><input id="pass" type="password" name="comment[pass]" size="20" /></div>
<div class="component"><label for="himitu"><span>Secret</span></label><input id="himitu" type="checkbox" name="comment[himitu]" />管理者にだけ表示を許可する</div>
<div class="button"><input type="submit" value="送信" /></div>
</fieldset>
</form>
</div>
<!--/comment_area-->


<!--edit_area-->
<div id="comments">
<h4><span>投稿したコメントの編集</span></h4>
<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>" />
<div class="component"><label for="name"><span>Name</span></label><input id="name" type="text" name="edit[name]" size="30" value="<%edit_name>" /></div>
<div class="component"><label for="subject"><span>Subject</span></label><input id="subject" type="text" name="edit[title]" size="30" value="<%edit_title>" /></div>
<div class="component"><label for="mail"><span>Mail</span></label><input id="mail" type="text" name="edit[mail]" size="30" value="<%edit_mail>" /></div>
<div class="component"><label for="url"><span>URI</span></label><input id="url" type="text" name="edit[url]" size="30" value="<%edit_url>" /></div>
<div class="component"><label for="comment"><span>Comment</span></label><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></div>
<div class="component"><label for="pass"><span>Password</span></label><input id="pass" type="password" name="edit[pass]" size="20" /></div>
<div class="component"><label for="himitu"><span>Secret</span></label><input id="himitu" type="checkbox" name="edit[himitu]" />秘密にする</div>
<div class="button"><input type="submit" value="送信" /></div>
<div class="button"><input type="submit" name="edit[delete]" value="削除" /></div>
</fieldset>
</form>
</div>
<!--/edit_area-->


<div id="pagingNav">
<h3><span>Paging Navigation</span></h3>
<ul>
<!--prevpage--><li id="previous"><a href="<%prevpage_url>" title="前頁へ移動する">PREVIOUS</a></li><!--/prevpage-->
<!--nextpage--><li id="next"><a href="<%nextpage_url>" title="次頁へ移動する">NEXT</a></li><!--/nextpage-->
<li id="toHome"><a href="<%url>" title="トップへ戻る">HOME</a></li>
</ul>
</div>

</div>

</div>

<h2 id="subHead"><span>Navigations, etc.</span></h2>

<!--not_plugin-->
<div id="navs">

<h3><span>Navigations</span></h3>

<div id="nav-calendar" class="module">
<h4><span>Calendar</span></h4>
<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>
</div>


<div id="nav-entries" class="module">
<h4><span>Entries</span></h4>
<ul class="nav">
<!--recent-->
<li><a href="<%recent_link>" title="<%recent_title>"><%recent_title></a></li>
<!--/recent-->
<li id="rss"><a href="<%url>?xml" title="RSS">RSS Feed (RSS 1.0)</a></li>
</ul>
</div>


<div id="nav-comments" class="module">
<h4><span>Comments</span></h4>
<ul class="nav">
<!--rcomment-->
<li><a href="<%rcomment_link>#comment<%rcomment_no>" title="Subject: <%rcomment_title>"><%rcomment_etitle><br />└ <%rcomment_name></a></li>
<!--/rcomment-->
</ul>
</div>


<div id="nav-trackbacks" class="module">
<h4><span>Trackbacks</span></h4>
<ul class="nav">
<!--rtrackback-->
<li><a href="<%rtrackback_link>#trackback<%rtrackback_no>" title="<%rtrackback_title>"><%rtrackback_etitle><br />└ <%rtrackback_blog_name></a></li>
<!--/rtrackback-->
</ul>
</div>


<div id="nav-category" class="module">
<h4><span>Categories</span></h4>
<ul class="nav">
<!--category-->
<li><a href="<%category_link>" title="カテゴリ「<%category_name>」の記事一覧"><%category_name>(<%category_count>)</a></li>
<!--/category-->
</ul>
</div>


<div id="nav-archives" class="module">
<h4><span>Archives</span></h4>
<ul class="nav">
<!--archive-->
<li><a href="<%archive_link>" title="「<%archive_year>年<%archive_month>月」の記事一覧"><%archive_year>年<%archive_month>月(<%archive_count>)</a></li>
<!--/archive-->
</ul>
</div>


<div id="nav-search" class="module">
<h4 class="search"><label for="search_text">Search</label></h4>
<form id="search_form" class="search" name="search_form" method="get" action="./">
<input id="search_text" type="text" name="q" size="20" value="" /><br /><input type="submit" value="Search !" />
</form>
</div>


<div id="nav-links" class="module">
<h4><span>Links</span></h4>
<ul class="nav">
<!--link-->
<li><a href="<%link_url>" title="<%link_name>"><%link_name></a></li>
<!--/link-->
<li class="nav"><a href="./?admin">管理者ページ</a></li>
</ul>
</div>


<div id="nav-about" class="module">
<h4><span>Author</span></h4>
<ul>
<!--myimage-->
<li><img src="<%image>" alt="<%author_name>" /></li>
<!--/myimage-->
<li>Name: <%author_name></li>
<li><%introduction2></li>
</ul>
</div>


<div id="nav-appendix" class="module">
<h4><span>Appendix</span></h4>
<!-- 広告タグ削除不可 -->
<div><%ad><br /><%ad2></div>
</div>

</div>
<!--/not_plugin-->



<!--plugin-->
<div id="navs">

<h3><span>Navigations</span></h3>

<div id="plugin_first">
<!--plugin_first-->
<div class="p1_<%plugin_first_tag> module">
<h4 style="text-align:<%plugin_first_talign>"><span><%plugin_first_title></span></h4>
<p id="p1_<%plugin_first_tag>_desc" style="text-align:<%plugin_first_ialign>"><%plugin_first_description></p>
<%plugin_first_content>
<p id="p1_<%plugin_first_tag>_desc2" style="text-align:<%plugin_first_ialign>"><%plugin_first_description2></p>
</div>
<!--/plugin_first-->
</div>


<div id="plugin_second">
<!--plugin_second-->
<div class="p2_<%plugin_second_tag> module">
<h4 style="text-align:<%plugin_second_talign>"><span><%plugin_second_title></span></h4>
<p id="p2_<%plugin_second_tag>_desc" style="text-align:<%plugin_second_ialign>"><%plugin_second_description></p>
<%plugin_second_content>
<p id="p2_<%plugin_second_tag>_desc2" style="text-align:<%plugin_second_ialign>"><%plugin_second_description2></p>
</div>
<!--/plugin_second-->
</div>


<div id="plugin_third">
<!--plugin_third-->
<div class="p3_<%plugin_third_tag> module">
<h4 style="text-align:<%plugin_third_talign>"><span><%plugin_third_title></span></h4>
<p id="p3_<%plugin_third_tag>_desc" style="text-align:<%plugin_third_ialign>"><%plugin_third_description></p>
<%plugin_third_content>
<p id="p3_<%plugin_third_tag>_desc2" style="text-align:<%plugin_third_ialign>"><%plugin_third_description2></p>
</div>
<!--/plugin_third-->
</div>


</div>
<!--/plugin-->


<div id="extra">
<h3><span>About This Website</span></h3>
<div id="copyright"><span>Copyright(c) <%author_name> All Rights Reserved.</span></div>
</div>

</div>

<div id="extraDiv1"><span></span></div>
<div id="extraDiv2"><span></span></div>
<div id="extraDiv3"><span></span></div>

</body>
</html>
スポンサーサイト

トラックバックURL

http://rstyle.blog1.fc2.com/tb.php/224-b7be46e2

この記事へのトラックバック

続 R'style Lab in FC2 HTML DESIGN
途中テンプレート公開やらCSS書き直しでバタバタしましたが、多少落ち着いてきたので再開しようと思います。デザインはトップページのみです。全体的にかなり中途半端です。サイドプライグイ部分はツリー仕様のタグに
  • 20070127
  • From : ヒヨコ君増殖中 想 FC2版
-
管理人の承認後に表示されます
  • 20130725
  • From :
-
管理人の承認後に表示されます
  • 20130903
  • From :
-
管理人の承認後に表示されます
  • 20130904
  • From :
-
管理人の承認後に表示されます
  • 20130905
  • From :
-
管理人の承認後に表示されます
  • 20130906
  • From :
-
管理人の承認後に表示されます
  • 20130907
  • From :
-
管理人の承認後に表示されます
  • 20130924
  • From :
-
管理人の承認後に表示されます
  • 20130924
  • From :
-
管理人の承認後に表示されます
  • 20130924
  • From :
-
管理人の承認後に表示されます
  • 20131106
  • From :
-
管理人の承認後に表示されます
  • 20131107
  • From :
-
管理人の承認後に表示されます
  • 20131111
  • From :
-
管理人の承認後に表示されます
  • 20131112
  • From :
-
管理人の承認後に表示されます
  • 20131128
  • From :
-
管理人の承認後に表示されます
  • 20131129
  • From :
-
管理人の承認後に表示されます
  • 20131207
  • From :
-
管理人の承認後に表示されます
  • 20140325
  • From :

この記事へのコメント

Re: CSS で装飾してください。 vol. 2.0

あら、しばらく見ないうちに第2段が Σ(‘д‘ )

  • 20061002
  • 馬琴 ♦hbEyhNHw
  • URL
  • 編集 ]
Re: CSS で装飾してください。 vol. 2.0

お久しぶりです^^
密かにやってます(笑

  • 20061003
  • R'style ♦skJgSh2U
  • URL
  • 編集 ]
Re: CSS で装飾してください。 vol. 2.0

初めまして。
FC2ブログ使用者(こんな書き方でいいのでしょうか?)です。
新選組のファンで、こちらの「samurai bamboo」を見せて頂いて、大好きになりました。
ただ、こちらは2カラムということで、もし、大変な作業で無ければ、これの3カラム版を作って頂ければなぁ、と思うのですが、、、
自分が作った事が無いものですから、その大変さも何も知りませんので、なんて図々しい事を、とお思いかも知れませんが、その辺りはどうぞご容赦下さいませ。
でも、もし有ればとっても嬉しいです、samurai bambooの3カラム。

  • 20061201
  • あさぎ ♦tCqMv5Ng
  • URL
  • 編集 ]
Re: CSS で装飾してください。 vol. 2.0

あさぎさん、はじめまして。

遅くなってすみません。

3 カラム版へのカスタマイズ方法について記事を書いておきましたので参照してください。

http://rstyle.blog1.fc2.com/blog-entry-230.html

  • 20061213
  • R'style ♦skJgSh2U
  • URL
  • 編集 ]
Re: CSS で装飾してください。 vol. 2.0

R'styleさん、初めての訪問で図々しくリクエストしてしまった事、どうかお許し下さい。
先ほど、3カラム版を見せて頂きました。
そして、初心者でも分るような詳しい説明を書いて下さっていたので、直ぐに3カラムに編集できました。
2カラムと3カラム、見比べてみて、少しの間考えてみます。
お忙しい中、リクエストに応えて下さった事に、感謝致します。
本当に有難うございました。

Re: CSS で装飾してください。 vol. 2.0

お久しぶりです。
実は、それまで何の不具合も無かったのですが、ある日突然、プロフィール欄などのサイドバーが落ちてしまいました。プロフィール上部がものすごく空いてしまい、随分下にスクロールしてやっと出てくるという状態になってしまったのです。
何が原因なのか、さっぱり分りません。
今は、別のテンプレに変えてしまっているのですが、
再度、こちらのsamurai_bamboo2を使いたいと思っていますので、もし宜しければ、どうすれば直せるのか教えて頂ければ嬉しいです。

Re: CSS で装飾してください。 vol. 2.0

初めましてw
あのcyberspace_behindっていう作品ありますよね
あれが気にいったんで使わせてもらったんですけどプラグインが多すぎてなんかごちゃごちゃになってしまったんです。プラグインは減らしたくないし。、このテンプレートをつかいたいし、どっちもあれなんでこのテンプレートを3カラムにしたいんですがどうすればいいんですかね
教えてくださいw
忙しい中すみませんw;;

  • 20070218
  • yami ♦-
  • URL
  • 編集 ]
Re: CSS で装飾してください。 vol. 2.0

聞いておいて、何だ?と思われるかも知れませんが、
samurai_bambooを新しくダウンロードし直しましたら、テンプレの崩れが解消できましたので、上記の質問は、キャンセルという事で、どうぞ宜しくお願い致します。
申し訳ございませんでした。

Re: CSS で装飾してください。 vol. 2.0

こんにちは。はじめまして。

FC2ブログを運営している学生です。

このたび、こちらのRstyleさんのテンプレートを発見し、どれもすばらしいデザインや機能性に感動しました。

現在、自分も自作テンプレート製作に励んでおります。
Rstyleさんのテンプレートはどれもデザインが私の好みで、最高です。

そこで今回、お願いがありましてコメントさせていただきます。

このブログにつかわれているテンプレートが私の一番のお気に入りです。
中でも、ヘッダーの画像が好きなのですが
そのヘッダーでブログのタイトルを示すときに用いている背景画像の黒のかすれたラインがとてもクールです。

そのかすれたクールな黒のラインのみをgif形式で作成していただけないでしょうか?

お忙しいかと思いますし、初対面で非常に図々しい発言で申し訳ございません。

mode_info@yahoo.co.jp

お時間があるときで結構ですので、お返事でもいただけたら幸いです。

これからも、すばらしいテンプレートに期待しております。がんばってください。

それでは失礼いたします。

Re: CSS で装飾してください。 vol. 2.0

miya さん、はじめまして。
最近、忙殺気味の R'style です。

すごい照れるようなコメントですが、ありがとうございます。

本題の方ですが、かすれたラインということは、斜めのヤツですよね。
以下、斜めのラインと解釈して書きます。

これは残念ながら、表立ってどうぞという訳にはいきません。
(裏なら良いって訳でもないんですが…)
というのは、これは有料の素材集の画像を加工した物で、多分私には譲渡の権利はないと思うからです。
(ちなみに、元ファイルは jpeg の写真画像です。)

一応、私が使っている素材集は「素材辞典フォトバイブル 20,000」です。
www.amazon.co.jp/dp/B0001M4BAW
サイズは小さいものの、複数の「素材辞典」の素材が安価で手に入るのでオススメです。
学生さんということですが、「高っ!」って程でもないと思うので、購入を検討されてはいかがでしょうか。
(そういう私も今年3月まで学生さん)
ただ、高校生以下だったら… う~ん、相談に乗りましょうか。


それで、半透明の黒い帯(水平)の方の場合ですが、こちらであれば問題ないです。
が、gif でと言うと難しいですね。思いっきりアルファチャンネルなので。
でも、全くダメですって訳ではなくて、下(レイヤー)に置く画像を頂ければ、私の方で加工して、加工後のファイル(png)をお渡しします。
ただ、ある程度の時間を頂くことはご了承ください。
(平日は朝6時起き,22時頃帰宅という生活をしているので… orz)


あとは、察するに加工するためのソフトがネックになりそうですね。
Fireworks か Photoshop があれば一番良いと思いますが、これは高いですよね。
アカデミック版は結構安いですが、それでも数万なので…
(CS3 Web Premium を学生のうちに買っておきたかった… が、買えなかった orz)
Photoshop CS3 とかなら30日間の無償トライアル版でも良いかもしれません。

一応、上記ソフトに相当するものとして、無料では GIMP が有名です。(多分)
Photoshop 使いが使うにはチョット操作に癖がある気がしますが、無料でお探しならお試しください。


大体そんな感じですね。
もしアレだったら、どの素材をどういう風に加工したかの詳細もお教えしますが、どうでしょ。
方法は思いっきり我流なので、メールでって事になりますが。
(マイナスアピールになる可能性が0ではない為)

何か長くなってしまいましたが、要らん事書いた分が原因な気がする(笑
まぁ、なんとなく「やる気」を感じたので、何とか方法を考えましょう。

メールのほうが良ければ、一応アドレス入れておくので。

承認待ちコメント

このコメントは管理者の承認待ちです

承認待ちコメント

このコメントは管理者の承認待ちです

コメント投稿フォーム

管理者にだけ表示を許可する

Paging Navigation

Navigations, etc.

About This Website

/
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。