今日もテンプレートは自分で更新できる最短ホームページテンプレート を使っていきます。

このホームページテンプレートのページ数を増やす編集をします。

まずはどのページでもいいのでファイルをコピーします。

サイドバーのファイルを開きます。

<!-- ここがサイドバーです -->
<table width="100%" cellpadding="0" cellspacing="0" style="border:1px solid #B06939; padding:5px; background-color:#ffffff;">
<tr align="left" valign="middle" height="42">
<td background="side-bar3.jpg">
<div style="font-size:11pt;">　<img src="c3.gif" alt="">　<a href="index.html"><strong>トップページ</strong></a></div>
</td>
</tr>
<tr align="left" valign="middle" height="42">
<td background="side-bar3.jpg">
<div style="font-size:11pt;">　<img src="c3.gif" alt="">　<a href="page1.html"><strong>コンテンツ１</strong></a></div>
</td>
</tr>
<tr align="left" valign="middle" height="42">
<td background="side-bar3.jpg">
<div style="font-size:11pt;">　<img src="c3.gif" alt="">　<a href="page2.html"><strong>コンテンツ２</strong></a></div>
</td>
</tr>
<tr align="left" valign="middle" height="42">
<td background="side-bar3.jpg">
<div style="font-size:11pt;">　<img src="c3.gif" alt="">　<a href="page3.html"><strong>コンテンツ３</strong></a></div>
</td>
</tr>
<tr align="left" valign="middle" height="42">
<td background="side-bar3.jpg">
<div style="font-size:11pt;">　<img src="c3.gif" alt="">　<a href="page4.html"><strong>コンテンツ４</strong></a></div>
</td>
</tr>
<tr align="left" valign="middle" height="42">
<td background="side-bar3.jpg">
<div style="font-size:11pt;">　<img src="c3.gif" alt="">　<a href="page5.html"><strong>コンテンツ５</strong></a></div>
</td>
</tr>
</table>
<div style="line-height:40%;">　</div>

上記をコンテンツ６をつ追加してあげます。

このように編集します。

</td>
</tr>
<tr align="left" valign="middle" height="42">
<td background="side-bar3.jpg">
<div style="font-size:11pt;">　<img src="c3.gif" alt="">　<a href="page5.html"><strong>コンテンツ５</strong></a></div>
</td>
</tr>
<tr align="left" valign="middle" height="42">
<td background="side-bar3.jpg">
<div style="font-size:11pt;">　<img src="c3.gif" alt="">　<a href="page6.html"><strong>コンテンツ６</strong></a></div>
</td>
</tr>
</table>
<div style="line-height:40%;">　</div>

このように編集することで

ページ数が増えます。。

これでいくらでもページを増やすことができます。

以上で作業終了です。

今日もテンプレートは自分で更新できる最短ホームページテンプレート を使っていきます。

このホームページテンプレートのトップページの情報を追加する編集をします。

<!-- ここが「情報その１」を掲載している箇所です -->
<div style="line-height:40%;">　</div>
<table width="99%" height="29" cellspacing="0" cellpadding="0" style="border:1px solid #cccccc; background:#ffffff url(bar3.gif);" align="center">
<tr align="left" valign="middle">
<td>
<h2>　　情報その１</h2>
</td>
</tr>
</table>
<table width="99%" style="border:0px solid #c7c7c7" bgcolor="#ffffff" cellspacing="0" align="center">
<tr>
<td align="left" valign="top" style="padding:13px">
ここに情報その１を掲載します。<br><br><br>

</td>
</tr>
</table>

htmlファイルの上記の赤い部分が画像の情報その1とここに情報その１を掲載しますの部分です。

この部分を編集します。

このように編集しました。

<!-- ここが「情報その１」を掲載している箇所です -->
<div style="line-height:40%;">　</div>
<table width="99%" height="29" cellspacing="0" cellpadding="0" style="border:1px solid #cccccc; background:#ffffff url(bar3.gif);" align="center">
<tr align="left" valign="middle">
<td>
<h2>　　サービス内容</h2>
</td>
</tr>
</table>
<table width="99%" style="border:0px solid #c7c7c7" bgcolor="#ffffff" cellspacing="0" align="center">
<tr>
<td align="left" valign="top" style="padding:13px">
サービス内容を掲載します。<br><br><br>

</td>
</tr>
</table>

このように編集することで

情報を掲載できます。

少し下にいくと情報その２～その４まであるので同じように編集します。

以上で作業終了です。

今日もテンプレートは自分で更新できる最短ホームページテンプレート を使っていきます。

このホームページテンプレートの各ページに情報を追加する編集をします。

<!-- ここが「コンテンツ１」を掲載している箇所です -->
<div style="line-height:40%;">　</div>
<table width="99%" height="29" cellspacing="0" cellpadding="0" style="border:1px solid #cccccc; background:#ffffff url(bar3.gif);" align="center">
<tr align="left" valign="middle">
<td>
<h2>　　コンテンツ１</h2>
</td>
</tr>
</table>
<table width="99%" style="border:0px solid #c7c7c7" bgcolor="#ffffff" cellspacing="0" align="center">
<tr>
<td align="left" valign="top" style="padding:13px">
コンテンツ１の情報を掲載します<br><br><br><br><br><br>

各ページのファイルの上記の赤い部分のコンテンツと内容を記載します。

このように編集しました。

<!-- ここが「コンテンツ１」を掲載している箇所です -->
<div style="line-height:40%;">　</div>
<table width="99%" height="29" cellspacing="0" cellpadding="0" style="border:1px solid #cccccc; background:#ffffff url(bar3.gif);" align="center">
<tr align="left" valign="middle">
<td>
<h2>　　サービス内容</h2>
</td>
</tr>
</table>
<table width="99%" style="border:0px solid #c7c7c7" bgcolor="#ffffff" cellspacing="0" align="center">
<tr>
<td align="left" valign="top" style="padding:13px">
サービス内容の情報です。<br><br><br><br><br><br>

このように編集することで

各ページの情報を記載することができます。

同じように各ページのファイルの情報を記載する箇所を編集します。

以上で作業終了です。

今日もテンプレートは自分で更新できる最短ホームページテンプレート を使っていきます。

このホームページテンプレートのサイドバーのところを編集します。

<!-- ここがサイドバーです -->
<table width="100%" cellpadding="0" cellspacing="0" style="border:1px solid #B06939; padding:5px; background-color:#ffffff;">
<tr align="left" valign="middle" height="42">
<td background="side-bar3.jpg">
<div style="font-size:11pt;">　<img src="c3.gif" alt="">　<a href="index.html"><strong>トップページ</strong></a></div>
</td>
</tr>
<tr align="left" valign="middle" height="42">
<td background="side-bar3.jpg">
<div style="font-size:11pt;">　<img src="c3.gif" alt="">　<a href="page1.html"><strong>コンテンツ１</strong></a></div>
</td>
</tr>
<tr align="left" valign="middle" height="42">
<td background="side-bar3.jpg">
<div style="font-size:11pt;">　<img src="c3.gif" alt="">　<a href="page2.html"><strong>コンテンツ２</strong></a></div>
</td>
</tr>
<tr align="left" valign="middle" height="42">
<td background="side-bar3.jpg">
<div style="font-size:11pt;">　<img src="c3.gif" alt="">　<a href="page3.html"><strong>コンテンツ３</strong></a></div>
</td>
</tr>
<tr align="left" valign="middle" height="42">
<td background="side-bar3.jpg">
<div style="font-size:11pt;">　<img src="c3.gif" alt="">　<a href="page4.html"><strong>コンテンツ４</strong></a></div>
</td>
</tr>
<tr align="left" valign="middle" height="42">
<td background="side-bar3.jpg">
<div style="font-size:11pt;">　<img src="c3.gif" alt="">　<a href="page5.html"><strong>コンテンツ５</strong></a></div>
</td>
</tr>
</table>
<div style="line-height:40%;">　</div>

今日学んだところは開いたファイルの上記の「コンテンツ」の１～５の部分です。

この部分に自分のホームページのコンテンツを打っていきます。

このように編集しました。

<!-- ここがサイドバーです -->
<table width="100%" cellpadding="0" cellspacing="0" style="border:1px solid #B06939; padding:5px; background-color:#ffffff;">
<tr align="left" valign="middle" height="42">
<td background="side-bar3.jpg">
<div style="font-size:11pt;">　<img src="c3.gif" alt="">　<a href="index.html"><strong>トップページ</strong></a></div>
</td>
</tr>
<tr align="left" valign="middle" height="42">
<td background="side-bar3.jpg">
<div style="font-size:11pt;">　<img src="c3.gif" alt="">　<a href="page1.html"><strong>サービス内容</strong></a></div>
</td>
</tr>
<tr align="left" valign="middle" height="42">
<td background="side-bar3.jpg">
<div style="font-size:11pt;">　<img src="c3.gif" alt="">　<a href="page2.html"><strong>商品情報</strong></a></div>
</td>
</tr>
<tr align="left" valign="middle" height="42">
<td background="side-bar3.jpg">
<div style="font-size:11pt;">　<img src="c3.gif" alt="">　<a href="page3.html"><strong>お申し込み</strong></a></div>
</td>
</tr>
<tr align="left" valign="middle" height="42">
<td background="side-bar3.jpg">
<div style="font-size:11pt;">　<img src="c3.gif" alt="">　<a href="page4.html"><strong>よくある質問</strong></a></div>
</td>
</tr>
<tr align="left" valign="middle" height="42">
<td background="side-bar3.jpg">
<div style="font-size:11pt;">　<img src="c3.gif" alt="">　<a href="page5.html"><strong>問い合わせ</strong></a></div>
</td>
</tr>
</table>
<div style="line-height:40%;">　</div>

次にお気に入りバー編集する作業です

<!-- ここがお気に入りバーです -->
<button onclick="window.external.addFavorite('http://????????.jp/','あああああああああ);" name="お気に入りに追加する" style="height:16pt;text-align:center; margin-top:0pt; line-height:100%; width:145px;">お気に入りに追加する</button>
<div style="line-height:40%;">　</div>

上記の赤色の部分を編集してお気に入りにしたときのタイトルが決めれます

<!-- ここがお気に入りバーです -->
<button onclick="window.external.addFavorite('http://????????.jp/','東京都のダイエット専門店);" name="お気に入りに追加する" style="height:16pt;text-align:center; margin-top:0pt; line-height:100%; width:145px;">お気に入りに追加する</button>
<div style="line-height:40%;">　</div>

このように編集することで

お気に入りにした時にタイトルが東京都のダイエット専門店で登録されるようになります。

これで編集完了です。

これでサイドバーの編集は終わりです。

今日もテンプレートは自分で更新できる最短ホームページテンプレート を使っていきます。

このホームページテンプレートのコンテンツ１～５のところを編集します。

<!-- ここがコンテンツバーです -->
<table width="100%" height="34" cellspacing="0" cellpadding="0" bgcolor="#8c1b1b" align="center">
<tr valign="middle" align="center">
<td width="150" background="top-bar3.jpg"><span style="font-size:11pt;"><a href="index.html"><font color=white><strong>トップページ</strong></font></a></span></td>
<td width="150" background="top-bar3.jpg"><span style="font-size:11pt;"><a href="page1.html"><font color=white><strong>コンテンツ１</strong></font></a></span></td>
<td width="150" background="top-bar3.jpg"><span style="font-size:11pt;"><a href="page2.html"><font color=white><strong>コンテンツ２</strong></font></a></span></td>
<td width="150" background="top-bar3.jpg"><span style="font-size:11pt;"><a href="page3.html"><font color=white><strong>コンテンツ３</strong></font></a></span></td>
<td width="150" background="top-bar3.jpg"><span style="font-size:11pt;"><a href="page4.html"><font color=white><strong>コンテンツ４</strong></font></a></span></td>
<td width="150" background="top-bar3.jpg"><span style="font-size:11pt;"><a href="page5.html"><font color=white><strong>コンテンツ５</strong></font></a></span></td>
</tr>
</table>

今日学んだところは開いたファイルの上記の「コンテンツ」の１～５の部分です。

この部分に自分のホームページのコンテンツを打っていきます。

同様の作業を前回と同じようにページ１～５にもすることで

どのページにのコンテンツ部分も変更されるようになります。

このように編集しました。

<!-- ここがコンテンツバーです -->
<table width="100%" height="34" cellspacing="0" cellpadding="0" bgcolor="#8c1b1b" align="center">
<tr valign="middle" align="center">
<td width="150" background="top-bar3.jpg"><span style="font-size:11pt;"><a href="index.html"><font color=white><strong>トップページ</strong></font></a></span></td>
<td width="150" background="top-bar3.jpg"><span style="font-size:11pt;"><a href="page1.html"><font color=white><strong>サービス内容</strong></font></a></span></td>
<td width="150" background="top-bar3.jpg"><span style="font-size:11pt;"><a href="page2.html"><font color=white><strong>商品情報</strong></font></a></span></td>
<td width="150" background="top-bar3.jpg"><span style="font-size:11pt;"><a href="page3.html"><font color=white><strong>お申し込みの流れ</strong></font></a></span></td>
<td width="150" background="top-bar3.jpg"><span style="font-size:11pt;"><a href="page4.html"><font color=white><strong>よくある質問</strong></font></a></span></td>
<td width="150" background="top-bar3.jpg"><span style="font-size:11pt;"><a href="page5.html"><font color=white><strong>問い合わせ</strong></font></a></span></td>
</tr>
</table>

これで編集完了です。

テンプレートを編集するだけでパソコンが苦手な自分でも簡単な操作で編集ができちゃいます。

テンプレートがあれば楽チンですね。

今日は以上です。

タイトルバーにタイトルを掲載する作業です。

今日もテンプレートは自分で更新できる最短ホームページテンプレート を使っていきます。

ホームページテンプレートのタイトル部分です。

<!-- ここがタイトルバーです -->
<table width="100%" style="border:0px solid #cccccc; background:#ffffff url(title3.jpg); background-repeat:no-repeat;" align="center">
<tr>
<td>
<br>
<h1>　ホームページのタイトル</h1>
<br><br>
</td>
</tr>
</table>

今日は上記の部分の「ホームページのタイトル」の部分にタイトルを記入します。

<!-- ここがタイトルバーです -->
<table width="100%" style="border:0px solid #cccccc; background:#ffffff url(title3.jpg); background-repeat:no-repeat;" align="center">
<tr>
<td>
<br>
<h1>　東京都のダイエット専門店</h1>
<br><br>
</td>
</tr>
</table>

こんな感じに編集します。

このままですとトップページのタイトルのみ編集されてるだけなので

テンプレートは５ページで構成されているので

1ページ～5ページとサイドのファイルにも同様に編集します。

そうすることでどのページに移動してもタイトルが編集されている状態になります。

今日の行ったことは以上です。

自分で更新できる最短ホームペーテンプレート を使って編集をしていきます。

使用するテンプレートです

今日は基本情報を変更するところをやりました。

テンプレートのhtmlファイルの編集画面に移動し

<meta name="keywords" content="キーワード１,キーワード２,キーワード３,キーワード４,キーワード５">
<meta name="description" content="ここにホームページの説明文を記載してください">
<title>ここにタイトルを記載してください</title>

上記の部分の「キーワード1～5の部分入れたいキーワード」を入れていきます。

次に「ここにホームページの説明文を記載してください」の部分にこのホームページの紹介文を入れていきます。

最後に「ここにタイトルを記載してください」のところにこのホームページのタイトルを記載します。

例えばダイエットに関するホームページにしたい場合は下記のように編集します。

<meta name="keywords" content="ダイエット,運動,痩せる,スリム,美しい">
<meta name="description" content="ダイエット商品を扱っているホームページです">
<title>東京都のダイエット専門店</title>

このように打ち込んで入力終了です。

テンプレートを使えばパソコンが苦手な自分でも必要な欄に入力していくだけでホームページができていくので

カンタンにホームページが作れるのですごく楽に作れるで便利です。

次回次の段階に進んでいきたいと思います。