２．HTMLの編集方法・トップページの編集

トップページをインターネットブラウザで確認してみよう

index.htmlをダブルクリックします。

インターネットブラウザに表示されると思います。
テンプレート内でJavaScriptを使用している場合、セキュリティ保護のため・・・と表示されることがあります。
WEB上ではなくローカル上（PC内）でJavaScript実行する場合にこのような警告が出ることが多いです。

警告が表示されているバーを右クリック→ブロックされているコンテンツを許可→はいで
JavaScriptを実行して警告を消すことが出来ます。

メモ帳を開いてHTMLを編集しよう

HTMLを編集するにはメモ帳などのテキストエディタを使用します。
ではメモ帳でトップページのファイルindex.htmlを開いてみましょう。

トップページは通常「index.html」というファイルにします。こうすることで、
最後がように／（スラッシュ）で終わるURLにすることができます。
→トップのファイル名がtop.htmlなら、トップページのURLが「http://sample.sample.com/top.html」になる
→トップのファイル名をindex.htmlにすれば、http://sample.sample.com/でもアクセスができる！

メモ帳を起動→HTMLファイルをメモ帳の上へドロップという感じで開く方法が簡単です。

index.htmlを開いたらメモ帳に文字がたくさんの文字が表示されます。
これがindex.htmlファイルの中身になります。

タイトルタグ<title>～</title>を編集しよう

タイトル<title>～</title>は表では目立たない箇所ですが、Googleなどの検索エンジンで検索される際に重要な箇所になるので必ず設定しましょう。

<title>～</title>の間を編集します。

<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<title>ホームページのタイトル</title>
<meta name="keywords" content="キーワード,を,カンマ,区切り,で入力してください" />
<meta name="description" content="このホームページの説明を入れます。" />
<meta http-equiv="content-script-type" content="text/javascript" />

編集したらメモ帳のファイル→上書き保存で保存してください。
トップページを表示しているブラウザを更新するとブラウザの左上のタイトルが変わったと思います。

ついでにメタキーワード・メタ説明文も設定しておきましょう。
メタキーワードとメタ説明文はそこまで重要ではないですが、こちらも検索エンジンとかかわりがあるので、特にメタ説明文は変更しておきましょう。

<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<title>ホームページのタイトル</title>
<meta name="keywords" content="キーワード,を,カンマ,区切り,で入力してください" />
<meta name="description" content="このホームページの説明を入れます。" />
<meta http-equiv="content-script-type" content="text/javascript" />

TOPページの内容を編集しよう

ホームページの看板を編集します。

<div id="headLeft">
<p class="logo"><a href="./">ホームページ名(会社名)など</a></p>
</div>

大きな画像の上のテキストを変更します。

このサイトのテンプレートの場合は、大きな画像の上に文字が表示されるようになっています。
下記の箇所を変更してください。　h2で囲めば少し大きめの文字、pで囲めば小さい文字が入るようになります。
※文字数が多すぎると、レイアウトが崩れる場合があります。

<div id="mainImage">
<p><img src="./img/top/main_image.jpg" alt="メイン画像" width="820" height="250" /></p>
<div class="imgTxt">
<h2>キャッチコピーなどをここに入れられます</h2>
<p>画像中のテキスト（小）はココに入れてください<br /> 不要な場合は削除してください。</p>
</div>
</div>

インフォメーションの編集

更新情報やお知らせなどを表示する箇所ですが、日付・内容を記載したい内容に変更します。
<dt>～</dt>の間に日付、直後の<dd>～</dd>の間に日付に対する内容を入れます。

<h3>インフォメーション</h3>
<div id="infoMain">
<dl>
<dt>2011/01/13</dt>
<dd>更新情報などをいれます。</dd>
<dt>2011/01/12</dt>
<dd>更新情報などをいれます。</dd>
<dt>2011/01/11</dt>
<dd>ホームページオープンしました。</dd>
</dl>
</div><!--infoMain-->

内容を増やしたい場合は、日付・更新内容の日とまとまり（<dt>～</dt><dd>～</dd>）を追加します。

このページで解説したTOPページの編集のように、はじめは掲載したい内容を追加するよりも元々あるテキストの箇所を変更するという形の方が簡単です。

メニューの設定・編集方法は次のステップで説明します。