「シンプルに可愛らしくすっきりと」を追求したノーフレームテンプレート。
　1点だけ画像を使用していますが（点線画像「bg.png」）、これは碧河自作画像ですのでご自由に御使い下さい。また、このページにはカスタマイズに関する注意や説明などを記していますので、カスタマイズの際はそちらを参考にして下さい。
　「Designed by TENKIYA」の表記は削除しても構いませんが、各ページにあるソース下部の著作権表記部分（見た目には見えません）は削除しないで下さい。

梱包ファイル
------------------------
index.html
info.html（このページ）
main.html（文字、ボックス等サンプル）
sample1.html（テキストサンプルその1）
sample2.html（テキストサンプルその2）
kiss.html（リンクサンプル）
mailform.html（メールサンプル）
------------------------
bg.png
banner.gif / banner1.gif / banner2.gif
（画像は全て碧河製作）
------------------------
style.css

　はじめに述べておきます。シンプルなのでカスタマイズ向きに見えますが、cssがやや複雑なので（ごめんなさい…）、特にコンテンツへのリンクを増やしたり詳細部分を変更したりする場合は、慣れない方には少々面倒かもしれません。
　カスタマイズに対する解説や注意は下記、もしくはcssファイルに直接説明を添えておりますのでご覧下さい。必要ならばこのファイルをコピーして保管することをお勧めします。

　カスタマイズ説明用ページ内リンク（笑）
　コンテンツリンクを増やす
　リンク説明部分を変更する

コンテンツリンクを増やす

　コンテンツリンクを増やす際（例えば“chu*chu”…7文字を“chu*chu!”…8文字などにする場合）は、cssファイルとhtmlファイルの両方を設定しなおす必要があります。
　以下、手順を追って説明していきます。

css変更部分

　上記のような部分があると思います。このlink○（○は数字）がクラス名です。
　デフォルトのままではlink1はコンテンツリンクの一番左の赤の「c」、link7は一番右側の紫の「u」の設定になります。つまり、左側の文字からlink1,link2,link3…と順にクラス名にし、設定しています。

　まず、1ユニットを丸々コピーアンドペーストします。これで文字ひとつ分の設定箇所を増やしたことになります。
　次に、増やした1ユニットのクラス名を変更します。ここでは仮に変更後の名前をlink8とします（8文字目ということで）。

　このような記述になります。このとき、間違えて記述中の半角スペース（空白）や「.」等を消去しないようにご注意ください。

　次に文字のリンク色の設定をします。

　見づらくてすみません、実際の7文字目のリンク色です。
　#e699ffが未訪問のリンクと訪問済みのリンクの色のカラーコード、#f3ccffがポイント時のリンクのカラーコードです。これをお好きな色に変更します（7文字目と8文字目が同色でいいなら設定しなくても構いません）。
　分かりやすくするために、新しく設定したlink8（8文字目の設定）の未訪問・訪問済みリンクの色を黒（カラーコード：#000000）、ポイント時の色を赤（カラーコード：#ff0000）とします。

　上記のように変更できればリンク色の設定は完了です。この時、間違えてカラーコードの直後の「；」を消去しないようにご注意下さい。

　最後に文字の大きさを変更します。
　デフォルト設定では7文字のときに最も大きく見えるような文字サイズに設定しています。これを8文字や9文字のように多くするとコンテンツリンクが2行にわたる場合があります。
　ある程度cssを弄ることが出来る方は横幅自体を変更してくださっても構いませんが、この場合は複数個所を設定しなおすことになるので、慣れない方は以下の方法で文字サイズを変更して下さい。
　まず、以下の部分に注目。

　上記のfont-size:90pt;の数値（デフォルトでは90）をもう少し低い数値に変更して下さい。文字数を減らしたい方は、逆に数値を上げると文字サイズが大きくなります。
　試行錯誤で数値を変更し、ブラウザの更新ボタンを押しながら見え方を確認されることをお勧めします。
　これでcssファイルの設定は終わりです。

html変更部分

　続いてhtmlを変更します。全てのファイルのコンテンツリンク部分を変更しなければなりませんが、手間はそれくらいで設定自体は簡単です。

　index.htmlファイル以外のhtmlファイルではリンク説明部分にリンク説明の記述を入れる必要が無いので、onmouseover="document.FORM.linkex.value='コンテンツ名 // コンテンツ内容説明'" onmouseout="document.FORM.linkex.value='ここに説明が出ます'が省略されている形になっています。ここではindex.htmlファイルの記述変更を例に挙げて説明しますが、index.html以外のhtmlの変更も同じです。

　コンテンツリンクを増やすためには、cssの場合と同様にデフォルトの1ユニットをコピーアンドペーストしてそれを変更していきます。この色の部分の記述（ここではlink7設定部分：コンテンツリンク一番右端の文字「u」のリンク部分）をコピーアンドペーストし、link7設定の下に貼り付けてください。
　次に、増やしたユニットのクラス名を変更します。このクラス名は、さっきcssを変更した際につけたクラス名です。例としてはlink8ですね。こんな感じになります。

　index.htmlファイル以外の全てのhtmlファイルも同様に変更して下さい。
　細かい説明をするとキリがありませんが、<div class="○○">の○○部分にcssで設定しているクラス名をいれることで、設定情報を呼び出して反映させていると考えてください。

　次にコンテンツリンクの文字とリンク先のURLを変更します。ここでは仮に「index.html」を「top.html」に、「chu*chu」を「chu*chu!」に変更するとします。

　見づらかったので太字にしていますが、上記の「index.html」と「u」を任意のURLと文字（ここではそれぞれ「top.html」と「！」）に変更してください。index.htmlファイル以外の全てのhtmlファイルも同様の変更を。

　続いてリンク説明部分の修正ですが、これは以下の「リンク説明部分を変更する」を参照してください。

リンク説明部分を変更する

リンク説明内容を変更する場合

　index.htmlではコンテンツリンクにポイントを置くと説明が表記されるようになっています。その設定がindex.htmlソース中にある以下のこの色の記述部分です（ここではコンテンツリンクの一番右端の「u」の記述を例に挙げています）。

　まず、記述の意味について簡単に解説します。

　ここで変更するのは、リンク先URL、ポインタがコンテンツリンクに触れたときに出る説明、リンク説明表示部分に通常出ている文字です。それぞれ任意のものに変更して下さい。
　修正の際には「.」「'」「"」などの記号を消してしまわないようにご注意下さい。
　もしも通常リンク説明表示部分に出ている文字の部分になにも表示させたくない場合は

通常リンク説明表示部分に出ている文字　を　&nbsp;

のように変更して下さい。最後のセミコロンも忘れずに。
　また、タグいじりに慣れない方は「FORM」「linkex」には触れないで下さい。本来はここも任意です。

リンク説明部分を消去する場合

　「コンテンツ内容の説明なんて必要ない！」という方は、index.htmlファイルの中の以下の記述をごっそり削除して下さい。

　余力がある方は、コンテンツリンク部分の記述をindex.htmlファイル以外のファイルのものと同様に書き換える（つまり「onmouseover="document.FORM.linkex.value='ポインタがコンテンツリンクに触れたときに出る説明'" onmouseout="document.FORM.linkex.value='通常リンク説明表示部分に出ている文字'"」部分を消去）とスッキリしますが、記述したままでも特に問題はありません。

その他設定について

　リンク説明表示部分のスタイルシートはcssファイルに「ex」というid名と「linkex」というクラス名で設定していますが、慣れていない方は弄ることをお勧めしません。
　「ドンと来い！」という方は使いやすいようにカスタマイズなさってください*＾＾*