WordPressテーマ「TCD」でお馴染み、デザインプラスの中田さんが
「かっこよく画像を半透明にフェードさせる方法」
の記事を紹介していました。
当ブログでも早速採用してみましたので、やり方を解説しておきます。
ゆっくりとフェードで半透明に変化する画像
まず、通常の変化はこちらです。画像にマウスを乗せてみてください。
次に、ゆっくり変化するのがこちらです。
このやり方を解説してくれているのが下記の記事です。
マウスオーバーするとフェードで半透明に変化するJavascript | KOBO TAKE
画像をかっこよく見せるJavascriptの設置方法
1. 「jquery.js」「rollover.js」をkobo takeさんのブログからダウンロード。
2. 「js」というフォルダを作成し、ダウンロードしたファイルを入れる
3. ドメイン直下にFTPソフトでアップロード
4 .<head>と</head>の間にコードを記述
当ブログ(メシオプレス01)の場合は、
header.phpの</head>の直前に記述してみました。
[html]<script src=’js/jquery.js’></script>
<script src=’js/rollover.js’></script>
</head>[/html]
5. かっこよく見せたい画像のclassに「overimg」を記述
WordPressの管理画面から画像をアップロードすると
[html]class="aligncenter size-full wp-image-1073" />[/html]
こんな感じの部分がありますので、
わかりやすいようにclass=”のすぐ後ろに記述してみました。
[html]class="overimg aligncenter size-full wp-image-1073" />[/html]
6. AddQuicktagに「overimg」を追加(任意)
私は記事の編集にAddQuicktagを使っていますので、
いつでも使えるように「overimg」を追加しておきました。
以上で完了です。なかなかオシャレな視覚効果ですよね。
ちなみに、画像にリンクURLを入れなくてもゆっくり半透明になるようです。
ただし、クリックできると勘違いしてしまう人もいるかも知れませんので、
リンクさせない画像には使わないほうが良いと思います。
他にも、画像をピカッと光らせるJavaScript、
画像が自動ドアのように開くユニークなJavascript
なども解説してくれています。
●本日のまとめ
kobo takeさんのブログで、マウスを乗せるとゆっくり半透明になる画像など、
画像をかっこよく魅せることができるJavaScriptが紹介されていた。
無料のWordPressテーマ「Free WordPress Theme KOBOTAKE」も良さそう。