CSSによるデザインテンプレート NO.0108〜 +IFD+

[スポンサード リンク]

CSSデザインテンプレートNO.0127〜NO.0128

XHTML1.0+CSS zipファイル

モノトーンベース 2カラム

NO.0124〜NO.0126をカスタマイズしていたらオリジナルよりも断然かっこよく出来たので新たに配布用スペースを取りました。サムネイルは2カラムです。個人的には2カラムのほうが完成度が高い気がします。

2カラムのサンプル  2カラムのダウンロード

3カラムのサンプル  3カラムのダウンロード

色々カスタマイズしなくても文字を入れ変えて使うだけでも結構かっこいいです。NO.0124のデザインテンプレートではハートがギザギザになってしまったりと微妙に後悔していたのでその点も改善しました。

このようなタイトル部分の画像を使うと、作成した跡にレイアウトチェックでブラウザの文字拡大機能などを確認してみるとレイアウトが崩れて泣き入ることがありますがこのデザインテンプレートは許容範囲に収まってくれたので良かったです。(IE7の文字サイズ最小〜最大、ページの拡大機能、Firefox3の拡大機能で確認しました。)

デザインテンプレートNO.0124〜NO.0126

XHTML1.0+CSS zipファイル

モノトーンベース 1カラム

モノトーンをベースとしたロック調のシンプルテンプレートです。ドクロのイラストを使用していますが不気味になり過ぎないようにハートで微妙に遊びが加えてあります。ハートが不要な方はgifファイルを削除して使用していただければと思います。

1カラム右サイドコンテンツのサンプル
1カラム右サイドコンテンツのダウンロード

1カラム左サイドコンテンツのサンプル
1カラム左サイドコンテンツのダウンロード

サムネイルではなんか怖く感じますがサンプルを見ると大分雰囲気が変わると思います。

タイトル部分が2行にまたがってしまうと微妙にレイアウトが崩れるので御気をつけください。

こちらは上のデザインテンプレートのカスタマイズバリエーションです。ちょっと不気味です。

1カラムのサンプル
1カラムのダウンロード

CSSデザインテンプレートNO.0108〜NO.0111

XHTML1.0+CSS zipファイル

暗色系ベース

過去に作成した宇宙風なテンプレートのカスタマイズバージョンです。時間経過と共に惑星が光り輝いたりします。

2カラム右サイドメニューのサンプル
 2カラム右サイドメニューのダウンロード

2カラム左サイドメニューのサンプル
 2カラム左サイドメニューのダウンロード

3カラム両サイドメニューのサンプル
 3カラム両サイドメニューのダウンロード

3カラム右サイドメニューのサンプル
 3カラム右サイドメニューのダウンロード

2カラム2パターン、3カラム2パターンの計4パターンのCSS展開です。3カラム右サイドメニューというのは、右にメニューがあって、左と中央にメインコンテンツ部分があるデザインバージョンです。

画像の変化はFLASHで実装しています。FireFoxやOperaの他にももちろんIE等でレイアウトチェックしていますが、FLASHを使うといつも使っているIE用のCSSなどのレイアウト確認ソフトが使えないので、virtual pcを使って旧IEのブラウザチェックをしました。CSSでのレイアウトが崩れていないと思いますが不慣れなものを使用しているのでもしCSSなどに異常などございましたらメッセージフォームなどで知らせていただけると幸いです。

テンプレート素材の検索&サイト作成役立ちサイト

CSSテンプレートNO.0133

XHTML1.0+CSS zipファイル

ペールトーンベース 2カラム

ポップな雰囲気ですが、落ち着いた雰囲気のあるデザインテンプレートです。

2カラム左メニューサンプル
2カラム左メニューダウンロード

CSSテンプレートNO.0130〜NO.0132

XHTML1.0+CSS zipファイル

淡色ベース 2カラム

淡色のトーンをベースに、花の画像を大きく使ったデザインテンプレートです。女性向です。使用している花の画像もそのうち素材として配布予定です。

1カラムサンプル  1カラムダウンロード

2カラム左メニューサンプル
2カラム左メニューダウンロード

2カラム右メニューサンプル
2カラム右メニューダウンロード

デザインテンプレートNO.0112〜NO.0119

XHTML1.0+CSS zipファイル

暗色系ベース

天体観測?しばらくすると様々な惑星が現れるテンプレートです。

2カラム左サイドメニューのサンプル
 2カラム左サイドメニューのダウンロード

2カラム右サイドメニューのサンプル
 2カラム右サイドメニューのダウンロード

3カラム両サイドメニューのサンプル
 3カラム両サイドメニューのダウンロード

3カラム右サイドメニューのサンプル
 3カラム右サイドメニューのダウンロード

こちらも前回の惑星のテンプレートと同じくCSSは2カラムと3カラムを2パターンずつ、計4パターンのCSS展開です。

VISTAのハイスペック環境でFLASHは作成したので、作成後に気づいたのですが、0.5MBのメモリのXPでチェックしたら僅かですが一部微妙に動作がカクカクしますね。0.2MB環境でも多少カクカクながら結構動いてくれました。ただ、さらにずっとスペックが低くなるとちょっと動作できるかわからないです。ただ、そこまでスペックが低い場合XP自体も動かすのに結構支障がでそうですが。

FLASHでデザイン性の高い魅力的な飾りが作れますが、こういったことも考慮しないとですね。virtual pcが無料で配布されていて助かりました。


以下は後日カスタマイズして追加したものです。FLASHの部分のみ更新。FLASHの部分でマウスが動くと星が散らばります。

カスタマイズ版デザインテンプレートのサンプルとダウンロードリンクです。

2カラム左サイドメニューのサンプル
 2カラム左サイドメニューのダウンロード

2カラム右サイドメニューのサンプル
 2カラム右サイドメニューのダウンロード

3カラム両サイドメニューのサンプル
 3カラム両サイドメニューのダウンロード

3カラム右サイドメニューのサンプル
 3カラム右サイドメニューのダウンロード

CSSデザインテンプレートNO.0120〜NO.0123

XHTML1.0+CSS zipファイル

茶と白ベース

猫付きメッセージボード風デザインテンプレートです。

1カラムのサンプル  1カラムのダウンロード

2カラム左サイドメニューのサンプル
2カラム左サイドメニューのダウンロード

2カラム右サイドメニューのサンプル
2カラム右サイドメニューのダウンロード

3カラム両サイドメニューのサンプル
3カラム両サイドメニューのダウンロード

寝ている猫をクリックして眠りを妨げると微妙に怒られるかも。。。更新ボタンを押したり、怒られた後に再びクリックするとまた寝ます。please,cut it out...は「やめてくれ...」みたいな意味です。多分。

なお、途中で思いついて、スクロールバーを表示しないで固定枠でテンプレートを使用したい方もいると思ったので、1カラムと2カラムの左サイドのCSSバージョンはスクロールバーを非表示にしても大体左右の余白などが同じくらいになるように調整してあります。スクロールバー無しで使いたい方は1カラムと2カラム左サイドを御利用ください。文章量が枠内に入るように調整すれば自動的にスクロールバーは消えます。逆に文章量が多い場合はスクロールバーが出るようにCSSで調整してあります。

当方イラストを全然描いたことが無かったので、絵のクォリティはう〜ん・・・って感じです。よく見れば見るほど粗が目立ちます。ただ、イラストが描けるようになれば表現の幅が広がると思うので、精進したいと思います。こんなテンプレートなかなか無いと思うし。。うまくなるまで相当時間がかかると思いますが。。。

最近暗色系のデザインテンプレートが多かったので、たまにはこういったものもいいかなと思いました。なお、過去のテンプレートと同じくテキスト部分はフレームタグなどではなく、CSSで実装しているので検索エンジンなどのインデックス作業にも優しい作りになっています。

CSSデザインテンプレートのIFD トップページへ