黒背景ベースのHPテンプレート集 +IFD+

[スポンサード リンク]

黒背景ベースのデザインテンプレート NO.48〜NO.49

XHTML1.0+CSS zipファイル

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

前作の画像をさらにカスタマイズして、より一層完成度を高めたものです。こちらも目の部分にハートが入っています。前作よりもハートの画像が滑らかに修正してあります。2カラムと3カラムの2パターン展開です。3カラムのほうはサムネイル画像とちょっと雰囲気が変わっています。

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

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

あまりカスタマイズする必要は無い感じです。というか、ちょっとカスタマイズしづらいかも。そのうちもしかしたらFC2ブログの方に移植させるかもしれません。

黒背景ベースのHPテンプレート NO.45〜NO.47

XHTML1.0+CSS zipファイル

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

結構怖い感じになったので、目の部分にGIFアニメのハート画像を加えたりして雰囲気をよくしようとしてみました。ギターを加えているドクロの画像です。1カラムのバージョンが3枚あります。上の二つは縦幅固定で、幅を超えると自動的にスクロールバーが出るようになっています。

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

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

こちらはイラストの画像を上に持ってきたHPテンプレートです。横に飾りとしてクロスを付けています。1パターンの展開です。

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

黒背景ベースのHPテンプレート NO.32

XHTML1.0+CSS zipファイル

マルチカラー ユニークレイアウト

サンプル  ダウンロード

星を集めて星の形を形成させて、色をそれぞれ変えていったユニークな黒背景ベースのHPテンプレートです。黄色い光を加えたのでなんかクリスマスな雰囲気がします。5つのメニュー項目とタイトルの部分で構成されています。ひたすら同じ作業で作るのに少々骨が折れました。

黒背景ベースのHPテンプレート NO.31


XHTML1.0+CSS zipファイル

2カラム右サイドメニュー

薔薇の画像を大胆にページ上部に配置したテンプレートです左右にも十字架で飾ってあります。ゴスロリ系。FC2ブログにも移植してあります。結構インパクトが強いので全ての方にお勧めできるというものではありませんが、こういった素材が好きな方もいらっしゃると思います。

サンプル  ダウンロード

黒背景ベースのHPテンプレート NO.30

XHTML1.0+CSS zipファイル

2カラム左サイドメニュー

ちょっとサムネイル画像が小さくてわかりづらいので、サンプルページの確認をお勧めします。大分雰囲気が変わるかと。IT風というか、サイバー風というか、なんと形容すればいいのかよくわかりませんが、シンプルに線の要素などを多用して作成したテンプレートです。GIFアニメーションが付いています。

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

黒背景ベースのテンプレート NO.22〜NO.29

XHTML1.0+CSS zipファイル

黒と赤ベース

黒と赤という、ロック系などでよく使われる配色を使って黒背景ベースのテンプレートを作りたかったので作成したHPテンプレートです。メニューの上部にはメニューバーがついていて、マウスオーバーで画像が変化するタイプです。残念ながら、カスタマイズでトップバナーを変えようとするとメニューバーも外さないといけなくなります。様々なレイアウトパターンを作成してあります。

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

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

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

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

色違いのバージョンです。こちらは比較的落ち着いた雰囲気なので、使いやすいかもしれません。カラー以外の基本的な要素はまったく同じで、こちらにもマウスオーバーするメニューバーがついています。

2カラム両サイドコンテンツのサンプル

2カラム両サイドコンテンツのダウンロード
2カラム右サイドメニューのダウンロード
2カラム左サイドメニューのダウンロード
3カラムのダウンロード

黒背景のHPテンプレート NO.21

XHTML1.0+CSS zipファイル

植物のような画像を背景に使用した、シックな雰囲気の黒背景ベースのテンプレートです。他のページのサムネイル画像をそのまま利用しているので画像が小さくなっています。これを作るのにphotoshopのブラシを使いましたが、これも自作してみました。

ブラックテンプレートのサンプル
2カラム右サイドメニューダウンロード
2カラム左サイドメニューダウンロード

黒背景ベースのテンプレート NO.19〜NO.20

XHTML1.0+CSS zipファイル

暗色系ベース

宇宙をイメージして作成したHPテンプレートです。ラインなどにも拘って作成しました。綺麗な感じですし、大胆でもあります。2カラムと3カラム両方作成しておきました。上部メニューは文字数を多くするとラインにかぶってしまうので少々使いづらいかもしれません。

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

黒背景ベースのテンプレート NO.18

XHTML1.0+CSS zipファイル
2カラム両サイドコンテンツ

背景にグレーを使い、コンテンツ部分は黒背景をグラデーションやパターンを使用してシックで落ち着いた感じに仕上げた黒背景ベースのHPテンプレート素材です。2カラムですが両側がコンテンツとなっています。英語圏のサイトだとよく見かけるのですが、日本だとメニューコンテンツ部分の無いレイアウトはあまり馴染みがないので使いづらく感じるかもしれません。縦幅固定です。

サンプル  ダウンロード

黒背景ベースのHPテンプレート NO.17

XHTML1.0+CSS zipファイル

2カラム左サイドメニュー

明度を変えるテクニックを使用したり、メニューバーを作成したり、メニュータイトルの部分にメタリックな素材を使ったりしクールに仕上げた黒背景ベースのHPテンプレート素材です。

サンプル  ダウンロード

黒背景ベースのテンプレート NO.14〜NO.16

XHTML1.0+CSS zipファイル

黒と寒色ベース 2カラム両サイドコンテンツ
2カラム左サイドメニュー 3カラム

デスクトップ画像にあるような画像を作成して、それをトップバナー部分に使用して作成したHPテンプレートです。2カラムや3カラムで、合計3パターンのレイアウトをダウンロードすることが出来ます。

2カラム両サイドコンテンツサンプル
2カラム左サイドメニューサンプル
3カラムサンプル

2カラム両サイドコンテンツ ダウンロード
2カラム左サイドメニュー ダウンロード

3カラム ダウンロード

黒背景ベースのHPテンプレート NO.13

XHTML1.0+CSS zipファイル

寒色と黒ベース 2カラム左サイドメニュー

グラデーションのかかった光のような画像を上部に設置してある左サイドメニューの2カラムHPテンプレートです。上部にメニューバーが付いています。ちょっと枠線などのセンスが微妙でした。

サンプル  ダウンロード

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

黒背景ベースのHPテンプレート NO.37〜NO.44

XHTML1.0+CSS zipファイル

暗色系ベース

こちらも宇宙の、惑星系の素材を使用して作成したデザイン性の高いHPテンプレートです。しばらく待っていると左や左下から惑星が出現します。FLASHを使用しています。勢いに乗って8パターンも作成してしまいました・・。多分気に入るレイアウトが見つかると思います。

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

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

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

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

ここから下のものはFLASHをカスタマイズしたものです。FLASHの部分でマウスを動かすと星のようなもので散らばります。マウスを縦断させると結構きれいだったりします。多少重くなりますがこちらのほうがデザイン性が高くなっています。

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

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

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

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

デザインテンプレートNO.34〜NO.37

XHTML1.0+CSS zipファイル

暗色系ベース

だんだんと惑星の部分が明るくなったりするFLASHを利用した黒背景ベースのHPテンプレートです。FLASHを実装した始めての素材です。幻想的で、キレイな感じに仕上がっています。性別問わず使っていただけると思います。以下2カラム2パターン、3カラム2パターン作成してありますので、雰囲気が気にいったけどレイアウトが合わないということも少ないと思います。1カラムなどは作成しませんでしたが・・

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

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

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

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

黒背景ベースのHPテンプレート NO.33

XHTML1.0+CSS zipファイル

黒と白ベース 一応2カラム左サイドメニュー

2カラムの幅云々を抜きにして、クールさとデザイン性を高めたHPテンプレートです。あまり文章の多いHPには向いておらず、潔くコンテンツをかなりシンプルにしないと使えないテンプレートです。ただ、その分HPを作って公開する作業がかなり楽で済みますが。(笑

サンプル  ダウンロード

黒背景ベースのテンプレート NO.9

HTML4.01+CSS zipファイル
夜空のような画像を使用し、全体的に幻想的で綺麗なイメージに作ってある黒背景ベースのHPテンプレートです。必要があれば画像を並べて使えるように初期設定でしてあります。メニュータイトル部分なども場合に応じて減らしたり増やしたりすることができます。

サンプル  ダウンロード

黒背景ベースのHPテンプレート NO.8

HTML4.01+CSS zipファイル

暗色系ベース 2カラム左サイドメニュー

宇宙に浮かぶ月のようなトップバナー画像を使用したHPテンプレートです。サムネイル画像でも結構わかりますが、インパクトは強くなっています。光が差し込んでいるような感じです。クールでかっこいいですが女性の方にもおすすめです。

サンプル  ダウンロード

黒背景ベースのテンプレート NO.7

HTML4.01+CSS zipファイル
黒と白と赤ベース 2カラム左サイドメニュー
ゴスロリ風な雰囲気のある、黒背景ベースのHPテンプレートです。黒、白、赤を使い、月やハートなどの画像を編集してあります。右上にさりげなくちいさなハートをアクセントとしておいてあります。

サンプル  ダウンロード

黒背景ベースのHPテンプレート NO.6

HTML4.01+CSS zipファイル
黒と白ベース 2カラム左サイドメニュー
羽の画像を編集し背景に使用し、幻想的に仕上がっているHPテンプレートです。あまりモニターの小さめの環境だと画像が見えづらいと思います。白バージョンもあります。

サンプル  ダウンロード

黒背景ベースのHPテンプレート NO.6

HTML4.01+CSS zipファイル
黒と寒色ベース 3カラム両サイドメニュー
黒背景に、寒色系の画像を使った、クールなHPテンプレートです。パース感があり、また、光のラインが輝いているようで結構綺麗でもあります。実は枠線とかも光っています。前作のようにこちらも上部に左右の分割がある特殊なコンテンツ部分があるHPテンプレートとなっています。

サンプル  ダウンロード

黒背景ベースのテンプレート NO.5

HTML4.01+CSS zipファイル
赤と黒ベース 2カラム左サイドメニュー
こちらは前作の2カラムバージョンとなります。基本的にはレイアウト以外変わっていません。こちらも上部に特殊なコンテンツがあるレイアウトです。

サンプル  ダウンロード

黒背景ベースのテンプレート NO.4

HTML4.01+CSS zipファイル
赤と黒ベース 3カラム両サイドメニュー
黒背景に、トップバナー部分にタイポグラフィを赤い色を使いながら編集し、ロック風な主張の強い画像を使っている黒背景ベースのHPテンプレートです。上部に左右に分割された部分のあるカスタムレイアウトです。文面などはHPの内容に合わせてカスタマイズしてお使いください。

サンプル  ダウンロード

黒背景ベースのテンプレート NO2

HTML4.01+CSS zipファイル
黒と青ベース 3カラム両サイドメニュー
グラデーションのかかったドット柄のトップバナー画像とサイドの寒色系のグラデーションが特徴のクールな黒背景ベースのテンプレートです。涼しい感じがするので夏の時期に使うのもいいと思います。春とかでも構わないとは思いますが。

サンプル  ダウンロード

黒背景ベースのHPテンプレート NO1

HTML4.01+CSS zipファイル ブラックとグレーベース
クールでスタイリッシュな雰囲気のテンプレートです。トップバナー部分とサイドの枠線部分にメタリックで光を放っているような感じの画像を使用しています。

サンプル  ダウンロード

黒背景ベースのテンプレート NO.10

XHTML1.0+CSS zipファイル

黒とグレーベース 2カラム左サイドメニュー

透過を利用したダークなテンプレートです。少々怖い感じもしますね。画像とテキストを並べやすいようにCSSに設定してありますが、必要ないのであれば編集して使ってください。

サンプル  ダウンロード

黒背景ベースのテンプレート NO.12

XHTML1.0+CSS zipファイル

こちらも、申し訳ございませんが、他のページとサムネイル画像を共有しているためにそちらに合わせて画像が小さくなっています。よくわからない場合はサンプルHPのクリックを推奨します。

2カラムや3カラムをHTMLを編集するだけで決められるタイプのHPテンプレートです。雰囲気はグラデーションなどを使用しているためスタイリッシュな感じになっています。上部に画像用の配置スペースがあります。

サンプル
ダウンロード

黒背景ベースのHPテンプレート NO.11

XHTML1.0+CSS zipファイル

2カラム左サイドメニュー
HTMLファイルのみの編集で、2カラムとして使ったり3カラムとして使ったり色々できる柔軟な黒背景ベースのHPテンプレートです。他のページとも共有で画像を使っているのでちょっとサムネイル画像が通常よりも小さくなっています。サンプル画像は入れ替えてご使用ください。他の色のバージョンは違うページにあります。

サンプル
ダウンロード

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