2カラムのwebテンプレートの素材集 その3 +IFD+

[スポンサード リンク]

2カラムwebテンプレート NO.85

XHTML1.0+CSS zipファイル

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

ギターをくわえたドクロの画像を使用した、ロック調のモノトーンテンプレートです。左目の部分にはハートのGIFアニメがあり、怖いながらもユニークなデザインになっています。右側の十字架もいい感じにアクセントになっていると思います。タイトルがギターの部分に表示される仕様になっています。個人的には結構気に入っている1枚です。FC2ブログ用にそのうち移植予定です。

サンプル  ダウンロード

2カラムデザインテンプレート NO.79〜NO.82

XHTML1.0+CSS zipファイル

暗色系ベース

FLASHで実装している、流れる宇宙と惑星のwebテンプレート素材です。しばらく待っていると様々な惑星が出現します。サムネイルが3カラムと共有になっているので3カラムになっていますが以下のものは2カラムです。FLASHに関しては特にカスタマイズする必要は無いので手軽に高いデザイン性のwebページを作成することができると思います。こちらも2カラムの左サイドメニューと右サイドメニューの両方で展開しています。

左サイドメニューのサンプル
 左サイドメニューのダウンロード

右サイドメニューのサンプル
 右サイドメニューのダウンロード

以下のものはしばらくしてからFLASHをさらにカスタマイズしたものです。FLASHの範囲でマウスを動かすとキラキラした星のようなものが散らばります。綺麗なので女性にもお勧めです。

左サイドメニューのサンプル
 左サイドメニューのダウンロード

右サイドメニューのサンプル
 右サイドメニューのダウンロード

2カラムwebテンプレートNO.77〜NO.78

XHTML1.0+CSS zipファイル

暗色系ベース

過去に作成した惑星の画像を使用したwebテンプレートの画像を利用して作成した、FLASH付きカスタマイズwebテンプレートです。FLASHによって時間が経つごとに惑星が光り輝いたり明るくなったりします。あと星が光ったり消えたりとか。クールで綺麗な感じです。特に嫌味な感じもしないので性別を問わずお使いいただけると思います。右サイドメニュー、左サイドメニュー両方ありますのでスタイルシートでレイアウトを入れ替えたりするのが面倒な方にもおすすめです。

右サイドメニューのサンプル
 右サイドメニューのダウンロード

左サイドメニューのサンプル
 左サイドメニューのダウンロード

2カラムテンプレート NO.75〜NO.76

XHTML1.0+CSS zipファイル

黒と白ベース 一応左サイドメニュー

デザイン性の高いクールなwebテンプレートです。あまり文字数が多いサイトには向きませんが、かっこいいのでデザインを重視したい方には結構おすすめ。

サンプル  ダウンロード

こちらは黒と白の部分を入れ替えて作成したバージョンです。白背景の部分も多いのでサムネイルだとちょっと雰囲気がわかりにくいです。興味がある方はお手数ですがサンプルページで確認するといいと思います。いつもはfloatでコンテンツを2カラムにしたりしているのですが、今回勉強やテストも兼ねて絶対配置などを利用してコンテンツを2カラムにしてみました。

なお、この六角形の模様は今回せっかくなのでパターン素材として作成しました。機会があれば配布するかもしれません。

サンプル  ダウンロード

floatとテーブルを使わずに珍しく絶対配置などを使用して段組してあります。意外とできるものですね。

2カラムwebテンプレート NO.73〜NO.74


XHTML1.0+CSS zipファイル

右サイドメニュー

薔薇の画像を使用したゴスロリ風のwebテンプレートです。結構大胆に画像をつかってあります。左右には十字架の画像もしようしてあります。

黒サンプル  黒ダウンロード

下のものは白背景バージョンとピンク背景バージョンです。

 

白サンプル  白ダウンロード
ピンクサンプル  ピンクダウンロード

白背景とピンク背景のバージョンは文字が黒いカラーのため、画像が重なると文字が見えづらいので画像のサイズを変更するなどして対処してあります。白背景のバージョンは以前も2カラムのゴシックのwebテンプレートでも使った配色です。使いやすい配色で結構多用しています。

今回のwebテンプレートで飾り罫も自作してみましたが、なかなか難しいですね。相当細かいレースのような飾り罫を作る素材屋さんがいらっしゃいますが、かなり尊敬します。

2カラムテンプレート NO.70〜NO.72

XHTML1.0+CSS zipファイル

黒と白ベース 右サイドメニュー

ゴシック風な雰囲気を持つwebテンプレートです。不吉というか、ちょっと邪悪な感じになったので急遽ハートをGIFアニメーションを作成してそういった雰囲気を中和しています。あまりモニタの小さい環境だと左右の背景画像が見えなくなってしまいます。


黒サンプル  黒ダウンロード

 

カラーバリエーションです。ピンクのバージョンと黒と赤の2色使いのバージョンがあります。上の黒のテンプレート素材とは大分雰囲気が変わって、ピンクは女性的な雰囲気になっています。どちらかというと、上の黒バージョンよりもこれら下の二つのほうが配色などの完成度が高いような気がして、おすすめです。イラストレーターを使ってこういった模様の素材は作るべきなのでしょうが、どうも相性が合わないらしく、ペイントソフトを使っています。

ピンクサンプル  ピンクダウンロード

黒と赤サンプル  黒と赤ダウンロード

ホームページ素材の検索&サイト作成役立ちサイト

2カラムwebテンプレート NO.83〜NO.84

XHTML1.0+CSS zipファイル

茶と白ベース

コルクボード風の背景を使用したテンプレートです。右上の猫が強いインパクトを与えています。コルクボードに紙をピンで留めたようなデザインになっています。FLASH付きで、猫が寝ているような雰囲気になっています。猫をクリックして眠りを妨げると微妙に怒られるかも。左サイドメニューと右サイドメニュー両方あります。

左サイドメニューのサンプル
左サイドメニューのダウンロード

右サイドメニューのサンプル
右サイドメニューのダウンロード

2カラムテンプレートNO.66

XHTML1.0+CSS zipファイル

淡色ベース 一応左サイドメニュー

ルーズリーフ、付箋、メモ用紙等、身の回りにある文房具などをテーマに作成したテンプレート素材です。スキャンせずに全部手作りですので、ルーズリーフの穴の部分とかが多少おかしい気もします。付箋がメニューになっていて、5つまでメニュー項目を設定できます。斜めにしたりして遊び心を加えたおかげで、一部文字が少ししか入らない付箋もあります。(笑)ルーズリーフの部分は出来る限り下線と文字の位置を揃えるように設定してありますが、画像を入れたり、リストタグなどを利用するとどうしてもズレが避けられません。ある程度は許容御願いします。デフォルト設定ではIE6、IE7、Firefox3、Opera9などの主要ブラウザで崩れていないのを確認しています。

サンプル  ダウンロード

2カラムwebテンプレート NO.60〜NO.65

XHTML1.0+CSS zipファイル

黒と赤ベース

黒と赤ベースのwebテンプレートです。ロックな雰囲気の画像素材を使用しています。奥行きが感じられ、サイバーな雰囲気でもあります。上部のメニューバーはマウスオーバーでバナー画像の元々のものが表示されます。結構こういったメニューバーもかっこいいと思います。2カラム様々なレイアウトを作りましたのでスタイルシートカスタマイズの手間を省くのにご利用ください。

両サイドコンテンツのサンプル
両サイドコンテンツのダウンロード

右サイドメニューのサンプル
右サイドメニューのダウンロード

左サイドメニューのサンプル
左サイドメニューのダウンロード

寒色系のバージョンも作成しました。こちらも雰囲気があっていいと思います。メニューバーの作りなども赤のバージョンと同じです。CSSバージョンも赤と同様様々なものを用意しております。

両サイドコンテンツのサンプル

両サイドコンテンツのダウンロード
右サイドメニューのダウンロード
左サイドメニューのダウンロード

2カラムwebテンプレート NO.57〜NO.59

XHTML1.0+CSS zipファイル

ピンクベース

女性向なwebテンプレートです。ピンクがかなりインパクトがあります。万人向けというわけではないと思いますがこういうデザインのwebも有りだと思います。植物の画像が幻想的な雰囲気を出しています。ピンクバージョンのみ現在FC2ブログに移植済みです。これの作成にはphotoshopのブラシを使っていますが、このテンプレート素材で初めてブラシの自作を始めました。結構面白いですね。レイアウトは各サイドメニューで作ってあるのでメニューをスタイルシートで入れ替えるのが面倒な方にもお勧めです。

右サイドメニューサンプル
 右サイドメニューダウンロード

サイドメニューサンプル
 左サイドメニューダウンロード

 

下のものはベースカラーを全然違うものに変更したものです。ピンクとは全然違う雰囲気になっています。シックで大人らしい雰囲気ですね。茶と黒の展開です。

以下茶のテンプレートのリンクです。
茶のテンプレートのサンプル
右サイドメニューダウンロード
左サイドメニューダウンロード

以下黒のテンプレートのリンクです。
黒のテンプレートのサンプル
右サイドメニューダウンロード
左サイドメニューダウンロード

2カラムテンプレート NO.56

XHTML1.0+CSS zipファイル

暗色系ベース

大胆で壮大な惑星の画像を使用しています。SF的ともとれるし幻想的で綺麗なHPテンプレートともいえます。背景画像のせいで文字が見えづらくならないように配慮してあります。結構気に入っているテンプレートです。3つ分スペースがある上部メニューは文字数少な目を推奨します。FC2ブログ移植済みのHPテンプレートです。このページ更新している現時点で大体1000ダウンロードくらいです。まだ結構伸びています。結構気に入ってくれた方が多かったので非常に嬉しく思いました。

サンプル  ダウンロード

2カラムwebテンプレート NO.51〜NO.55

XHTML1.0+CSS zipファイル
赤とグレーベース 2カラム両サイドコンテンツ

シックで大人っぽいカラーを使用したwebテンプレートです。メニューとコンテンツというレイアウトではなく両側がコンテンツになっている2カラム素材です。縦幅が固定になっていて、それ以上にスペースを取らなくてはならない場合などは横にサムネイル画像のようにスクロールバーが自動的に出てくれます。逆にスペース内に収まった場合は消えてすっきりしてくれます。上部に3つ分のメニューバーが付いています。

赤サンプル  赤ダウンロード


 
 

こちらは様々なカラーバリエーションのHPテンプレートです。赤と同様に全体的にシックで落ち着いた雰囲気です。カラー以外の仕様は全て赤と同じです。

黒サンプル  黒ダウンロード

青サンプル  青ダウンロード

茶サンプル  茶ダウンロード

緑サンプル  緑ダウンロード

2カラムwebテンプレート NO.67〜NO.69

XHTML1.0+CSS zipファイル

青ベース 左サイドメニュー

シンプルにラインや基本的な図形などを使用して構成されているwebテンプレート素材です。GIFアニメで遊んであります。IT系というかSF系というか、よくありがちな系統のデザインです。フッターにも手を加えてあるので固定幅のようにも見えますが、文字数に応じて縦に伸縮してくれますので管理が楽です。

青サンプル  青ダウンロード

 

黒背景と白背景のバリエーションです。雰囲気は似ていますが、画像が変わっていたりGIFアニメがそれぞれ違っていたりとそれぞれ個性が違います。ファイルサイズの関係などでアニメーションを削除してwebファイルを軽くしたい場合は、そのままgifファイルを削除してしまえば正しく表示されると思います。白背景バージョンはFC2ブログ用にも採用させていただきました。結構好調にダウンロードしていただいています。

黒サンプル  黒ダウンロード

白サンプル  白ダウンロード

ホームページ素材集のIFDのトップページへ