ホームページビルダー・グレート初心者講座

Yahoo!ブックマークに登録

グレート初心者講座トップへグレート初心者講座 小技集へグレート初心者講座 FAQへグレート初心者講座 質問掲示板へ





 Glossyを使って画像に光沢を出す

Glossyについて


GlossyはJavaScriptのライブラリで、簡単な設定で画像に光沢を出す事ができます。
グラフィックソフトを使う事なく効果を出せるので非常に手軽です。


サンプル


通常の画像    glossyを適用した画像
 
 




  ダウンロード

以下のページからダウンロードします。

glossy.js
http://www.netzgesta.de/glossy/






今回ダウンロードしたのは以下のファイルです。

http://www.netzgesta.de/glossy/glossy.zip



zipで圧縮されていますので解凍すると、glossy.js が出てきます。
これを設置するhtmlファイルと同じディレクトリにコピーして下さい。





  ヘッダにタグを追加

ビルダーの 「編集」 → 「ページの属性」 とクリックし 「その他」のタブをクリックします。

「その他のHTMLタグ」 と記載された入力枠がありますので、そこへ以下の1行を追加します。
追加したら 「OK」 ボタンをクリックして下さい。

備考

直接HTMLソースに追記する場合は <head> 〜 </head> の間に追加します。





  クラスを指定

後はクラスを指定するだけで基本的な設置は完了です。


光沢を出したい画像を右クリックし 「スタイルの設定」を選択します。
「定義済みクラスの指定(2)」の入力フォームに glossy と入力してOKを押せば完了です。

※ 16 x 16ピクセル以上の画像でないと上手く光沢になりません。




備考


HTMLソースを直接編集する場合はIMGタグに class="glossy" を追加するだけです。
例えば <IMG src="1.jpg"> の場合 <IMG src="1.jpg" class="glossy"> とします。
class="glossy" を指定した画像だけ効果が適用されます。





  動作の確認

以上の操作で指定画像に光沢が出ていると思います。
「プレビュー」画面にして確認してみましょう。







| トップページへ | 小技集 | FAQ | 質問掲示板 | 免責事項  | リンクについて  | お問い合わせ  |
ホームページビルダー・グレート初心者講座 Copyright © 2002-2005 aimix All Rights Reserved