ホームページ・テンプレートの設置方法

このページでは、ダウンロードいただいたテンプレートを、ウェブ上に設置する方法を紹介していきます。

流れですが、まずは下記にある、無料の 「ホームページ・テンプレートの設置方法PDF」 をダウンロードしてください。電子書籍のようなマニュアルです。

そちらを参考にするか、または、このページを最後まで読み進めてください。１ページで簡単に設置できる方法をまとめて紹介していますので、参考にしてみてください。

ホームページ・テンプレートの設置方法PDFをダウンロードしよう！

TempNateでは、テンプレートの設置方法をまとめたPDFファイル（冊子） を無料で配布しています。ぜひ、ダウンロードしてご利用いただければ幸いです。

HPテンプレート設置マニュアル ホームページビルダーでのテンプレート編集方法 alpha editでのテンプレート編集方法 メモ帳でのテンプレート編集方法 HTML&スタイルシートのカスタマイズ方法

ホームページ設置マニュアルの専用ページもございます

より詳しい情報を知りたい、または、ある程度の知識があるという方は、下記の専用ページである、「ホームページ作成マニュアル」 を参考にしてください。専用の解説ページへ （ クリック↓ ）


●TempNate ホームページ作成マニュアル

実用的なテンプレート素材

　　　　

　　　　

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

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

お客様にうれしいメッセージをいただきました （抜粋）

林 千鶴様 （企業サイトにて使用）

「弊社で新しいサービスを始めるにあたって、様々なブログなど探したりしましたが、
御社のこのようなテンプレートがあったおかげで、とても楽にホームページを作成できそうです。
タグといえば画像を貼ることくらいしか知らない私でも、さくさくと製作がすすんでいます。

ホームページを作るのは初めてなのですが、説明を丁寧に書いてくださっているのでメモ帳で編集でき、
初心者でも使えて非常にありがたく思っております。本当に心より感謝申し上げます。」



宮城県の高等学校さま （学校サイトに利用）

大変お世話になっております。ホームページの担当をしております。
本日、「高等学校のウェブサイト」を新しくしましたので、連絡申し上げます。
紹介でテンプネートのテンプレートを知りました。伺ったところ、無料で使用できるとのことで、大変ありがたいと思いました。よろしくお願い申し上げます。

（ TempNateより　「うれしい声をいただき、誠にありがとうございます！」 ）

テンプレートのご利用サイト・サンプル

天賦眼科クリニックHPへ （サンプル・ホームページ）

１ページで解説！設置方法 ８つのステップ - 目次

　

こちらではTempNateが配布しているテンプレートを利用して、ホームページを開設するまでの簡単な流れを紹介していきます。TempNate ホームページ作成マニュアルを簡単にまとめた内容になります。ここでは主に９つのステップで紹介しています。

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

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

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

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

Step５ : ホームページビルダー（ホームページ作成ソフト）を利用する場合

Step６ : フリーのホームページ編集ソフト alpha EDIT を利用する場合

Step７ : メモ帳など、テキストエディターでのカスタマイズ方法

Step８ : ロゴ画像をサイトタイトル部分に使用する方法

【アクセス編】 : SEOを考慮したHTML・CSSの説明 （カスタマイズ方法）

【アクセス編】 : アクセス解析＆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フォルダ」 ・・・ 画像が入っているフォルダです。背景、ヘッダー、タイトルバーなどの画像が入っています。

ファイルの作成＆編集方法について

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

ホームページ作成ソフトやメモ帳ソフトなどを利用すれば、ファイルの内容を変更できますが、Windowsなどに付属されている、メモ帳などのエディターソフトでも編集できます。




今回はダウンロードしたファルダにある index.html というファイルがトップページになります。




●index.htmlファイルを編集する方法


Windowsなどに付属されている、メモ帳などのエディターソフトで編集する事ができます。

または、ホームページビルダーなどのホームページ作成ソフトが便利です。

基本的には、サイトのタイトル、サイトの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

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などに付属しています）】

1. まず、使用したいお手持ちの画像をデスクトップなどに用意します。

2. 左下の「スタートボタン」→「すべてのプログラム」→「アクセサリー」→「ペイント」を開きます。

3. ペイントのメニューから、「ファイル」→「開く」→「デスクトップ」→「画像ファイル名」をクリックして画像を開きます。

4. 「変形」→「キャンパスの色とサイズ」→「サイズを入力」→「ピクセル」→「OK」をクリックします。すると、そのサイズで画像が切り抜かれた様な形になります。

5. 単純にサイズを少し縮小、拡大したい場合は、「変形」→「サイズ変更/傾斜」で希望する比率を入力してください。すると、画像サイズがその比率で変更されます。

* 画質を考えると、Gimpなどのソフトもおすすめです。

6. この画像の名前を「head-img」など、元のテンプレート素材の中に入っていた、画像名で保存してください。

7. 元のテンプレート素材に入っていた画像に上書き保存してください。そして、ブラウザで確認してみましょう。

この流れで画像がカスタマイズ（変更）できます。


★詳しくは、「TempNate ホームページ作成マニュアル」の、トップ画像や背景画像の変更について を参照してください。


●注意点

上記の様に、用意した手持ちの画像に変更する場合は、ファイル名とサイズを、元から入っているサンプル画像と同じにしてください。

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

そしてimgファルダの中にある画像に上書きで保存して、画像の内容だけを変更してください。すると、元の画像が、新しい画像にきれいに変更されます。

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

レンタルサーバーとは、自分の作ったページを管理してくれる場所です。 ホームページを開始するには、作成したテンプレートのファイルを、サーバー会社に送って初めて表示できます。サーバーはレンタルするのが一般的です。

まずは、プロバイダーのレンタルサーバーや、会社のサーバーなどが、無料で利用できる事がありますので、そちらを検討してみてください。また、無料サービスがたくさんありますので、そちらをご利用ください。

無料サーバでは、「インフォシーク isweb」などがあります。例えば、iswebライトでは、無料で50MBのファイル容量が利用できます。CGIなどのサービスも利用できます。その他にも、人気のサービスを掲載しておきます。


Yahoo!ジオシティーズ ホームページスペース

無料で50MBのファイル容量が利用できます。400万人以上に利用されています。


FC2 ホームページ

無料で1GBのファイル容量が利用できます。１行広告もなくなり、商用でも利用できます。




【有料のレンタルサーバーについて】

長期運営する場合や、会社、お店などのホームページは、有料レンタルサーバーがおすすめです。まずはやり方がわかりやすい、ロリポップ（月額263円）のサービスを利用してみると、スムーズにホームページが開設できますので、おすすめです。

有料サーバーの比較サイトを参考にしてみてください。

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

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


レンタルサーバーが決まれば、早速オンラインで申込みましょう。 まず利用してみないとわからないと思います。登録すればその日にすぐに開設出来ますので、まずは一度利用してみましょう。

★詳しくは、「TempNate ホームページ作成マニュアル」の、失敗しないレンタルサーバーの選び方 を参照してください。

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

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

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

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

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


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

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




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

では、実際にホームページ・ファイルをサーバーにアップロードしましょう。デスクトップなどにあるHPのフォルダの中身（index、img、styleファイル）をまとめて選択し、そのままFFFTPソフトの画面の右側にドラッグ（マウスの左クリックを押したまま、FTPソフトの右側で離す）するだけでアップロードできます。初めての場合は、１つ１つファイルをドラッグしてみてください。



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


●URLアドレスを入力して、サイトを確認しよう！

ホームページ・ファイルをサーバーに転送（アップロード）した後は、アップロードしたサーバーのURLアドレスを入力して、お使いのブラウザで確認してみてください。

★詳しくは、「TempNate ホームページ作成マニュアル」の、サーバーにファイルをアップロードする方法 を参照してください。

Step５ : ホームページビルダー（ホームページ作成ソフト）を利用する場合

ホームページのコンテンツを作成するには、ホームページビルダーなどのホームページ作成ソフトを使用すると便利です。

★詳しくは、「TempNate ホームページ作成マニュアル」の、ホームページビルダーでのホームページ作成方法 を参照してください。


公式サイトでは、体験版が30日間は無料で利用できます。その体験版のページに、ソフトの操作マニュアルがダウンロードできる場合があるのですが、これはホームページ制作に大変役立ちますので、ぜひダウンロードしてみてください。

ホームページ・ビルダー体験版
http://www-06.ibm.com/software/jp/internet/hpb/down/14/taiken.html




◆まずはソフトの初期設定をしよう！

ホームページ・ビルダーを使用して、テンプレートを編集していただく際には、まず最初に簡単な設定が必要になります。主に必要なのは 「DOCTYPE宣言の設定」 「びっくりマークの設定」 の２つです。

■ホームページビルダーでのページ編集で必ず必要な設定２つ★（重要）

1. DOCTYPE宣言を設定する！

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



●ホームページビルダーのDOCTYPE設定を変更する方法
1. まず、ホームページビルダーにて、「ツール」→「オプション」の「ファイル」タブを表示してください。

2. 次に、その中の「DOCTYPEを出力する」にチェックを入れてください。

3. そして、DOCTYPEを下記に変更してください。


●新しく入力するDOCTYPE宣言文 （コピーして入力してください）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

* 必ず最後まできちんと入力してください。上記の２列をまとめてコピーすると、１行目しか入力できませんのでご注意ください。

さらに詳しくは、よくある質問の「ホームページビルダーで編集した際に左寄せで表示される件」 を参照ください。
http://tempnate.com/xoopsfaq+index.cat_id+1.htm#q15

2. サイドメニューがずれるので、ビックリマークを見えなくする

「ページ編集」でテンプレートのindexページを開いた場合、（！） ←こちらのマークが表示されると、メニューが下にずれてしまいます。これはコメントアウトというマークなのですが、これを見えなくするか、削除していただく必要があります。

まずは、見えなくする方法をご紹介します。ホームページビルダーにて、「ツール」→「オプション」の「表示」タブを表示してください。

そして、左上の 「編集記号」 の中にある 「コメント、スクリプト記号」 のチェックを外してください。これで、（！）マークが消えて、きれいにサイドメニューが表示されます。

この方法がわからない場合は、メニューあたりの（！）（！）を削除してみてください。すると、１ページの中に、レイアウトがきれいに表示されます。




★ページの作成方法に関してｊは、「TempNate ホームページ作成マニュアル」の、ホームページビルダーのHPテンプレート編集方法 を参照してください。

Step６ : フリーのホームページ編集ソフト alpha EDIT を利用する場合

alpha EDIT などの、フリーのホームページ作成ソフトを使用すれば、無料でホームページが作成できます。

★詳しくは、「TempNate ホームページ作成マニュアル」の、alpha edit でのホームページ作成方法 を参照してください。


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


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


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

※Windows Vistaをご利用されているユーザー様は、Microsoft （マイクロソフト社） の DHTML Editing Control をダウンロードすれば、Vistaでも使用できます。

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

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




●その他の人気ソフト

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

Step７ : メモ帳など、テキストエディターでのカスタマイズ方法

トップページなどのファイルを編集する場合は、 ホームページ作成ソフトを利用すれば、手軽にファイルの内容を変更できますが、Windowsなどに付属されている、メモ帳などのエディターソフトでも編集できるので、使い方をご紹介します。

★ちなみに、詳しくは、「TempNate ホームページ作成マニュアル」の、メモ帳でのHPテンプレート編集方法 でも詳しく解説していますので、参考にしてください。




ダウンロードしたファルダにある index.html というファイルがトップページになります。




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


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


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


1. メモ帳を開く

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

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

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


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





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

「ホームページ・タイトル」という日本語が入っている部分に、あなたのホームページのタイトルを入れてください。









4. メインメニューを変更します。 # の部分に、各ページのアドレスを入れてください。メニューの内容は、自由にカスタマイズしてください。








5. メインコンテンツ部分を変更します。文章の見出しと、内容・本文の所です。




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

<h1>〜</h1> これは大見出しの部分です。サイトのキーワードや、コンセプトなどを入れてください。

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

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

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

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

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

<br /> とは改行です。






6. 次に、フッター（下部）にあるコピーライト表示部分にある「SITE NAME」という所に、あなたのサイト名を入力しましょう。









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

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





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

★詳しくは、「TempNate ホームページ作成マニュアル」の、メモ帳でのHPテンプレート編集方法 でも詳しく解説していますので、参考にしてください。

Step８ : ロゴ画像をサイトタイトル部分に使用する方法

テンプレートのカスタマイズで、人気なのが、「サイトタイトルをロゴ画像にしたい」という項目です。こちらの方法は、下記のページを参考にしてください。

ロゴ画像をサイトタイトル部分に使用する方法

ロゴ画像を入れるため、サイトタイトルの位置を修正したい

【アクセス編】 : SEOを考慮したHTML・CSSの説明 （カスタマイズ方法）

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

ですが HTMLタグを直接入力する場合もあると思いますので、簡単にHTMLタグについて記載しておきます。 ここでは、SEO（検索エンジン最適化）を考慮したカスタマイズの方法をご紹介いたします。

SEOとは、検索エンジンからのアクセスユーザー向けに、サイトを最適化する方法、または技術です。

SEO対策は、内部要素の最適化と、外部要素の最適化に分けられます。内部最適化とは、各ページのタイトルにしっかりとキーワードを含めたりする、サイト内部の施策の事です。

外部最適化とは、他のページからのリンクをしっかりと構築する施策です。Yahoo!やGoogle、bingなどの検索エンジンでは、リンクを投票とみなします。そして、価値あるサイトからのリンクをどれだけされているか、で評価が高まります。

さらには、どんな言葉でリンクされているかも重要になります。例えば、「行政書士 名古屋」という言葉でリンクされていると、検索エンジンでは、このサイトは「行政書士 名古屋」のサイトなんだな、と認識され、このキーワードでの順位に影響します。この、他のサイトにリンクされているテキストの事を「アンカーテキスト」と言います。こちらは検索で順位を決定する重要な項目の１つです。

外部最適化の方法としては、その他には、関連するサイトと相互リンクをしあったり、自分たちの運営サイトで、関連するテーマのサイト同士でリンクをして、グループで価値を高めたり、Yahoo!カテゴリなどに有料で登録するなどの方法があります。

ですが、自身で中小のディレクトリなどにたくさん登録するなどの方法は、評価を下げてしまします。また、フレーム構造にしないとか、１ページに100のリンクを掲載しないなどの、やってはいけない事がありますので注意が必要です。

★ちなみに、詳しくは、「TempNate ホームページ作成マニュアル」の、HTMLの詳細について（SEO内部要素） でも詳しく解説していますので、参考にしてください。


●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> タイトルタグです。ここにはサイト名を記載し、メインキーワードを配置しましょう。メインキーワードを先にもってくる、というのも１つの方法です。また、テキストは35文字程度までに抑えてください。こちらはSEOでは大変重要な項目です。





ヘッダータグ

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






メタタグ

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


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> これは大見出しの部分です。サイトの紹介などの１行テキストを入れてください。SEOでの重要項目です。

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

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





本文タグ

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

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





画像表示タグ

<img> これは画像を表示するタグです。「.gif」「.jpg」でサーバーにある画像ファイルを指定します。その際は、かならず alt属性にキーワードを入れてください。

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





リンク表示タグ

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

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





強調タグ

<strong>〜</strong> は重要なメインキーワードなどを太字で強調するタグです。ただし、使いすぎないように気をつけましょう。

<b>〜</b> は文字を太字で強調するタグです。検索エンジンでは、普通の太字として認識されるようです。





改行タグ

<br> は改行です。


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

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





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


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

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

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

【アクセス編】 : アクセス解析＆SEO対策・について

SEO対策に役立つサイトをご紹介いたします。特に、アクセス解析はぜひ設置してください。


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

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

→１日にアクセスされている数や、検索エンジンから、よくアクセスされているキーワードなどがわかります。

こうしたデータを分析して、お問い合わせ、などのゴールにつながるキーワードをみつけることができます。それがわかれば、そのキーワードでページをどんどん追加する、または内容を充実するなどの方法があります。

また、例えばイベント関係のサイトの場合、人気のコンテンツの順位がわかるので、よく見られているページがわかれば、そのページに最新イベントの紹介をする事で、来客に大きく影響する事があります。こうした試行錯誤をするために、必須のツールです。




■SEOに役立つサイト

Googleキーワードツール

メインとなるキーワードの月間の検索数を調べる事ができます。これにより、あなたのテーマの需要・ニーズがある程度わかります。どのキーワードで上位表示すれば、アクセスが増えるのか？などを想像したり、調べるための重要なツールです。


SEO Tools 診断ツール

Google / Yahoo / MSN 順位検索ツール




[人気の記事・コラム]

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

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

最後に（ホームページの運営とSEOについて）

現在は、ホームページにアクセスしていただくには、身内関係、日常の活動での告知、名刺、チラシ、DMに掲載するなどがありますが、特に検索エンジンからのアクセスが大きいと思います。

そのため、ホームページを運営していくには、この検索エンジンに最適化したレイアウト構造である事が、アクセスを増やす１つのポイントになっています。

このSEOに関しては、まずはコンテンツを充実させるのが前提になります。そして、ユーザーに役立つ情報を提供する事が重要です。ページの作成だけで手いっぱいという状況があるかもしれませんが、今後はどうやってコンテンツを充実し、リンクしてもらい、どのキーワードで上位表示を目指して、アクセスを集めるのかといった視点が必要になります。

そして、いずれは直接、サイト名で指名検索してもらって、リピート・アクセスしていただく事が目標になります。

当サイトをご利用いただいているユーザー様は、情報などを発信して、ホームページを多くの人に見てもらいたいという思いがあると思います。

そういった思いを、テンプレートという形で、少しでも支援できれば、幸いです。最後までお読みいただき、本当にありがとうございました。

ホームページ・テンプレートの設置方法の詳細

もっと詳しい情報は、下記の専用ページである、「ホームページ作成マニュアル」 を参考にしてください。専用の解説ページへ（クリック↓）


●TempNate ホームページ作成マニュアル