rounded
角丸です。本文とか中のほうはサッパリしすぎかも。
各部に指定されている背景色を変えることで簡単に雰囲気を変えることも出来ます。
*ライブドアからの移植作品です。
上のプレビュー画像はWinIE6で表示させたときのものです。
他のブラウザでは表示が若干違うかもしれません。
» PREVIEW
7/23追記：絵文字に背景色がついてしまっていたので修正しました。
このテンプレートの使用上の注意
それぞれの幅は全体幅900px固定、コンテンツ(記事)部分600px固定、サイドバー部分300px固定です。
全体幅が900pxありますのでSVGA(800x600)の画面の方にはあまりやさしくないです。
おすすめカスタマイズ。
記事のはじめにも書いてありますが、ヘッダ部(黒色)、横カレンダー部(桃色)、コンテンツ部(水色)、サイドバー部(黄色)、フッタ部(緑色)のそれぞれの背景色を変更する事で簡単に雰囲気を変えることが出来ます。
CSSの修正箇所も少なくて簡単なので、配布しているままの色が気に入らなかったり個性を出したい方は挑戦してみてください。
ヘッダ部(黒色)
#banner {
～
background-color: #333;
～
}
横カレンダー部(桃色)
#calendar {
～
background-color: #ece;
～
}
コンテンツ部(水色)
#content {
～
background-color: #cee;
～
}
サイドバー部(黄色)
#links {
～
background-color: #eec;
～
}
フッタ部(緑色)
#footer {
～
background-color: #cec;
～
}
以上に記述したCSSのそれぞれの赤い文字部分をお好みのカラーコードに変更してみてください。 コードについては「カラーコード」「色見本」などで検索すれば参考サイトがたくさん引っ掛かりますのでそちらを参照して下さい。 他の文字色やリンク文字色などは適宜お好きな色へどうぞ。
横カレンダーを消したい場合は #calendar { }中に
display: none;
という一文を入れると消せます。消した方がスマートかも。
使用条件、カスタマイズや加工などについて。
このテンプレートは個人・法人を問わず自由に使用することが出来ますが著作権は放棄しておりません。
※ただしアダルト関係や宗教関係のブログ、公序良俗に反するブログでのご使用はお控えくださいますようお願いいたします。
画像の二次加工やHTML,CSSをカスタマイズしてのご利用はご自由にしてください。
ただし再配布や共有テンプレート化はお控えください。
このテンプレートに関しまして何かご質問などありましたらこちらにどうぞ。
制作環境。
OS：WinXP
ディスプレイ解像度: 1024x786 32bitカラー
ブラウザ：Firefox1.5.0.4、Opera9、InternetExplorer6、Netscape8.1
IE使用時の文字サイズ：中
ink
黒基調のシンプルなリキッドレイアウトデザインです。
シンプルなのでどなたでもお使いになれるかと思います。
*ライブドアからの移植作品です。
上のプレビュー画像はWinIE6で表示させたときのものです。
他のブラウザでは表示が若干違うかもしれません。
» PREVIEW
7/23追記：絵文字に背景色がついてしまっていたので修正しました。
このテンプレートの使用上の注意
全体幅、記事幅、サイドバー幅ともに可変ですので、ブラウザの幅に合わせて変化します。
余りにも幅を小さくしすぎるとデザインが崩れてしまうこともあります。
画像にリンクを貼ると下に点線が入ってしまうのは仕様です。
取り除くには少々面倒ですが
<a href="URI" class="img"><img src="URI" alt="Image" /></a>
というように画像タグを囲っているリンクタグにクラスを指定してあげると表示されなくなります。
このテンプレートは個人・法人を問わず自由に使用することが出来ますが著作権は放棄しておりません。
※ただしアダルト関係や宗教関係のブログ、公序良俗に反するブログでのご使用はお控えくださいますようお願いいたします。
画像の二次加工やHTML,CSSをカスタマイズしてのご利用はご自由にしてください。
ただし再配布や共有テンプレート化はお控えください。
このテンプレートに関しまして何かご質問などありましたらこちらにどうぞ。
制作環境は以下の通り。
OS：WinXP
ディスプレイ解像度: 1024x786 32bitカラー
ブラウザ：Firefox1.5.0.4、Opera9、InternetExplorer6、Netscape8.1
IE使用時の文字サイズ：中
plastik
Firefoxのビジュアルテーマのplastikfoxを参考にさせて頂いて作ってみました。
plastikfoxとは全く違うものになってしまいましたが、なんとかきれいに収まったと思います。
今回もライブドアからの移植作品です。
上のプレビュー画像はWinIE6で表示させたときのものです。
他のブラウザでは表示が若干違うかもしれません。
» PREVIEW
2006.05.08 追記: 記事一覧に対応しました。
このテンプレートの使用上の注意
それぞれの幅は全体幅900px固定、コンテンツ(記事)部分600px固定、サイドバー260px固定です。
全体幅が900pxありますのでSVGA(800x600)の画面の方にはやさしくありません。
モダンブラウザでご覧になるほうが色々といいかも。
このテンプレートは個人・法人を問わず自由に使用することが出来ますが著作権は放棄しておりません。
※ただしアダルト関係や宗教関係のブログ、公序良俗に反するブログでのご使用はお控えくださいますようお願いいたします。
画像の二次加工やHTML,CSSをカスタマイズしてのご利用はご自由にしてください。
ただし再配布や共有テンプレート化はお控えください。
このテンプレートに関しまして何かご質問などありましたらこちらにどうぞ。
制作環境は以下の通り。
OS：WinXP
ディスプレイ解像度: 1024x786 32bitカラー
ブラウザ：InternetExplorer6、Firefox1.5.0.2、Opera8.53、Netscape8.1
IE使用時の文字サイズ：中
フォントサイズに関する修正。
すべてのテンプレートのフォントサイズを少し修正させて頂きました。
この修正でIEの文字サイズを「中」以外でブラウズした時、文字サイズが大きく変わってしまっていた症状が解消されます。
こちらの症状が気になっていた方は再度ダウンロードして頂ければ幸いです。
今年はコレで最後になりますが、来年も引き続きよろしくお願い致します。
では皆様よいお年を。
CSS で装飾してください。に便乗
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だとカラム落ちする様子。(泣)
感想：
とりあえず今持っている自前の知識のみで作ってみましたが、やはり知識不足を実感させられます。
CSSはもちろんですが、構造の勉強にもなりました。
また他の参加者の方の作品を見ることが出来るのでとても参考になりますね。
面白い企画を立てられたR'styleさんに感謝です。
