【CSSテンプレートの設置方法】
こちらではTempNateが配布しているテンプレートを利用して、ホームページを開設するまでの簡単な流れを紹介していきます。ここでは主に８つのステップで紹介しています。
【目次】
Step１ : CSSテンプレートのダウンロード方法
Step２ : テキストエディターでのテンプレートカスタマイズ方法
Step３ : ホームページ作成ソフトを利用する場合
Step４ : フリーソフトでのテンプレートカスタマイズ方法
Step５ : トップ画像や背景画像の変更について
Step６ : 失敗しないレンタルサーバーの選び方！
Step７ : サーバーにファイルをアップロードする方法
Step８ : アクセスアップ＆SEO対策・について
【注意点】
●変更できる部分について
サイト名、タイトルなどすべてカスタマイズできます。コピーライト部分もあなたのサイト名にしてください。
ちなみに「 design: TempNate 」という当サイトの著作権表示以外はすべてカスタマイズできます。
間違えやすいので、変更できるかできないかは、下の図を参考にしてください。
●あなたのサイトのコピーライト部分について
Copyright
(C) 2006 あなたのサイト名 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」というサイトを作成する場合）
4. サイト名を変更します。
5. メインメニューを変更します。
6. メインコンテンツを変更します。
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
【Step３ : ホームページ作成ソフトを利用する場合】
ホームページのコンテンツを作成するには、ホームページビルダーなどのホームページ作成ソフトを使用します。
フリーのホームページ作成ソフトを使用すれば無料でホームページが作成出来ます。
人気フリーソフトの「alpha
EDIT」はファイルをFTPサーバーにアップロード出来るのでとてもオススメです。下記のフリーソフト・ライブラリーのベクターにてダウンロード出来ます。
◆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" では「テンプレート」の部分に、ホームページの紹介文を入力してください。
Googleなどの検索結果で表示される文章の部分にあたります。下記はおもしろ動画のサイトの場合です。
<meta
name="description" content="おもしろ動画情報サイト・世界中の無料動画配信サイトからおもしろい動画だけを厳選"
/>
次に name=
"keywords"
では「テンプレート」の部分に、テーマになるキーワードをいくつか（あまり多いとスパムになります）入力してください。 半角の「,(コロン)」で区切ります。下記はおもしろ動画のサイトの場合です。
<meta name=
"description"
content= "動画, 無料, 視聴, 人気, おもしろ, 厳選"
/>
<link>
これはヘッダー内にある、スタイルシートを指定するタグです。このタグにより「style.css」ファイルに設定しているスタイルシートのデザインが反映されます。これはそのままでOKです。
■メインコンテンツタグ
<body>〜</body>
これはページに表示されるメインコンテンツ部分のタグです。そのままでOKです。
■ブロック要素タグ
<div>〜</div>
これはコンテンツ内の各ブロックでのデザインを指定する重要なタグです。
画面内の「ヘッダー（上部のタイトル画像部分）」「コンテンツ内容」「サイドメニュー」「フッター（下部のコピーライト部分）」これらのブロック内のデザインをスタイルシートで指定しています。そのままでOKです。
■見出しタグ
<h1>〜</h1>
これはブログでいう記事の見出し部分です。「NEWS」「Pick
Up」などコンテンツのタイトルが入ります。
※見出しを追加したい場合は、<h1>〜</h1>を追加していくだけで、見出しをどんどん追加できます。よくわからないという方や、別に見出しはいらないという方は、<h1>タグは消してもらってもかまいません。<h1>〜</h1>を削除してみてください。
■本文タグ
<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.gif ・・・ 800ピクセル ×
80ピクセル （FineBiz・テンプレートの場合）
●背景のバック画像のサイズ
back.gif ・・・
40ピクセル × 40ピクセル （テンプレートによって違います）
ファイルの横幅と縦幅のサイズは、ファイルの上で右クリックをして「プロパティ」→「詳細」にてピクセル数が書かれていますので、そちらを参考にしてください。
●ファイルの変更方法
ご自分で用意した画像ファイルを、ファイル名やサイズはそのままにして、画像の内容だけを上書きして変更してください。
【Step６ : 失敗しないレンタルサーバーの選び方！】
レンタルサーバーとは、自分の作ったページを管理してくれる場所です。
レンタルサーバーが決まれば、早速オンラインで申込みましょう。
まず利用してみないとわからないと思います。登録すればその日にすぐに開設出来ますので、まずは一度利用してみましょう。
▼独自ドメイン取得＆人気レンタルサーバー口コミ比較ガイド
レンタルサーバーの口コミ比較ガイド。価格・欲求・目的別にレンタルサーバーを比較できるので、満足のいく安定サーバーがみつかります。口コミランキングあり。
【Step７ : サーバーにファイルをアップロードする方法】
気に入ったテンプレートをダウンロードし、ページをカスタマイズしてファイルが完了すれば、作成したHTMLファイル達を、契約した自分達のサーバーに転送（FTPアップロード）しましょう！
転送が完了すれば、自分達のURLアドレスを入力する事でホームページが表示されます！
ファイルの転送（アップロード）にはFTP転送が使えるソフトが必要です。
FFFTPというファイル転送ソフトが人気です。
フリーでページ作成機能も充実している「alpha
EDIT」がオススメですが、ページ数が多い場合は一括送信が出来る「FFFTP」というソフトを利用して下さい。
下記のフリーソフト・ライブラリーのベクターにてダウンロード出来ます。
>>
FFFTPのフリーダウンロード
左側が自宅などのパソコンの中にあるファイルです。右側がサーバーにあるファイルになりますので、右側にファイルをアップロードして下さい。
●テンプレートのアップロード方法
ダウンロードしたテンプレートの、ファイルのカスタマイズが終了しましたら、デスクトップにあるフォルダごと、そのままFFFTPソフトの画面の右側にドラッグするだけでアップロードできます。
※ダウンロードをする前に必ず解凍ソフトのLhacaを先にダウンロードしてZIPファイルを解凍して下さい。
【Step８ : アクセスアップ＆SEO対策・について】
アクセスアップやSEO対策については下記を参照ください。
◆キーワードアドバイスツール
http://inventory.overture.com/d/searchinventory/suggestion/?mkt=jp
◆Google / Yahoo / MSN
順位検索ツール
http://dw230.bglb.jp/rank/
◆サーチエンジン一発登録・一発太郎
http://ippatsu.net/TARO/
[人気の記事・コラム]
◆ホームページ作成に関する本を無料で読める「Google Book Search」
◆SEOを考慮した、成功するホームページレイアウトの法則