テンプレート使用例
1テンプレートをチェック
購入したテンプレートのファイルを「Lhaplus *フリーソフト」等の解凍ソフトで解凍し、ファイルがきちんと揃っているか確認します。
- index.html…HTMLで書かれたindexページです。
- page.html…HTMLで書かれた個別用ページです。
- style1.css…ページのデザインを指定するファイルです。
- img（フォルダ）…ページで使用する画像が入っているフォルダです。
2メモ帳などのソフトでページファイルを開く
「メモ帳」や「TeraPad *フリーソフト」などのソフトを使い編集します。「DreamWeaver」だとデザイン表示の際に若干のデザイン崩れがございますが、ブラウザでの表示には問題ありません。尚、「ホームページビルダー」での動作確認はしておりませんので、ご注意くださいませ。
「メモ帳」や「TeraPad」で開くと、文章が並んだ画面が出てきます。
これがHTMLです。このHTMLを使ってホームページが出来あがっていきます。
ファイルをダブルクリックで開くのではなく、ソフトを起動してから、
ソフトにある「ファイルを開く」等のメニューから開いてください。
3サイトに関する情報を記入
上部に<head>と</head>というタグがあります。その中にサイトの名前、キーワード、説明を記入します。この設定をしますと検索の時に役立ちます。
*タグは<head>など<>で囲まれたマークのことを言います。
サイトの名前は<title>と</title>の中に書きます。
このタイトルはページをブラウザで表示した際にページの上部に表示されます。また、検索サイト等で検索された時にも表示されます。
キーワードはサイトに関連する語句を並べます。するとそのキーワードで検索された時に検索サイト等で表示されるようになります。もし複数のキーワードを使用される場合は半角の「,」で区切ります。
サイト説明は「Yahoo」などの検索サイトで検索された時に表示される文章です。説明があると、どのようなサイトなのか分かりやすくなります。
4フッターのクレジット表記を変更する
今度は下部にある<div id="footer">と</div>に以下のタグが入っています。
<address>CopyRight (c) サイト名 All Rights Reserved.</address>
こちらの「サイト名」にサイトの名前を入れます。
5カスタマイズ
テンプレートは基本的に、
ヘッダー・ラインメニュー・トップ画像・コンテナー・コンテンツ・サイドメニュー・フッターの7つの構成になっています。
*構成はテンプレートによって異なります。
HTMLではヘッダ～フッターまで順に上から下へと並んでいます。
もしヘッダーとラインメニューの位置を入れ替えたい場合は、
<!--○○ここから-->から<!--○○ここまで-->
のタグをそれぞれコピーし順番を入れ替えます。
*サイドメニューとコンテンツの順番を逆にしても
位置が入れ替わることはありませんのでご注意ください。
このメニューやコンテンツ内のレイアウトのカスタマイズも先ほどと同様に、
HTMLで<!--○○ここから-->から<!--○○ここまで-->
のタグをコピーもしくは切り取りして任意の場所に貼ります。
不要ものは同様に<!--○○ここから-->から<!--○○ここまで--> を選択し、キーボードの「Backspace」や「Delete」などでそのまま削除します。
この様に、コンテンツ内にあるボックス(枠)を
コンテンツ内のどこかに移動させる事はできますが、
サイドメニューにあるものを
コンテンツ内で使用することはできません。
同様にコンテンツ内のものをサイドメニューへ移動させる事はできません。
基本はコンテンツにあるものはコンテンツ内で、
サイドメニューにあるものはサイドメニュー内で切り貼りします。
画像に関してはサイドやコンテンツの最大幅を越えなければ移動は可能です。
6文章を編集
ページに表示される文章を編集します。
<h2>サイトタイトル</h2>のように
< >と</ >に囲まれた文章のみ編集できます。
もし文章の途中で改行したい場合は
改行する前の最後の文字の後に、
<br />を入れてください。
文章にリンクを張る場合は
<a href=" ">と</a>のタグを使います。
" "の中にリンク先を入れ、このタグを、
リンクを張りたい文章に囲みます。
*↓の例は移動先を「page.html」というファイルにした場合です。
ラインメニューやサイドメニューも 同じように<a href=" ">と</a>のタグでリンクしています。
7画像を差し替える
使用される画像を画像編集ソフトを使用し、 ページにサンプルとして入れてある画像と 大きさ・ファイル名・ファイル形式を同じにし、 「img」のフォルダへ前の画像を上書き、もしくは、置換します。
ファイル形式については、名前変更で拡張子(.jpgや.gifなど)を変えると、 不具合がおきますの、画像編集ソフトで保存する時にファイル形式を設定してください。
別の設定にする場合はHTMLでの編集作業が必要になります。 サイズ変更はテンプレートによってデザインが崩れる事もございます。
（例）ファイル名、高さを変えた場合
<img src="../img/top.jpg" width="800" height="200" alt="TOP画像" >
<img src="img/big_photo.jpg" width="800" height="300" alt="TOP画像" />
*上記の例はわかりやすように赤字で表示しています
<img>の中にあるタグは…、
src…画像が置いてある場所と画像の名前
width…画像の幅
height…画像の高さ
alt…は画像が表示されない時など替わりに表示される文字
となっています。
画像にリンクを張る場合は、<a href="">と</a>のタグを<img>のタグに囲みます。 ""の中にはリンク先のファイル名を入れます。
尚、テンプレートに使用されている画像で「Sample」と書かれたものは、 実際にそのテンプレートを使用する際には別の画像へ差し替えてください。 「Sample」と書かれていない画像に関してはそのまま使用して頂いてもかまいません。
8メニューを設定する
ラインメニューやサイドメニューにあるリンクの設定をします。 もしラインメニューを使用されない場合はその部分を削除してください。
メニューでは<a href=" ">にある""の部分に リンク先のファイル名を入れ、 さらに<a>と</a>に囲まれた文字を編集します。
メニューでは<a href=" ">にある""の部分と、 この<a>と</a>に囲まれた文字のみを編集します。 もしメニューを増やしたい場合は、 <li>から</li>のタグをコピーして、 <ul>と</ul>の中に入れます。
9ページを保存する
ホームページで一番初めに表示するページ（通称：扉やTOPページなど）の場合は
そのまま上書き保存してください。
他のページの場合は半角英数字（-や_などの一部の記号も使用可能）で別名保存してください。
その際は「index.html」と同じように最後に「.html」を付け加えてください。
10サーバーへUPする
「FFFTP *フリーソフト」などのFTPソフトを使用し、必要なファイルをお使いのサーバーへUPします。FTPソフトの使用方法は各ソフトの説明をご覧ください。
必要なファイルを全てUPしましたら設置完了です。
ホームページ更新の際は、編集したファイルのみサーバーへUPしてください。
もしサーバーを持っていない方はレンタルサーバーなどで借りてください。
注意事項
CSSのカスタマイズはHTMLとCSSの知識がある方のみでお願いします。
