ホームページ用の無料テンプレート
■2カラム/右メニュー/白ベース
- ピンク系 (XHTML + CSS3)
- 青系 1 (XHTML + CSS3)
- 青系 2 (XHTML + CSS3)
- 青系 3 (XHTML + CSS3)
- 青系 4 (XHTML + CSS3)
- 青系 5 (XHTML + CSS3)
- 青系 6 (XHTML + CSS3)
- 緑系 1 (XHTML + CSS3)
- 緑系 2 (XHTML + CSS3)
■2カラム/右メニュー/黒ベース
- 黒系 (XHTML + CSS3)
ホームページ用テンプレートの使い方
- 圧縮ファイル(ファイル名.zip)をダウンロードする
- ダウンロードした圧縮ファイルを解凍する
- 各ページの作成を行う
- 「style.css」を編集する
- 全てのファイルをアップロードする
■圧縮ファイルのダウンロード
お好みのテンプレートを選んで、
圧縮ファイルのダウンロードを行います。
■ダウンロードした圧縮ファイルの解凍
圧縮ファイルをダウンロードしたら、次に圧縮ファイルの解凍を行います。
OSに解凍機能が付属している場合はOSの解凍機能を使うと便利です。
OSに解凍機能が無い場合は専用のオンラインソフトを使う事になると思います。
解凍すると「css(フォルダ)」、「material(フォルダ)」、
「index.html」、「page-pattern-1.html」、「page-pattern-2.html」、
「sample-banner.gif」、「sample-image.gif」が現れます。
- css(フォルダ) (1)
- style.css (1)
- material(フォルダ) (2)
- aaa.gif
- bbb.gif
- ccc.gif
- ...
- index.html (3)
- page-pattern-1.html (3)
- page-pattern-2.html (3)
- sample-banner.gif (4)
- sample-image.gif (4)
(1) 「css(フォルダ)」はCSSファイル用のフォルダです。
「style.css」と言うファイル名のCSSファイルが入っています。
(2) 「material(フォルダ)」はテンプレートに使用している画像用のフォルダです。
フォルダ内の画像ファイルの数や内容はテンプレートによって異なります。
(3) 「index.html」はインデックス用(Webサイトのトップページ用)の雛形、
「page-pattern-1.html」、「page-pattern-2.html」は各ページ用の雛形です。
各ページ用のテンプレートは必要な分だけコピーして使います。
(4) 「sample-banner.gif」、「sample-image.gif」は
テンプレート内での画像の貼り方の例を示すために用いている画像です。
■各ページの作成を行う
各HTMLファイルを必要に応じてコピーし、
それらをテキストエディタ等で開いて各ページの作成を行います。
(テンプレート内にある全てのリンク先URI(URL)には初期値として
"http://web-design.dancing-doll.com/"を入れてありますが、
これらのリンク先URI(URL)はお使いになる方が自由に変更して構いません。
(但し、テンプレート中の削除禁止領域内にある
配布元(当サイト「素材屋!!」)へのリンクに付いては変更・削除を禁止しています。)
(各HTMLファイルは文字コードが「UTF-8」になっていますので、
「UTF-8」に対応したエディタを使わないと文字化けが起こります。)
■「style.css」を編集する
必要であれば「style.css」をテキストエディタ等で開いて編集を行います。
(「style.css」は文字コードが「UTF-8」になっていますので、
「UTF-8」に対応したエディタを使わないと文字化けが起こります。)
■全てのファイルをアップロードする
完成した全てのファイルを利用Webスペースにアップロードしたら作業完了です。
フリー素材・テンプレート
- ホームページ・ブログ用の無料テンプレート
- ホームページ用の無料テンプレート
- FC2ブログ用の無料テンプレート
- MT(MovableType)用の無料テンプレート