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

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

Glossyについて

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

サンプル

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

ダウンロード

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

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

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

https://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" を指定した画像だけ効果が適用されます。

動作の確認

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