アイコンの使用方法

アイコンを使用したスキンを作成するときはちょっとしたコツが必要になります。
そのコツをサンプルを交えながら説明いたします。

アイコンを使用したスキンの作成

まず、次のようにアイコンを用意します。

icon001.gif	icon002.gif	icon003.gif

そして、そのアイコンをスキンボードと同じフォルダに設置する場合の説明をします。
アイコン画像は同一フォルダに直接入れてもいいのですが、ファイル数が多い場合などがありますので、別フォルダを作成した方が整理しやすいです。

《infoseekなどの場合》　（１例） 　public_html　（自分のホームページ作成フォルダ） 　　├index.html　（スキンボードを呼び出すトップページなど） 　　└cgi-bin　（スキンボードを設置するフォルダ） 　　　　├acclibf.cgi 　　　　│　〜　　（スキンボードの関連ファイル） 　　　　├sknbrdf.htm 　　　　└img　　（アイコンを設置するフォルダ） 　　　　　　├icon001.gif　（アイコン１） 　　　　　　├icon002.gif　（アイコン２） 　　　　　　└icon003.gif　（アイコン３）

 

入力フォームでアイコンを選択させようとするとき、よく使われるのがセレクトメニュー（プルダウン形式）です。
そして、それを入力フォームで使用するときの記述例は、次のような方法があります。

説　明	変化する部分のみの記録	ファイル名すべてを記録
入力フォーム での記述	<select name=”icon”> <option value=”#icsl001#”>机</option> <option value=”#icsl002#”>電話</option> <option value=”#icsl003#”>パソコン</option> </select>	<select name=”icon”> <option value=”#icslicon001.gif#”>机</option> <option value=”#icslicon002.gif#”>電話</option> <option value=”#icslicon003.gif#”>パソコン</option> </select>
ログ記録の内容	001、002、003	icon001.gif、icon002.gif、icon003.gif
表示部での記述	<img src=”./img/icon#icon#.gif”>	<img src=”./img/#icon#”>

セレクトメニューでの記述は、「#icsl」に続く文字がメッセージとして記録されます。
それを、簡易コマンド「#icon#」で受け取ってhtmlに記述します。

変化する部分のみを記録したほうが、後で変更が出てきたとき簡単に修正できます。
ただし、将来的にアイコンを変更する予定がある場合は、「ファイル名すべてを記録」にした方が過去ログのアイコンが変わらずにすみます。

別フォルダのアイコンを使用する場合

次に、次のようにアイコンだけが別フォルダにある場合の説明をします。

《infoseekなどの場合》　（１例） 　public_html　（自分のホームページ作成フォルダ） 　　├index.html　（スキンボードを呼び出すトップページなど） 　　├cgi-bin　（スキンボードを設置するフォルダ） 　　│　├acclibf.cgi 　　│　│　〜　　（スキンボードの関連ファイル） 　　│　└sknbrdf.htm 　　└images　　 （アイコンを設置するフォルダ） 　　　　├icon001.gif　（アイコン１） 　　　　├icon002.gif　（アイコン２） 　　　　└icon003.gif　（アイコン３）

 

	変化する部分のみの記録	ファイル名すべてを記録
入力フォーム での記述	<select name=”icon”> <option value=”#icsl001#”>机</option> <option value=”#icsl002#”>電話</option> <option value=”#icsl003#”>パソコン</option> </select>	<select name=”icon”> <option value=”#icsl../images/icon001.gif#”>机</option> <option value=”#icsl../images/icon002.gif#”>電話</option> <option value=”#icsl../images/icon003.gif#”>パソコン</option> </select>
ログ記録の内容	001、002、003	../images/icon001.gif、 ../images/icon002.gif、 ../images/icon003.gif
表示部での記述	<img src=”../images/icon#icon#.gif”>	<img src=”#icon#”>

やはり、この場合も変化する部分のみを記録したほうが、記述が簡単です。
それに、前述の例と比べても表示部での記述を変更するだけですみます。
ただし、将来的にアイコンを変更する予定がある場合は、「ファイル名すべてを記録」にした方が過去ログのアイコンが変わらずにすみます。

アイコンのファイル名が番号でない場合

次に、アイコンのファイル名が番号でない場合の説明をします。

desk.gif	tel.gif	com.gif

これらのアイコンがスキンボードと同じフォルダに設置されている場合の説明です。
最初のサンプルと同様、アイコン専用のフォルダを作成しています。

《infoseekなどの場合》　（１例） 　public_html　（自分のホームページ作成フォルダ） 　　├index.html　（スキンボードを呼び出すトップページなど） 　　└cgi-bin　（スキンボードを設置するフォルダ） 　　　　├acclibf.cgi 　　　　│　〜　　（スキンボードの関連ファイル） 　　　　├sknbrdf.htm 　　　　└img　　（アイコンを設置するフォルダ） 　　　　　　├desk.gif　（アイコン１） 　　　　　　├tel.gif　（アイコン２） 　　　　　　└com.gif　（アイコン３）

 

入力フォームでアイコンを選択させようとするとき、よく使われるのがセレクトメニュー（プルダウン形式）です。
そして、それを入力フォームで使用するときの記述例は、次のような方法があります。

説　明	変化する部分のみの記録	ファイル名すべてを記録
入力フォーム での記述	<select name=”icon”> <option value=”#icsldesk”>机</option> <option value=”#icsltel#”>電話</option> <option value=”#icslcom#”>パソコン</option> </select>	<select name=”icon”> <option value=”#icsldesk.gif#”>机</option> <option value=”#icsltel.gif#”>電話</option> <option value=”#icslcom.gif#”>パソコン</option> </select>
ログ記録の内容	desk、tel、com	desk.gif、tel.gif、com.gif
表示部での記述	<img src=”./img/#icon#.gif”>	<img src=”./img/#icon#”>

 

上記以外のご質問は、メールでご質問ください。
スキンボードをご利用したご感想をぜひお寄せください。