【「朴素」のサンプル】
とても単純・簡単なスキンなので、CGIを設置出来る方ならすぐにカスタマイズ出来ます。
カスタマイズの際には以下のサイトを参考にしてください。
HTML
・とほほのwww入門
・TAG index
色見本
・Mariのいろえんぴつ
・原色大事典
・WEB COLOR 216
まずは・・・
「朴素」スキンをダウンロードし、以下のファイルがあることを確認する。
[template.html]スキンデザインを構成しているファイル
[images]画像を格納してある
[form.txt]機能を付属するためのファイル
[readme.txt]確認文章ファイルなので、デザイン変更時には使いません。
「朴素」スキンは画像の色が黒に統一されているため、色を変更する場合はその点にも注意してください。
[bg1.gif]と[bg2.gif]はラインに使用している画像で、文字と同じく色は黒になっています。
[template.html]を開きます。
赤文字の部分を変更してください。
・17行目（ページ全体の色を指定している箇所）
<BODY bgcolor="#e7e7e7"（※背景の色） text="#000000"（※文字の色） link="#990000"（※リンクの色） vlink="#990000"（※既読リンクの色の色） alink="#999999"（※選択しているリンクの色）>
・39行目（日付の色指定）
<FONT color="#999999">$log{date}</FONT>
[template.html]内で色の指定がされている部分は以上です。
それから、画像の色も画像ソフトを使用してお好みの色に変更してください。
★【変更例サンプル】
暗め・黒めの背景色と白文字の組み合わせなら、画像転用できます。
ファイル名はそのままなので、このままアップロードするだけで使用できます。【画像のみダウンロード】
色の変更の他に・・・
・壁紙を使う
・アイコンを使う
・スクロールバーの色を変える
などをするとまた違うスキンになります。
[form.txt]を開きます。
赤文字の部分を付け足し、青文字の部分は各自好きな色に変更してください。
タイトル：<input type="text" name="title" value="non title" size="60"><BR><INPUT type="radio" name="color" value="#000000"><FONT color="#000000">■</FONT>
タイトルの色：<INPUT type="radio" name="color" value="#990000" checked><FONT color="#990000">■</FONT><INPUT type="radio" name="color" value="#996600"><FONT color="#996600">■</FONT><INPUT type="radio" name="color" value="#999900"><FONT color="#999900">■</FONT><INPUT type="radio" name="color" value="#669900"><FONT color="#669900">■</FONT><INPUT type="radio" name="color" value="#000099"><FONT color="#000099">■</FONT><INPUT type="radio" name="color" value="#660099"><FONT color="#660099">■</FONT><INPUT type="radio" name="color" value="#990099"><FONT color="#990099">■</FONT><INPUT type="radio" name="color" value="#000000"><FONT color="#000000">■</FONT>
色数を増やしたい場合は上記を付け足していってください。また、青文字の部分はカラーコードになるので、好きな色のコードに変更し、上記ような一つのまとまり内ではカラーコードを同一のものにしてください。
タイトルの色：■■■■■■■■するとこのようなラジオボタンによるチェック式の色選択が出来るようになります。
さらに、 [template.html]を開きます。27行目以上で完了です。
<FONT color="$log{color}">$log{title}</FONT>
ここまでやっておいて今更ですが、「題目的顔色是七色」がこの作業後の姿に相当します・・・・・・。
[form.txt]を開きます。
赤文字の部分を付け足し、青文字の部分は各自好きな色に変更してください。
タイトル：<input type="text" name="title" value="non title" size="60"><BR><INPUT type="radio" name="color" value="#000000"><FONT color="#000000">■</FONT>
本文の色：<INPUT type="radio" name="color" value="#990000" checked><FONT color="#990000">■</FONT><INPUT type="radio" name="color" value="#996600"><FONT color="#996600">■</FONT><INPUT type="radio" name="color" value="#999900"><FONT color="#999900">■</FONT><INPUT type="radio" name="color" value="#669900"><FONT color="#669900">■</FONT><INPUT type="radio" name="color" value="#000099"><FONT color="#000099">■</FONT><INPUT type="radio" name="color" value="#660099"><FONT color="#660099">■</FONT><INPUT type="radio" name="color" value="#990099"><FONT color="#990099">■</FONT><INPUT type="radio" name="color" value="#000000"><FONT color="#000000">■</FONT>
色数を増やしたい場合は上記を付け足していってください。また、青文字の部分はカラーコードになるので、好きな色のコードに変更し、上記ような一つのまとまり内ではカラーコードを同一のものにしてください。
本文の色：■■■■■■■■するとこのようなラジオボタンによるチェック式の色選択が出来るようになります。
さらに、 [template.html]を開きます。33行目
<FONT color="$log{color}">$log{note}</FONT>
以上で完了です。
[form.txt]を開きます。
赤文字の部分を付け足し、青文字の部分は各自好きな色に変更してください。
タイトル：<input type="text" name="titlecolor" value="non title" size="60"><BR><INPUT type="radio" name="color" value="#000000"><FONT color="#000000">■</FONT>
タイトルの色：<INPUT type="radio" name="titlecolor" value="#990000" checked><FONT color="#990000">■</FONT><INPUT type="radio" name="titlecolor" value="#996600"><FONT color="#996600">■</FONT><INPUT type="radio" name="titlecolor" value="#999900"><FONT color="#999900">■</FONT><INPUT type="radio" name="titlecolor" value="#669900"><FONT color="#669900">■</FONT><INPUT type="radio" name="titlecolor" value="#000099"><FONT color="#000099">■</FONT><INPUT type="radio" name="titlecolor" value="#660099"><FONT color="#660099">■</FONT><INPUT type="radio" name="titlecolor" value="#990099"><FONT color="#990099">■</FONT><INPUT type="radio" name="titlecolor" value="#000000"><FONT color="#000000">■</FONT><BR>
本文の色：<INPUT type="radio" name="notecolor" value="#990000" checked><FONT color="#990000">■</FONT><INPUT type="radio" name="notecolor" value="#996600"><FONT color="#996600">■</FONT><INPUT type="radio" name="notecolor" value="#999900"><FONT color="#999900">■</FONT><INPUT type="radio" name="notecolor" value="#669900"><FONT color="#669900">■</FONT><INPUT type="radio" name="notecolor" value="#000099"><FONT color="#000099">■</FONT><INPUT type="radio" name="notecolor" value="#660099"><FONT color="#660099">■</FONT><INPUT type="radio" name="notecolor" value="#990099"><FONT color="#990099">■</FONT><INPUT type="radio" name="notecolor" value="#000000"><FONT color="#000000">■</FONT>
色数を増やしたい場合は上記を付け足していってください。また、青文字の部分はカラーコードになるので、好きな色のコードに変更し、上記ような一つのまとまり内ではカラーコードを同一のものにしてください。ここで違うカラーコードを指定すると、色見本として表示してある色とチェックした後に反映される色が異なってしまいます。
タイトルの色：■■■■■■■■するとこのようなラジオボタンによるチェック式の色選択が出来るようになります。
本文の色：■■■■■■■■
さらに、 [template.html]を開きます。27行目以上で完了です。
<FONT color="$log{titlecolor}">$log{title}</FONT>
33行目
<FONT color="$log{notecolor}">$log{note}</FONT>
まずはアイコンを用意してください。もしも、他素材サイト様からお借りする場合は、そのサイトの利用規約よく読んだ上でご利用下さい。
[form.txt]を開きます。
赤文字の部分を付け足し、青文字の部分は用意したアイコンのファイル名に変更してください。
タイトル：<input type="text" name="titlecolor" value="non title" size="60"><BR><INPUT type="radio" name="icon" value="アイコンファイル1"><IMG src="アイコンファイル1" border="0">
アイコン：<INPUT type="radio" name="icon" value="アイコンファイル1" checked><IMG src="アイコンファイル1" border="0"><INPUT type="radio" name="icon" value="アイコンファイル2"><IMG src="アイコンファイル2" border="0"><INPUT type="radio" name="icon" value="アイコンファイル3"><IMG src="アイコンファイル3" border="0">
アイコンの数を増やしたい場合は上記を付け足していってください。また、青文字の部分には実際のアイコンのファイル名を入れてください。（例：icon1.gif）2ヵ所あるアイコンファイル1には、同じアイコンのファイル名をいれてください。他数字も同様に、数字が同じ「アイコンファイル〜」には同じアイコンのファイル名をいれてください。ここで違うファイル名を入れると、見本として表示してあるアイコンとチェックした後に反映されるアイコンが異なってしまいます。
※注意！
imagesフォルダにアイコンを格納した場合は、[images/アイコンファイル名]としてください。（例：images/icon1.gif）
そして[template.html]を開きます。<IMG src="$log{icon}" border="0" alt="icon">上記タグをアイコンを表示したい箇所に挿入してください。
以上で完了です。
まだ何もありません。