画像をゆっくり半透明に変化させてカッコよく魅せる方法

WordPressテーマ「TCD」でお馴染み、デザインプラスの中田さんが
「かっこよく画像を半透明にフェードさせる方法」
の記事を紹介していました。

当ブログでも早速採用してみましたので、やり方を解説しておきます。

ゆっくりとフェードで半透明に変化する画像

まず、通常の変化はこちらです。画像にマウスを乗せてみてください。

次に、ゆっくり変化するのがこちらです。

このやり方を解説してくれているのが下記の記事です。

マウスオーバーするとフェードで半透明に変化するJavascript | KOBO TAKE

画像をかっこよく見せるJavascriptの設置方法

1. 「jquery.js」「rollover.js」をkobo takeさんのブログからダウンロード。
2. 「js」というフォルダを作成し、ダウンロードしたファイルを入れる
3. ドメイン直下にFTPソフトでアップロード

4 .＜head＞と＜/head＞の間にコードを記述

当ブログ（メシオプレス01）の場合は、
header.phpの＜/head＞の直前に記述してみました。

<script src='js/jquery.js'></script>
<script src='js/rollover.js'></script>
</head>

5. かっこよく見せたい画像のclassに「overimg」を記述

WordPressの管理画面から画像をアップロードすると

class="aligncenter size-full wp-image-1073" />

こんな感じの部分がありますので、
わかりやすいようにclass=”のすぐ後ろに記述してみました。

class="overimg aligncenter size-full wp-image-1073" />

6. AddQuicktagに「overimg」を追加（任意）

私は記事の編集にAddQuicktagを使っていますので、
いつでも使えるように「overimg」を追加しておきました。

以上で完了です。なかなかオシャレな視覚効果ですよね。
ちなみに、画像にリンクURLを入れなくてもゆっくり半透明になるようです。

ただし、クリックできると勘違いしてしまう人もいるかも知れませんので、
リンクさせない画像には使わないほうが良いと思います。

他にも、画像をピカッと光らせるJavaScript、
画像が自動ドアのように開くユニークなJavascript
なども解説してくれています。