超初心者のホームページ作成 by atom
プルダウンメニュー左端 トップ はじめに/バナー 新着情報 HP作成 サンプル 関連サイト フリー素材 掲示板 その他 Google 余白 プルダウンメニュー右端

 ■ アイコンの使用方法 

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

アイコンを使用したスキンの作成
まず、次のようにアイコンを用意します。
icon001.gif icon002.gif icon003.gif

そして、そのアイコンスキンボードと同じフォルダに設置する場合の説明をします。

《infoseekなどの場合》 (1例)
 atom (自分のホームページ作成フォルダ)
  |
  └index.html (スキンボードを呼び出すトップページなど)
    |
    └cgi−bin  このCGIを設置するフォルダ
      |
      ├acclibf.cgi
      │ 〜  (スキンボードの関連ファイル)
      ├sknbrdf.htm
      │
      ├icon001.gif (アイコン1)
      ├icon002.gif (アイコン2)
      └icon003.gif (アイコン3)

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

変化する部分のみの記録 ファイル名すべてを記録
入力フォーム
での記述
<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="icon#icon#.gif"> <IMG src="#icon#">

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

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



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

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

《infoseekなどの場合》 (1例)
 atom (自分のホームページ作成フォルダ)
  |
  └index.html (スキンボードを呼び出すトップページなど)
    |
    ├cgi−bin  このCGIを設置するフォルダ
    │ |
    │ ├acclibf.cgi
    │ │ 〜  (スキンボードの関連ファイル)
    │ └sknbrdf.htm
    │
    └images  アイコンがあるフォルダ
      ├icon001.gif (アイコン1)
      ├icon002.gif (アイコン2)
      └icon003.gif (アイコン3)

変化する部分のみの記録 ファイル名すべてを記録
入力フォーム
での記述
<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 comp.gif

これらのアイコンがスキンボードと同じフォルダに設置されている場合の説明です。

《infoseekなどの場合》 (1例)
 atom (自分のホームページ作成フォルダ)
  |
  └index.html (スキンボードを呼び出すトップページなど)
    |
    └cgi−bin  このCGIを設置するフォルダ
      |
      ├acclibf.cgi
      │ 〜  (スキンボードの関連ファイル)
      ├sknbrdf.htm
      │
      ├desk.gif (アイコン1)
      ├tel.gif  (アイコン2)
      └comp.gif (アイコン3)


変化する部分のみの記録 ファイル名すべてを記録
入力フォーム
での記述
<SELECT name="icon">
<OPTION value="#icsldesk#">机</OPTION>
<OPTION value="#icsltel#">電話</OPTION>
<OPTION value="#icslcomp#">パソコン</OPTION>
</SELECT>
<SELECT name="icon">
<OPTION value="#icsldesk.gif#">机</OPTION>
<OPTION value="#icsltel.gif#">電話</OPTION>
<OPTION value="#icslcomp.gif#">パソコン</OPTION>
</SELECT>
ログ記録の内容 desk、tel、comp desk.gif、tel.gif、comp.gif
表示部での記述 <IMG src="#icon#.gif"> <IMG src="#icon#">

上記以外のご質問は、【ホームページ作成質問箱】でご質問ください。
スキンボードをご利用したご感想をぜひお寄せください。



Copyright (c) 2000-2009, All Rights Reserved & Produced by atom
SEO対策 & ツール