|
|
|
|
HOME > テンプレートの編集方法 |
|
テンプレートの編集方法
|
|
|
|
|
|
|
|
|
|
|
|
|
|
ダウンロードしたテンプレートフォルダを解凍する |
|
|
|
|
|
テンプレートをダウンロードすると Zipファイルになっていますので、 |
|
|
右クリックで「解凍」を行うか、解凍ソフトで解凍を行って下さい。 |
|
|
|
|
|
|
|
|
解凍ソフトが必要であればこちらよりダウンロードして下さい。 |
|
Zipファイル |
|
+Lhaca |
|
|
 |
|
 |
↓ダウンロード |
|
|
|
|
|
|
解凍するとフォルダの中には下記のファイルが入っています。 |
|
|
|
index.html |
page1.html |
base.css |
imgフォルダ |
|
 |
|
 |
 |
|
|
|
|
|
|
|
|
|
|
|
ページを追加する方法 |
|
|
|
|
|
事前にホームページのページの構成を考えます。 |
|
|
各ページの内容やページ数が決まれば、ページのファイル名を決めます。 |
|
|
|
|
|
例えば、メニュー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> |
|
|
|
|
|
|
◆外部へのリンクの場合 |
|
|
|
|
|
リンクのサンプル |
|
|
プロ並みのホームページを作る方法 |
|
|
HTMLの記入例 |
|
|
|
<a href="http://pro.muryoweb.net/" target="_blank">プロ並みのホームページを作る方法</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 />で改行されます。 |
|
|
|
|
|
その他のページも同じように日本語で書かれた部分を書き換えるだけで編集できます。 |
|
|
|
|
|
|
|
|
重要なタグを記入する |
|
|
|
|
|
<title>タグについての記入例や詳細はこちらをご覧ください。>>titleタグについて |
|
|
|
|
|
<meta>タグにについての記入例や詳細はこちらをご覧ください。>>metaタグについて |
|
|
|
|
|
<h1>～<h3>タグについての記入例や詳細はこちらをご覧ください。>>見出しタグについて |
|
|
|
|
|
一番下にある 著作権の表示 という部分は あなたのホームページの名前やお店の名前 |
|
|
会社名などを記入する部分になります。 |
|
|
|
|
|
デザインを編集する方法 |
|
|
|
|
|
 壁紙を変える方法 |
|
|
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/画像の名前); となります。 |
|
|
|
|
|
ご自身でテンプレートを一から作成したい方はこちらでテンプレートの作成方法を解説しています>> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
HOME
