初めまして。LIGフィリピン支社代表のせいとです。
今回は『yuga.js』というjQueryのプラグインを使用して、WEBサイトに↑のお姉さんのような”優雅さ”を加えるやり方を書かせていただきます。
『yuga.js』とは？
yuga.jsとは、Kyosuke氏によって作られた、WEBサイトをなんかこう、カッコよくするヤツです。
これを使うと、たとえば…
- カーソルを合わせると画像が切り替わる動き（マウスオーバー）が簡単にできる。
- 画像をオシャレに表示させられる。
- 「ページトップへ戻る」とかのリンクの動きがスムーズになる。
といったことができるようになります。
この記事では、個人でWEBサイトを作られている方や、WEB初心者の方に読んでいただけるようにコピペだけで実装できるよう解説していきます。
それでは早速始めましょう。
ダウンロード＆下準備
まずはこちらのページからyuga.jsをダウンロード。左上のボタンからダウンロードします。
2.cssとjsをコピペする
「yuga.js_0.7.2」の中にある「css」「js」というフォルダをコピペして、ご自分のサイトのデータがあるフォルダ内（できれば最上層）に突っ込んでください。
3.コードをコピペ
テキストエディタ（メモ帳など）でサイトのページを開いてください。
上の方に
<head>というコードがあるはずなので、その下に↓をコピペ！
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/thickbox.js"></script>
<script charset="utf-8" type="text/javascript" src="js/yuga.js"></script>
4.細かく設定する
head内には3で紹介した物と似たようなタグがすでにいくつか記述されているかと思います。
それらの
href="xxx/xxx.css"
src="xxx/xxx.js"この部分！ スラッシュの前に「../」こんなんがついていたら、合わせてください。
例）
<script type="text/javascript" src="../../js/xxx.js"></script>
<script type="text/javascript" src="../../js/thickbox.js"></script>これで準備完了！ 早速何かやってみたいと思います。
優雅その１ カーソルを合わせると画像が切り替わる動きを付ける
画像にカーソルを合わせると画像が変わる、というヤツをやってみましょう。
メニューボタンなんかに使うと優雅です。
1.画像を2種類ずつ用意する。
マウスオーバーで変わる画像を2種類、用意してください。
2.画像に名前を付ける。
- 画像の名前は↓こんな感じにしてください。
- 「通常」・・・menu1.png
「カーソル合わせたとき」・・・menu1_on.png名前や拡張子はなんでもいいんですが、「_on」この部分は守ってください。
3.画像のタグにコピペする
- 画像のタグは
<a href="xxx.html"><img src="xxx.png" alt="" width="xxx" height="xxx alt=" /></a>こうなってると思います。これの「alt=”xxx”」の後ろに「class=”btn”」をコピペ！（半角スペースを忘れずに！）これでメニューボタンがYugaになります。
優雅その２ 画像をオシャレに表示させる
これはとても簡単で、画像に直接リンクを張るだけです。
タグ的には↓こんな感じです。
<a href="画像のURL">テキストリンク</a>これで画像の表示がYugaになります。
優雅その３ 「ページトップへ戻る」を滑らかにスライドさせる。
これは新たに何か記述する必要はありません。ページ内リンクに対して、勝手に機能してくれます。
最後に
いかがでしたでしょうか。
yuga.jsには他にも機能があるのですが、まずはこれだけでもだいぶWEBサイトは優雅になったはずです。
需要があれば続編も書くかもしれませんので、よろしくお願いします。
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
