* サイトの説明など(h1タグ)重要な言葉を入れて下さい *

テンプレートの編集（はじめに）

ホームページビルダーで編集される方の設定

ファイルを開く前に下記の設定を行って下さい。
設定をしないとレイアウトが崩れてしまうなどのおそれがありますので、必ず設定を行って下さい。
※例：ホームページビルダー v１４

1. 上部にあるメニュー部分の「ツール」→「オプション」の中の「ファイル」タブを開いて下さい。
   「DOCTYPEを出力する」と「HTMLソースにGENERATORを組み込む」という部分、２か所のチェックを外して下さい。

2. 上部にあるメニュー部分の「ツール」→「オプション」の中の「ソース編集」タブを開いて下さい。
   「出力文字」「タグ」とあるのですが、その部分を「小文字」に設定して下さい。

3. 上部にあるメニュー部分の「ツール」→「オプション」の中の「一般」タブを開いて下さい。
   「HTMLソースを自動整形する」と「HTML構文エラーを自動修復する」という部分、２か所のチェックを外して下さい。

   ※コメント部分を見やすいようにスペースをあけてありますが、「自動整形」してしまうとその部分が詰まってしまいますので、こちらも設定して下さい。

4. 上部にあるメニュー部分の「ツール」→「オプション」の中の「表示」タブを開いて下さい。
   「編集記号」の「コメント、スクリプト記号」という部分のチェックを外して下さい。

   ※コメントやスクリプトがあると「ページ編集」の時に、その部分にマークが入ってしまいます。
   見ずらいようでしたらこちらも設定して下さい。

---

最初の設定

※ホームページビルダーで編集される方は、HTMLソース部分を開き設定して下さい。

<title>部分に「あなたのホームページ名」を入れて下さい。

<title>ホームページの名前</title>

<meta name="description"　部分に「サイトの説明」を入れて下さい。

<meta name="description" content="サイトの説明をお書き下さい"/>

<meta name="keywords"　部分に「サイトに関係するキーワード」を入れて下さい。

<meta name="keywords" content="キーワード1,キーワード2,キーワード3"/>

---

FLASHメニュー部分の設定

FLASHメニューの編集は、テキストファイル「flash_template01.txt」で行って下さい。
※FLASHファイル「flash_template01.swf」自体を編集するのではありません。

Winでしたらメモ帳、テキストエディタで編集して下さい。ホームページビルダーでは編集出来ません。

※こちらのFLASHを表示するには「swfobject.js」「flash_template01_noflash.js」
「flash_template01.swf」「flash_template01.txt」その他、表示する画像ファイルが必要となります。
全てサーバーに転送して下さい。

Flashを表示出来ない環境での設定

Flashを表示出来ない環境での設定（メイン画像）

メインの静止画像部分の設定はサイズ幅890px、高250pxになっています。

ソース部分は下記のようになります。 <div id="main">〜</div>

<div id="main"><img src="画像パス" alt="メイン画像" ></div>

---

Flashを表示出来ない環境での設定（メニューボタン）

現在は１個のメニューボタンのサイズは幅143px、高35px、メニューボタン６個の設定になっています。

ソース部分は下記のようになります。 <ul id="navigation">〜</ul>

<ul id="navigation"> <li><a href="#"><img src="画像パス" /></a></li> <li><a href="#"><img src="画像パス" /></a></li> <li><a href="#"><img src="画像パス" /></a></li> <li><a href="#"><img src="画像パス" /></a></li> <li><a href="#"><img src="画像パス" /></a></li> <li><a href="#"><img src="画像パス" /></a></li> </ul>

※「img」ファルダ内に右のメニューボタン(template01_2bt.png)→ が
入っております。
ご自分のサイト用に名前入れをしてメニューボタンを作成して設定して下さい。

テンプレートの編集（スタイルシートでの編集）

スタイルシートでの編集方法

色・サイズ・背景に使用している画像などの変更はスタイルシート（style.css）で行います。
ホームページビルダーより「スタイルシートマネージャ」でも編集する事も出来ますが、メモ帳などで開くと各項目部分に「/*コメント*/」が書いてありますので、編集しやすいと思います。

テンプレートの編集（HTMLファイルでの編集）

段落タグ

テキスト部分は段落タグ<P>~</p>で囲んで下さい。

文章を段落タグ<P>~</p>で囲むと、段落間に約1行分のスペースが空きます。

▼このテキスト部分のように罫線を表示させるには<p>を<p class ="line">とする事で表示されます。

サイド部分の編集

サイドボックス

ソース部分は下記のようになります。 <div class="box">〜</div>

<div class="box"><p>テキスト部分</p></div>

サイド部分で<div class="box">〜</div>を使用すると、そのボックスに枠が表示されます。

---

サイドメニュー

ソース部分は下記のようになります。 <ul id="sidemenu">〜</ul>

<ul id="sidemenu"> <li><a href="#">sidemenu1</a></li> <li><a href="#">sidemenu2</a></li> <li><a href="#">sidemenu3</a></li> <li><a href="#">sidemenu4</a></li> <li><a href="#">sidemenu5</a></li> <li><a href="#">sidemenu6</a></li> <li><a href="#">sidemenu7</a></li> <li><a href="#">sidemenu8</a></li> </ul>

<li>〜</li>が１つのメニュー部分となります。
サイドメニュー項目を増やすには下記の部分を <ul id="sidemenu">〜</ul> の間に入れて下さい。

▼サイドメニュー部分でリンクをしない項目部分には、<li>の部分を<li class="nolink">として下さい。

---

サイドリンク

ソース部分は下記のようになります。 <ul class="sidelink">〜</ul>

<ul class="sidelink"> <li class="textlink"><a href="#" target="_blank">Link SiteName 1</a></li> <li class="textlink"><a href="#" target="_blank">Link SiteName 2</a></li> <li><a href="#" target="_blank">Link SiteName 3</a></li> <li><a href="#" target="_blank">Link SiteName 4</a></li> <li><a href="#" target="_blank"><img src="画像パス" width="幅" height="高" alt="画像1" /></a></li> <li><a href="#" target="_blank"><img src="画像パス" width="幅" height="高" alt="画像2" /></a></li> </ul>

<li>〜</li>が１つのリンク部分となります。
リンク項目を増やすには下記の部分を <ul id="sidelink">〜</ul> の間に入れて下さい。

▼バナー画像でのリンクの場合【画像幅サイズ200pxまで】

▼テキストリンクの場合
<li>の部分を<li class="textlink">とすると、テキストの先頭に画像が表示されます。

メイン部分の編集

メインボックス

ソース部分は下記のようになります。 <div class="box">〜</div>

<div class="box"><p>テキスト部分</p></div>

メイン部分で<div class="box">〜</div>を使用すると、そのボックスに枠が表示されます。

---

テキストボックス（更新履歴｜What's New）部分の設定

ソース部分は下記のようになります。 <ul class="textbox">〜</ul>

<ul class="textbox"> <li class="date">2014.xx.xx</li><li class="text"><p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p></li> <li class="date">2014.xx.xx</li><li class="text"><p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p></li> <li class="date">2014.xx.xx</li><li class="text"><p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p></li> <li class="date">2014.xx.xx</li><li class="text"><p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p></li> <li class="date">2014.xx.xx</li><li class="text"><p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p></li> <li class="date">2014.xx.xx</li><li class="text"><p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p></li> <li class="date">2014.xx.xx</li><li class="text"><p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p></li> <li class="date">2014.xx.xx</li><li class="text"><p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p></li> </ul>

<li class="date">〜</li><li class="text">〜</li>が１つの項目部分となります。

---

イメージボックス アルバム（画像を並べて表示）部分の設定

ソース部分は下記のようになります。 <div class="imagebox">〜</div>

<div class="imagebox"> <ul class="imagebox_album"> <li><a href="#"><img src="画像パス" width="幅" height="高さ" alt="サンプル画像1" /></a></li> <li><a href="#"><img src="画像パス" width="幅" height="高さ" alt="サンプル画像2" /></a></li> <li><a href="#"><img src="画像パス" width="幅" height="高さ" alt="サンプル画像3" /></a></li> <li><a href="#"><img src="画像パス" width="幅" height="高さ" alt="サンプル画像4" /></a></li> <li><a href="#"><img src="画像パス" width="幅" height="高さ" alt="サンプル画像5" /></a></li> </ul> </div>

<li>〜</li>が１つの画像部分となります。
項目を増やすには下記の部分を <ul class="imagebox_album">〜</ul> の間に入れて下さい。

※画像の枠はスタイルシートで設定していますので、画像自体に枠はついておりません。

---

イメージボックス ライト（画像を右側に表示）部分の設定

ソース部分は下記のようになります。<div class="imagebox">〜</div>

<div class="imagebox"> <div class="image_right"><img src="画像パス" width="幅" height="高さ" alt="サンプル画像" /></div> <p class="line">右側に表示されるテキスト部分</p> </div>

※画像の枠はスタイルシートで設定していますので、画像自体に枠はついておりません。

---

イメージボックス レフト（画像を左側に表示）部分の設定

ソース部分は下記のようになります。<div class="imagebox">〜</div>

<div class="imagebox"> <div class="image_left"><img src="画像パス" width="幅" height="高さ" alt="サンプル画像" /></div> <p class="line">左側に表示されるテキスト部分</p> </div>

※画像の枠はスタイルシートで設定していますので、画像自体に枠はついておりません。

---

トピックパス（パンくずリスト）部分の設定

ソース部分は下記のようになります。 <div id="topic-path">〜</div>

<div id="topic-path"> <a href="index.html">HOME</a> <strong>編集方法</strong> </div>

<a href="#">~</a>部分は右サイドに画像「＞」が表示されます。
リンク設定がない表示しているページ名部分は、必ず強調タグ<strong>~</strong>で囲んで下さい。

---

メイン部分の編集（リンクページで使用しているスタイル）

アバウトリンクの設定

ソース部分は下記のようになります。 <table class="style_b" ..... >〜</table>

<table class="style_b" summary="リンク"> <tr> <th>サイトネーム</th><td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</td> </tr> <tr> <th>url</th><td>http://xxxxxx.com</td> </tr> <tr> <th>管理人</th><td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</td> </tr> </table>

<tr><th>〜</th><td>〜</td></tr>が１つの項目部分となります。
項目を増やすには下記の部分を<table class="style_b" ..... >〜</table> の間に入れて下さい。

---

リンクボックスの設定【バナー画像使用｜バナー画像幅200px使用】

ソース部分は下記のようになります。 <dl class="linkbox-ba200">〜</dl>

<dl class="linkbox-ba200"> <dt><a href="#" target="_blank">サイト名</a></dt> <dd class="banner"> <a href="#" target="_blank"><img src="画像パス" width="幅" height="高さ" alt="バナー" /></a> </dd> <dd><p>サイトについてのコメント</p></dd> </dl>

<dl class="linkbox-ba200">〜</dl>が１つのサイト部分です。

---

リンクボックスの設定【バナー画像使用｜バナー画像幅88px使用】

ソース部分は下記のようになります。 <dl class="linkbox-ba88">〜</dl>

<dl class="linkbox-ba88"> <dt><a href="#" target="_blank">サイト名</a></dt> <dd class="banner"> <a href="#" target="_blank"><img src="画像パス" width="幅" height="高さ" alt="バナー" /></a> </dd> <dd><p>サイトについてのコメント</p></dd> </dl>

<dl class="linkbox-ba88">〜</dl>が１つのサイト部分です。

---

リンクボックスの設定【バナー画像使用しない｜テキストのみ】

ソース部分は下記のようになります。 <dl class="linkbox-nobanner">〜</dl>

<dl class="linkbox-nobanner"> <dt><a href="#" target="_blank">サイト名</a></dt> <dd><p>サイトについてのコメント</p></dd> </dl>

<dl class="linkbox-nobanner">〜</dl>が１つのサイト部分です。

---

リンクバナーボックスの設定【バナー画像を並べて表示｜テキストなし】

ソース部分は下記のようになります。 <ul class="linkbanner">〜</ul>

<ul class="linkbanner"> <li><a href="#" target="_blank"><img src="画像パス" width="幅" height="高さ" alt="バナー" /></a></li> <li><a href="#" target="_blank"><img src="画像パス" width="幅" height="高さ" alt="バナー" /></a></li> <li><a href="#" target="_blank"><img src="画像パス" width="幅" height="高さ" alt="バナー" /></a></li> <li><a href="#" target="_blank"><img src="画像パス" width="幅" height="高さ" alt="バナー" /></a></li> </ul>

<li>〜</li>が１つの画像部分となります。
項目を増やすには下記の部分を <ul class="linkbanner">〜</ul> の間に入れて下さい。

メイン部分の編集（プロフィールページで使用しているスタイル）

プロフィールの設定

ソース部分は下記のようになります。 <table class="style_a" ..... >〜</table>

<table class="style_a" summary="プロフィール"> <tr> <th>ハンドネーム</th><td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</td> </tr> <tr> <th>性別</th><td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</td> </tr> <tr> <th>生年月日</th><td>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</td> </tr> </table>

<tr><th>〜</th><td>〜</td></tr>が１つの項目部分となります。
項目を増やすには下記の部分を<table class="style_a" ..... >〜</table> の間に入れて下さい。

フッター部分の編集

フッターメニューの設定

ソース部分は下記のようになります。 <ul id="footermenu">〜</ul>

<ul id="footermenu"> <li><a href="#">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 class="last"><a href="#">menu6</a></li> </ul>

<li>〜</li>が１つのメニュー部分となります。
メニュー項目を増やすには下記の部分を <ul id="footermenu">〜</ul> の間に入れて下さい。

※最後の部分は<li>を<li class="last">として下さい。

SIDE MENU

• sidemenu1
• sidemenu2
• sidemenu3
• sidemenu4
• sidemenu5
• sidemenu6
• sidemenu7
• sidemenu8