CSSテンプレートの設置方法

　　　　

　　　　

当テンプレート素材は、個人サイト、企業サイト、大学などの教育関連、大学サークル、大学研究室、健康・ファッション通販、不動産、レンタルサーバー、観光、エステサロン、ネイルサロン、専門スクール、スポーツクラブ、タレント、アーティスト、病院、NPO、市議会の皆様など、数千サイト様に採用されており、各方面で幅広くご利用いただいております。

W3CによるWeb標準のチェックを通過した素材で、SEOを考慮したレイアウト設計になっています。 自由にカスタマイズできるため、皆様独自のホームページができます。デザインがすばらしいサイト様が多く、企業や学校や自治体など実際に実用的にご利用いただいております。

　

こちらではTempNateが配布しているテンプレートを利用して、ホームページを開設するまでの簡単な流れを紹介していきます。ここでは主に８つのステップで紹介しています。

目次

Step１ : CSSテンプレートのダウンロード方法
Step２ : テキストエディターでのテンプレートカスタマイズ方法
Step３ : ホームページ作成ソフトを利用する場合
Step４ : フリーソフトでのテンプレートカスタマイズ方法
Step５ : トップ画像や背景画像の変更について
Step６ : 失敗しないレンタルサーバーの選び方！
Step７ : サーバーにファイルをアップロードする方法
Step８ : アクセスアップ＆SEO対策・について

変更できる部分について【注意点】

サイト名、タイトルなどすべてカスタマイズできます。コピーライト部分もあなたのサイト名にしてください。

ちなみに「 design: TempNate 」という当サイトの著作権表示以外はすべてカスタマイズできます。 間違えやすいので、変更できるかできないかは、下の図を参考にしてください。

●パターン１


●パターン２




●あなたのサイトのコピーライト部分について

Copyright (C) 2008 あなたのサイト名 All Rights Reserved.

皆さんが、普段訪れているいろんなサイトの下記には、こうした英語表記があると思います。こちらが、無断でサイト画像などをコピーしたりしないでください、という意味を含む著作権表示になります。こちらは変更可能です。

Step１ : CSSテンプレートのダウンロード方法

まずはテンプレートページに行き、各テンプレートのページにある、DOWNLOADをクリックすれば、ZIPファイルがダウンロードできます。




ダウンロードしたファイルは、フリーソフトである解凍ソフトの Lhaca などをダウンロードして、ZIPファイルを解凍して下さい。ZIPファイルとは、圧縮されたファイルの事です。一括して容量を軽くするためにファイルを圧縮しています。デスクトップなどにダウンロードされますので、通常はダブルクリックすれば解凍できます。

ZIPファイルを解凍すれば、フォルダが出てきます。中身は「index.html」「style.css」「imgフォルダ」などです。




「index.html」 ・・・ ホームページのトップページにあたるファイルです。

「style.css」 ・・・ スタイルシート。こちらにて背景画像などを指定しています。このスタイルシート・ファイルを変更するだけで、ブログの様に手軽にデザインを変更する事ができます。

「imgフォルダ」 ・・・ 画像が入っているフォルダです。背景、ヘッダー、タイトルバーなどの画像が入っています。

Step２ : テキストエディターでのテンプレートカスタマイズ方法

それではダウンロードしたテンプレートを自分達のサイト名などに変更してカスタマイズしていきましょう。

ホームページ作成ソフトやメモ帳ソフトなどを利用すれば、ファイルの内容を変更できます。フリーソフトでは「alpha EDIT 」が使いやすいのでおすすめです。

通常は１からホームページを作成するには、まず始めにトップページにあたる index.html というHTMLファイルを作成します。



今回はダウンロードしたファルダにある index.html というファイルがトップページになります。ホームページファイルの作り方の基本やカスタマイズ・テクニックは下記サイトを参考にして下さい。


●index.htmlファイルを編集するシンプルな方法


Windowsなどに付属されている、メモ帳などのエディターソフトで編集する事もできます。簡単な流れを紹介します。HTMLタグについては、下の章で紹介している「HTMLタグの説明」を参考にしてください。


例） 「head-iblue」をデスクトップにダウンロードして編集する場合


1. メモ帳を開く

左下の「スタート」から、「すべてのプログラム」→「アクセサリー」→「メモ帳」をクリックして、メモ帳を開きます。

2. index.htmlファイルを開く

次に、メモ帳で「ファイル」→「開く」→「デスクトップ」→「head-iblue」→「index.html」（htmlファイルなので、すべてのファイルを選択すれば表示されます）


●メモ帳で index.html を開いた画面



3. まずはサイト情報を変更します。
（「携帯電話Navigator」というサイトを作成する場合）

* 下記の画像は旧デザインのため、現在のファイルの中身のHTMLとは違う箇所があります。






4. サイト名を変更します。







5. メインメニューを変更します。






6. メインコンテンツを変更します。見出しと本文の所です。




■<h1>とは大見出しタイトルタグ

<h1>〜</h1> これは大見出しの部分です。サイトの紹介などを入れてください。

<h2>〜</h2> これはブログでいう記事の見出しタイトル部分です。背景の画像は「スタイルシート（style.css）」というデザイン設定ファイルで指定しています。「当サイトからのごあいさつ」「更新情報」などコンテンツのタイトルが入ります。

※見出しタイトルを追加したい場合は、<h2>〜</h2>を追加していくだけで、見出しをどんどん追加できます。よくわからないという方や、別に見出しはいらないという方は、<h2>タグは消してもらってもかまいません。

<img src="" /> とは画像タグです。

<a href=""> とはリンクタグです。

<p> とは本文です。コンテンツ記事のテキストなどです。

<br /> とは改行です。





7. フッターを変更します。フッターとはサイトの下部分です。







8. 「index.html」ファイルをダブルクリックして立ち上げ、内容を確認します。

* セキュリティ警告が表示されるかもしれませんが、大丈夫ですので、許可をして表示してください。





9. これらの作業を繰り返してカスタマイズしてください。

この流れのように基本的には、サイトのタイトル、サイトのmeta情報（キーワードや紹介文など）、コンテンツ内容、フッターにあるコピーライト表示名などを変更します。

次に、コンテンツページ（main.html）、リンクページ（link.html）、お問い合わせページ（contact.html） など、好きなだけページを複製して作成していって下さい。


●フォルダの中身の例


ファイルのカスタマイズについては、「インフォシークホームページ作成 」を見ながら作業をすると、理解しながらサクサク進んでいくと思います。



インフォシークホームページ作成
http://iswebmag.hp.infoseek.co.jp/



■ホームページ作成に役立つサイト

ALL ABOUT -ホームページ作成入門-
http://allabout.co.jp/internet/hpcreate/

ホームページ作成支援「eWEB」
http://www.eweb-design.com/

初心者のためのホームページ作り
http://www.scollabo.com/banban/index.html

とほほのWWW入門
http://www.tohoho-web.com/www.htm

みんなのタグ辞書
http://heo.jp/tag/



■色彩・カラーに役立つサイト

WEB色見本 原色大辞典
http://www.colordic.org/

色彩辞典 JISによる日本の色
http://www.benricho.org/colors/50on.html



■画像素材の無料配布サイト

足成 - フリーフォト、無料写真素材サイト
http://www.ashinari.com/

ゆんフリー写真素材集 - 4000枚以上の写真素材
http://www.yunphoto.net/

morgueFile - 商用利用可 [海外サイト]
http://www.morguefile.com/



■ロゴ制作・写真加工に役立つフリーソフト

ペイント （Windowsなどに付属しています）
左下の「スタート」から、「すべてのプログラム」→「アクセサリー」→「ペイント」をクリックして、メモ帳を開きます。画像のファイルサイズなどを変更できます。

GIMP 日本語版 - 画像の作成や加工
http://www.geocities.jp/gimproject/gimp2.0.html



■アクセス解析・フリーソフト

Google Analytics - ページに貼り付けるだけ
http://www.google.com/analytics/ja-JP/

Step３ : ホームページ作成ソフトを利用する場合

ホームページのコンテンツを作成するには、ホームページビルダーなどのホームページ作成ソフトを使用します。 フリーのホームページ作成ソフトを使用すれば無料でホームページが作成出来ます。

■ホームページビルダーでのページ編集について多いご質問

ソフトを使用して、ページを編集したりして「index.html」ファイルなどを上書き保存した際に、いざページを表示してみると、レイアウトが左寄せで表示される場合があります。これは、DOCTYPE宣言というHTMLタグが上書き保存されてしまっているのが原因です。修正する方法は下記のQ&Aを参考にしてみてください。

「ホームページビルダーで編集した際に左寄せで表示される件」
http://tempnate.com/xoopsfaq+index.cat_id+1.htm#q15

■フリーのホームページ編集ソフトについて

人気フリーソフトの「alpha EDIT」はファイルをFTPサーバーにアップロード出来るのでとてもオススメです。下記のフリーソフト・ライブラリーのベクターにてダウンロード出来ます。


●alpha EDITで開いた画面サンプル


alpha EDITのダウンロード （フリーソフト）
http://www.vector.co.jp/soft/win95/net/se272154.html

HeTeMuLuクリエイター （フリーソフト）
http://www.vector.co.jp/soft/win95/net/se256522.html

※ダウンロードをする前に必ず解凍ソフトのラカを先にダウンロードしてZIPファイルを解凍して下さい。

Lhaca -解凍ソフト-
http://www.vector.co.jp/soft/win95/util/se166893.html

Step４ : フリーソフトでのテンプレートカスタマイズ方法

「ホームページビルダー」「alpha edit」などで編集画面から内容を編集するのが一番簡単です。

ですが HTMLタグを直接入力する場合もあると思いますので、簡単にHTMLタグについて記載しておきます。


●HTMLタグの説明

ちなみにホームページはHTMLというソース（言語）で出来ています。 今ページを見ているお使いのブラウザ（Internet Explorerの場合）のメニュー「表示」→「ソース」をクリックすると表示されます。

下記の画像は「TeraPad」というフリーソフトで開いたHTMLの画面です。



HTMLソースはいくつものタグで構成されています。 HTMLタグは <> で囲まれています。

<html>ここに内容が入ります。</html>


そしてタグの終わりの部分には「 / 」スラッシュが入ります。 下記によく出てくるHTMLタグを書いておきます。

<title><head><meta><link><body><div><h1><p><img><a><b><br>

基本的には、これらのタグを覚えるだけでホームページは作成できます。



●htmlについてのイメージ画像


タイトルタグ

<title>〜</title> タイトルタグです。ここにはサイト名を記載しましょう。



ヘッダータグ

<head>〜</head> ヘッダー部分（サイトの上部）です。ページには表示されません。ホームページの情報に関する重要なタグです。

<meta> これはヘッダー内にある、ホームページの情報にあたるダグです。検索エンジンの検索結果画面で表示されます。必ず記載するようにしてください。


1. <meta name="description" content="テンプレート" />
2. <meta name="keywords" content="テンプレート" />


まず　name= "description"　はホームページの紹介文を入力してください。 下記はおもしろ動画のサイトの場合です。

[例] <meta name="description" content="おもしろ動画情報サイト・世界中の無料動画配信サイトからおもしろい動画だけを厳選" />


次に name= "keywords" はキーワードをいくつか入力してください。 あまり多いとスパムになります。半角の「,(コロン)」で区切ります。

[例] <meta name= "description" content= "動画, 無料, 視聴, 人気, おもしろ, 厳選" />


<link> これはヘッダー内にある、スタイルシートを指定するタグです。このタグにより「style.css」ファイルに設定しているスタイルシートのデザインが反映されます。これはそのままでOKです。



メインコンテンツタグ

<body>〜</body> これはページに表示されるメインコンテンツ部分のタグです。そのままでOKです。



ブロック要素タグ

<div>〜</div> これはコンテンツ内の各ブロックでのデザインを指定する重要なタグです。

画面内の「ヘッダー（上部のタイトル画像部分）」「コンテンツ内容」「サイドメニュー」「フッター（下部のコピーライト部分）」これらのブロック内のデザインをスタイルシートで指定しています。そのままでOKです。



見出しタイトルタグ

<h1>〜</h1> これは大見出しの部分です。サイトの紹介などを入れてください。

<h2>〜</h2> これはブログでいう記事の見出し部分です。「ごあいさつ」「更新情報」などコンテンツの見出しタイトルが入ります。

※見出しを追加したい場合は、<h2>〜</h2>を追加していくだけで、見出しをどんどん追加できます。よくわからないという方や、別に見出しはいらないという方は、<h2>タグは消してもらってもかまいません。<h2>〜</h2>を削除してみてください。



本文タグ

<p>〜</p> これはコンテンツ部分です。こちらに本文を記載しましょう。本文はなるべくこの「ピィ」のタグで囲んで下さい。

※よくわからないという方は、<p>タグは消してもらってもかまいません。<p>〜</p>を削除してみてください。



画像表示タグ

<img> これは画像を表示するタグです。「.gif」「.jpg」でサーバーにある画像ファイルを指定します。

<img src="http://●●●" border="0" alt="画像のタイトル">



リンク表示タグ

<a>〜</a> これはリンクを表示するタグです。

<a href="http://●●●" target="_parent"> （ウインドはそのままでページだけ移動）
<a href="http://●●●" target="_blank"> （別ウインドでページが開きます）



強調タグ

<b>〜</b> は文字を太字で強調するタグです。



改行タグ

<br> は改行です。


まったくわからない！という方はまずは「インフォシークホームページ作成」を見ながら作業をするとサクサク進んでいくと思います。

すぐに理解できなくても全然大丈夫です。まずは、テンプレートをダウンロードして、実際にいじってみる事が大事です。いじっているうちに覚える事ができます。



■スタイルシートについて


●スタイルシートについてのイメージ画像

「style.css」というファイルはスタイルシートになります。デザインを決める重要なファイルです。上の図のようなレイアウト構成になっています。

こちらに関しては、多少の知識が必要になります。ただし、こちらをいじらなくても、画像ファイルを変更するだけで、トップの画像は変更できます。なので、このままでも大丈夫です。

Step５ : トップ画像や背景画像の変更について

「imgフォルダ」 ・・・ 画像が入っているフォルダです。背景、ヘッダー、タイトルバーなどの画像が入っています。

これらimgフォルダ内のの画像を変更するだけです。自分の好きな写真にすればオリジナルのホームページが作成できます。



●トップ上画像のサイズ

header.jpg　・・・ 780ピクセル × 120ピクセル （head-leaf・テンプレートの場合）
header.jpg　・・・ 750ピクセル × 80ピクセル （head-iblue・テンプレートの場合）
header.jpg　・・・ 800ピクセル × 100ピクセル （FineBiz・テンプレートの場合）
main_photo.jpg　・・・ 780ピクセル × 100ピクセル （Style・テンプレートの場合）



●背景のバック画像のサイズ

back.gif　・・・ 40ピクセル × 40ピクセル （テンプレートによって違います）

ファイルの横幅と縦幅のサイズは、ファイルの上で右クリックをして「プロパティ」→「詳細」にてピクセル数が書かれていますので、そちらを参考にしてください。



●ファイルの変更方法

ご自分で用意された、オリジナル写真を用意します。そして画像編集ソフトなどを利用してサイズを編集します。「ペイント」などのソフトでも画像のサイズを変更できます。

◆ペイント （Windowsなどに付属しています）
左下の「スタート」から、「すべてのプログラム」→「アクセサリー」→「ペイント」をクリックして、メモ帳を開きます。画像のファイルサイズなどを変更できます。

ご自分で用意した画像ファイルを、ファイル名（header.jpgなど）やサイズは、元から入っているサンプル画像と同じにします。そして上書きして画像の内容だけを変更してください。

Step６ : 失敗しないレンタルサーバーの選び方！

レンタルサーバーとは、自分の作ったページを管理してくれる場所です。 レンタルサーバーが決まれば、早速オンラインで申込みましょう。 まず利用してみないとわからないと思います。登録すればその日にすぐに開設出来ますので、まずは一度利用してみましょう。


レンタルサーバー比較 ＆ 独自ドメイン取得ガイド

レンタルサーバーの口コミ比較ガイド。価格・欲求・目的別にレンタルサーバーを比較できるので、満足のいく安定サーバーがみつかります。口コミランキングあり。

Step７ : サーバーにファイルをアップロードする方法

気に入ったテンプレートをダウンロードし、ページをカスタマイズしてファイルが完了すれば、作成したHTMLファイル達を、契約した自分達のサーバーに転送（FTPアップロード）しましょう！

転送が完了すれば、自分達のURLアドレスを入力する事でホームページが表示されます！

ファイルの転送（アップロード）にはFTP転送が使えるソフトが必要です。 FFFTPというファイル転送ソフトが人気です。

フリーでページ作成機能も充実している「alpha EDIT」がオススメですが、ページ数が多い場合は一括送信が出来る「FFFTP」というソフトを利用して下さい。フリーソフト・ライブラリーの「ベクター」にてダウンロードできます。


>> FFFTPのフリーダウンロード

左側が自宅などのパソコンの中にあるファイルです。右側がサーバーにあるファイルになりますので、右側にファイルをアップロードして下さい。


●テンプレートのアップロード方法

ダウンロードしたテンプレートの、ファイルのカスタマイズが終了しましたら、デスクトップにあるフォルダごと、そのままFFFTPソフトの画面の右側にドラッグするだけでアップロードできます。



※ダウンロードをする前に必ず解凍ソフトのLhacaを先にダウンロードしてZIPファイルを解凍して下さい。


●URLアドレスを入力してサイトの確認

その後は、アップロードしたサーバーのURLアドレスを入力して、お使いのブラウザで確認してください。

Step８ : アクセスアップ＆SEO対策・について

アクセスアップやSEO対策については下記を参照ください。

Google / Yahoo / MSN 順位検索ツール
http://dw230.bglb.jp/rank/


[人気の記事・コラム]

ホームページ作成に関する本を無料で読める「Google Book Search」

SEOを考慮した、成功するホームページレイアウトの法則