buena suerte!@FC2BLOG

livedoorに帰参するとか言っておいてむこうは全く更新していないわけで・・・

というのもBlukfeedsの検索で面白そうな企画を見つけたので少しずつ作業してました。
その企画というのはCSSデザインで有名なcss Zen Gardenに似た事をFC2ブログでもやってみようという趣旨。

CSS で装飾してください。 - R'style Lab in FC2

とても面白そうなので私も乗っかってみました。
デザインするに当たってのちょっとしたルールは以下。

1. タグの総数を増やしてはいけない
  （ただし、減らすことに制限なし）
2. 他の部分でタグを削れば、その同数タグの追加は可
3. xml 宣言、head 要素 内などは上記条件の対象外。
4. 一般的なブログとしての機能は確保してあること
  （コメント、トラックバック、ナビゲーション、なるべくトップに記事）
5. テキスト部分、及び属性などは全て自由に編集可
  （タグ以外の編集に制限なし）
6. RSS Feed、管理者ページへのリンクなどの記述位置・有無は自由。
7. id 属性は 10 個まで任意で追加可
8. class 属性は 5 種類まで任意で追加可
9. CSS で使用する画像サイズに制限なし

こちらのルールに従って基のXHTMLテンプレートから
id属性を5つ(#container, #descript, #contents, #navi, #paging)、class属性を1つ(.main)
追加させてもらい残りはほとんど弄らずにデザインしてみました。
※macIEだとカラム落ちする様子。(泣)

プレビュー：rouge (XHTML, CSS)

感想：
とりあえず今持っている自前の知識のみで作ってみましたが、やはり知識不足を実感させられます。
CSSはもちろんですが、構造の勉強にもなりました。
また他の参加者の方の作品を見ることが出来るのでとても参考になりますね。
面白い企画を立てられたR'styleさんに感謝です。

スポンサーサイト

以上でlivedoorで配布しているデザイン、全16作品を移植させて頂きました。
そのうち新しくテンプレートを作る可能性も大でございますが、とりあえずlivedoorへ帰参させてもらいます。

作品集として上メニューのPortfolioに全ての作品へのリンクを載せてます。
またそれぞれのテンプレートへのご質問や不具合のご報告などはテンプレート配布用にそれぞれ記事を用意しておりますので、コメント欄に書き込んで頂ければ対応させていただきます。
また上メニューのContactよりご連絡していただいても構いません。

ありがとうございました。

dressyと同じ形で背景にバーバリーチェックを使用しました。
dressy,dressy_blueと比べて落ち着いた雰囲気なので使ってみてください。
livedoor Blogですでに配布しているものをFC2用に移植してみました。

上のプレビュー画像はWinIE6で表示させたときのものです。
他のブラウザでは表示が若干違うかもしれません。

このテンプレートは個人・法人を問わず自由に使用することが出来ますが著作権は放棄しておりません。
※ただしアダルト関係や宗教関係のブログ、公序良俗に反するブログでのご使用はお控えくださいますようお願いいたします。

画像の二次加工やHTML,CSSをカスタマイズしてのご利用はご自由にしてください。
ただし再配布や共有テンプレート化はお控えください。

このテンプレートに関しまして何かご質問などありましたらこちらにどうぞ。

制作環境は以下の通り。
OS：WinXP
ディスプレイ解像度: 1024x786 32bitカラー
ブラウザ：InternetExplorer6、Firefox1.0.7、Opera8.5、Netscape7.1
IE使用時の文字サイズ：中

dressyの色違いブルーバージョンです。
少々派手(ケバイとも言う)なので使う方を選ぶデザインかもしれません。
livedoor Blogですでに配布しているものをFC2用に移植してみました。

上のプレビュー画像はWinIE6で表示させたときのものです。
他のブラウザでは表示が若干違うかもしれません。

このテンプレートは個人・法人を問わず自由に使用することが出来ますが著作権は放棄しておりません。
※ただしアダルト関係や宗教関係のブログ、公序良俗に反するブログでのご使用はお控えくださいますようお願いいたします。

画像の二次加工やHTML,CSSをカスタマイズしてのご利用はご自由にしてください。
ただし再配布や共有テンプレート化はお控えください。

このテンプレートに関しまして何かご質問などありましたらこちらにどうぞ。

制作環境は以下の通り。
OS：WinXP
ディスプレイ解像度: 1024x786 32bitカラー
ブラウザ：InternetExplorer6、Firefox1.0.7、Opera8.5、Netscape7.1
IE使用時の文字サイズ：中

plainとほぼ同じ構成で背景やバナーの色を変えたモノです。
少々派手(ケバイとも言う)なので使う方を選ぶデザインかもしれません。
livedoor Blogですでに配布しているものをFC2用に移植してみました。

上のプレビュー画像はWinIE6で表示させたときのものです。
他のブラウザでは表示が若干違うかもしれません。

このテンプレートは個人・法人を問わず自由に使用することが出来ますが著作権は放棄しておりません。
※ただしアダルト関係や宗教関係のブログ、公序良俗に反するブログでのご使用はお控えくださいますようお願いいたします。

画像の二次加工やHTML,CSSをカスタマイズしてのご利用はご自由にしてください。
ただし再配布や共有テンプレート化はお控えください。

このテンプレートに関しまして何かご質問などありましたらこちらにどうぞ。

制作環境は以下の通り。
OS：WinXP
ディスプレイ解像度: 1024x786 32bitカラー
ブラウザ：InternetExplorer6、Firefox1.0.7、Opera8.5、Netscape7.1
IE使用時の文字サイズ：中

グラデーションの水玉を使いポップな感じに。透過に見えるような画像を使ってます。
livedoor Blogですでに配布しているものをFC2用に移植してみました。

上のプレビュー画像はWinIE6で表示させたときのものです。
他のブラウザでは表示が若干違うかもしれません。

このテンプレートは個人・法人を問わず自由に使用することが出来ますが著作権は放棄しておりません。
※ただしアダルト関係や宗教関係のブログ、公序良俗に反するブログでのご使用はお控えくださいますようお願いいたします。

画像の二次加工やHTML,CSSをカスタマイズしてのご利用はご自由にしてください。
ただし再配布や共有テンプレート化はお控えください。

このテンプレートに関しまして何かご質問などありましたらこちらにどうぞ。

制作環境は以下の通り。
OS：WinXP
ディスプレイ解像度: 1024x786 32bitカラー
ブラウザ：InternetExplorer6、Firefox1.0.7、Opera8.5、Netscape7.1
IE使用時の文字サイズ：中

シンプルモノクロな感じになってます。
背景画像とともに指定されている背景色を変えることで簡単に雰囲気を変えることが出来ます。
livedoor Blogですでに配布しているものをFC2用に移植してみました。

上のプレビュー画像はWinIE6で表示させたときのものです。
他のブラウザでは表示が若干違うかもしれません。

このテンプレートの使用上の注意

・リンクをポイントすると破線がグリグリ動くようになっていますが、リンク文字が改行されている場合は下の行にしか画像が表示されません。

オススメカスタマイズ

記事のはじめにも書いてあるように、画像とともに指定されている背景色を変えることで少し雰囲気を変えることが出来ます。

全体の背景色(斜め線部分)

body{
 (中略)
 background-color:#888;
}

タイトル部分(トップバナー)の背景色(斜め線部分)

#banner{
 (中略)
 background-color:#888;
}

トラックバックURLの背景色(斜め線部分)

.trackback-url{
 (中略)
 background-color:#ddd;
}

トラックバック本文の背景色(斜め線部分)

.trackback-body{
 (中略)
 background-color:#ddd;
}

コメント本文の背景色(斜め線部分)

.comments-body{
 (中略)
 background-color:#ddd;
}

引用文(blockquoteタグ)の背景色(斜め線部分)

blockquote{
 (中略)
 background-color:#eee;
}

それぞれ変更したい箇所の赤文字部分をお好きな色に変更してみてください。
※上二つだけでも十分雰囲気変わります。

例: #888 → #600

他の文字色やリンクの色などは適宜お好きな色にどうぞ。

このテンプレートは個人・法人を問わず自由に使用することが出来ますが著作権は放棄しておりません。
※ただしアダルト関係や宗教関係のブログ、公序良俗に反するブログでのご使用はお控えくださいますようお願いいたします。

画像の二次加工やHTML,CSSをカスタマイズしてのご利用はご自由にしてください。
ただし再配布や共有テンプレート化はお控えください。

このテンプレートに関しまして何かご質問などありましたらこちらにどうぞ。

制作環境は以下の通り。
OS：WinXP
ディスプレイ解像度: 1024x786 32bitカラー
ブラウザ：InternetExplorer6、Firefox1.0.7、Opera8.5、Netscape7.1
IE使用時の文字サイズ：中

クリスマス仕様の季節モノです。記事部分は可変。
livedoor Blogですでに配布しているものをFC2用に移植してみました。

プレビュー画像はWinIE6で表示させたときのものです。
他のブラウザでは表示が若干違うかもしれません。

オススメカスタマイズ

クリスマス仕様のデザインですがタイトルやサイドバーなどの画像を違う物に変更すれば季節に関係なく使えると思います。

記事タイトル部

.title{
 (中略)
 background:url('http://blog-imgs-29.fc2.com/c/i/e/cie/xmas_title.png') no-repeat;
}

サイドメニュータイトル部

.sidetitle{
 (中略)
 background:url('http://blog-imgs-29.fc2.com/c/i/e/cie/xmas_sidetitle.png') no-repeat;
}

この赤い画像URL部分をお好きなアイコンに変更してみて下さい。

このテンプレートは個人・法人を問わず自由に使用することが出来ますが著作権は放棄しておりません。
※ただしアダルト関係や宗教関係のブログ、公序良俗に反するブログでのご使用はお控えくださいますようお願いいたします。

画像の二次加工やHTML,CSSをカスタマイズしてのご利用はご自由にしてください。
ただし再配布や共有テンプレート化はお控えください。

このテンプレートに関しまして何かご質問などありましたらこちらにどうぞ。

制作環境は以下の通り。
OS：WinXP
ディスプレイ解像度: 1024x786 32bitカラー
ブラウザ：InternetExplorer6、Firefox1.0.7、Opera8.5、Netscape7.1
IE使用時の文字サイズ：中

古くて安っぽい紙をイメージして作ってみました。（日記帳とか航海日誌みたいな感じ？）記事部分は可変です。
livedoor Blogですでに配布しているものをFC2用に移植してみました。

上のプレビュー画像はWinIE6で表示させたときのものです。
他のブラウザでは表示が若干違うかもしれません。

このテンプレートの使用上の注意

・本文やサイドメニュー、コメントに長い英文を入れると自動改行されず表示が崩れる可能性があります。

・記事部分よりサイドバーが長くなる場合、ページ左側の画像が途中で切れてしまってカッコ悪いので、 ページに表示させる記事数をうまく調整していただければと思います。

・記事に画像などを合わせて投稿されると行と背景の罫線がずれて表示されることがあります。
※テキストと引用だけの場合はずれません。

・ブラウザのウィンドウをリサイズした時に一番上がちょっとズレてしまいますが上下にスクロールして頂ければ元に戻ります。

このテンプレートは個人・法人を問わず自由に使用することが出来ますが著作権は放棄しておりません。
※ただしアダルト関係や宗教関係のブログ、公序良俗に反するブログでのご使用はお控えくださいますようお願いいたします。

画像の二次加工やHTML,CSSをカスタマイズしてのご利用はご自由にしてください。
ただし再配布や共有テンプレート化はお控えください。

このテンプレートに関しまして何かご質問などありましたらこちらにどうぞ。

制作環境は以下の通り。
OS：WinXP
ディスプレイ解像度: 1024x786 32bitカラー
ブラウザ：InternetExplorer6、Firefox1.0.7、Opera8.5、Netscape7.1
IE使用時の文字サイズ：中

クローバーをメインテーマに使用したテンプレートです。記事部分は可変。
livedoor Blogですでに配布しているものをFC2用に移植してみました。

プレビュー画像はWinIE6で表示させたときのものです。
他のブラウザでは表示が若干違うかもしれません。

このテンプレートは個人・法人を問わず自由に使用することが出来ますが著作権は放棄しておりません。
※ただしアダルト関係や宗教関係のブログ、公序良俗に反するブログでのご使用はお控えくださいますようお願いいたします。

画像の二次加工やHTML,CSSをカスタマイズしてのご利用はご自由にしてください。
ただし再配布や共有テンプレート化はお控えください。

このテンプレートに関しまして何かご質問などありましたらこちらにどうぞ。

制作環境は以下の通り。
OS：WinXP
ディスプレイ解像度: 1024x786 32bitカラー
ブラウザ：InternetExplorer6、Firefox1.0.7、Opera8.5、Netscape7.1
IE使用時の文字サイズ：中