|
|
|
 テンプレートのダウンロード方法 |
|
 |
|
 |
|
Downloadボタンをクリックするとダウンロードできます。 |
|
|
|
|
 |
ダウンロードしたファイルは左記のような 圧縮ファイル（Zipファイル）になります。
|
|
|
|
|
|
|
|
圧縮ファイル（Zipファイル）の解凍方法 |
|
|
|
|
|
ファイルを「右クリック」し、
解凍を選択すると解凍
できます。 |
解凍ソフト
＋Lhaca |
解凍できない場合は
こちらをDownload
してお使い下さい。 |
|
|
|
|
解凍するとフォルダの中には下記のファイルが入っています。 |
|
※ファイルの中身は、テンプレートによって異なります。 |
|
| index.html |
page1.html |
CSSファイル |
imgファイル |
jsファイル |
 |
|
 |
 |
 |
|
|
|
|
|
|
|
|
| ページを追加する方法 |
|
| 事前にホームページのページの構成を考えます。 |
| 各ページの内容やページ数が決まれば、ページのファイル名を決めます。 |
|
| 例えば、メニュー1～メニュー7というページを作成するとします。 |
| それぞれのファイル名を page1.html ～ page7.html とういうファイル名にします。 |
|
| ①index.htmlをメモ帳で開いて下さい。 |
| 下記の部分を書き換えます。 |
|
<h3>Menu</h3>
<ul>
<li><a target="_top" href="page1.html"> MENU1</a></li>
<li><a href="#"> MENU2</a></li>
<li><a href="#"> MENU3</a></li>
<li><a href="#"> MENU4</a></li>
<li><a href="#"> MENU5</a></li>
<li><a href="#"> MENU6</a></li>
<li><a href="#"> MENU7</a></li>
</ul>
|
|
 |
|
| 下記のように書き換えて下さい。 |
|
<h3>Menu</h3>
<ul>
<li><a target="_top" href="page1.html"> メニュー1</a></li>
<li><a target="_top" href="page2.html"> メニュー2</a></li>
<li><a target="_top" href="page3.html"> メニュー3</a></li>
<li><a target="_top" href="page4.html"> メニュー4</a></li>
<li><a target="_top" href="page5.html"> メニュー5</a></li>
<li><a target="_top" href="page6.html"> メニュー6</a></li>
<li><a target="_top" href="page7.html"> メニュー7</a></li>
</ul> |
|
|
|
|
| ②同じようにpage1.htmlもメモ帳で開き、上記のように書き換えて下さい。 |
|
| ③page1.html をコピーして フォルダ名を page2.html ～ page7.htmlにして下さい。 |
|
| ④index.htmlをインターネットエクスプローラーで開くと、作成したメニューページへのリンクが |
| 完成しています。 |
|
| ⑤他のメニュー部分からサイト内のページへリンクを貼る場合も上記と同じ作業を行って下さい。 |
|
|
|
|
|
|
| リンクを貼る方法 |
|
|
| ※テンプレートでは分かりやすいようにリンク部分はすべて "#"にしてあります。 |
| <a href="#">MENU1</a> |
|
|
| ・サイト内のリンクの場合 |
|
| リンクのサンプル |
| HOME |
| HTMLの記入例 |
|
<a href="index.html" target="_top">HOME</a> |
|
|
| 解 説 |
|
<a href="ファイル名" target="全画面の指定">リンクの文字</a> |
|
|
| ・外部へのリンクの場合 |
|
| リンクのサンプル |
| テンプレート工房TAKE |
| HTMLの記入例 |
|
<a href="http://web.goodlook.jp" target="_blank">テンプレート工房TAKE</a> |
|
|
| 解 説 |
|
<a href="リンク先のURL" target="別ウィンドウで開く指定">リンクの文字</a> |
|
|
|
| 画像を変更する方法 |
|
|
| 変更する画像は基本的に imgフォルダ内にある 画像とほぼ同じサイズにして下さい。 |
| サイズが違う場合、レイアウトが崩れる場合があるので注意して下さい。 |
|
| 用意した画像を、imgフォルダに保存して下さい。 |
|
| index.htmlをメモ帳で開いて下さい。 |
| 画像の指定は下記のように記載されている部分になります。 |
|
| HTMLの記載例 |
|
<img src="img/img.jpg" width="630" height="171"
border="0"> |
|
|
| 解 説 |
|
<img src="img/画像ファイル名" width="横幅" height="高さ" border="0"> |
|
|
| 画像ファイル名を変更したい画像ファイルの名前に変更すればOKです。 |
|
| 画像にリンクを貼る場合 |
|
|
|
|
<a href="リンク先URL" target="全画面か別ウィンドウの指定"><img
src="imgs/画像ファイル" width="横幅" height="高さ"
border="0"></a> |
|
|
| テキスト（文章）を編集する方法 |
|
|
| index.htmlファイルをメモ帳で開き、 |
|
| 「ここに説明を書いて下さい」などの日本語で書かれた部分を書き換えて下さい。 |
|
| 改行する場合は <br />で改行されます。 |
|
| その他のページも同じように日本語で書かれた部分を書き換えるだけで編集できます。 |
|
|
|
|
デザインを編集する方法
|
|
|
 壁紙を変える方法 |
| base.cssファイルを メモ帳で開きます。 |
|
body{
background:#ffffff url(img/bg1.gif);
|
|
|
|
| imgフォルダにある bg1.gifの代わりの壁紙を用意します。 |
|
body{
background:#ffffff url(img/壁紙のファイル名);
|
| に変更すれば壁紙（背景）が変更できます。 |
|
|
| メニューボタンや見出し(h2やh3)の背景の色を変えるときは |
|
| スタイルシートを下記のように変更します。 |
| background-color:#000066 背景を濃紺で指定している。 |
 #色番号 を変更する。 |
| background-color:#FFFF33 に変更すると背景の色が黄色になります。 |
|
|
| 背景を画像に変える場合 |
|
| スタイルシートを下記のように変更します。 |
| background-color:#000066 背景を濃紺で指定している。 |
| |
| background-image:url(img/画像の名前); となります。 |
|
|
|
 編集が終わればいよいよホームページを公開しましょう！ |
|
ホームページを公開する方法＞＞ |
|
|
