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

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

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

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

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

メシオプレス01バナー

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

メシオプレス01バナー

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

マウスオーバーするとフェードで半透明に変化する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
なども解説してくれています。

●本日のまとめ
kobo takeさんのブログで、マウスを乗せるとゆっくり半透明になる画像など、
画像をかっこよく魅せることができるJavaScriptが紹介されていた。
無料のWordPressテーマ「Free WordPress Theme KOBOTAKE」も良さそう。

この記事へのコメント

  1. N氏2013年8月16日 11:26

    めしおさん、初めまして!

    WPのテンプレート、何かいいの無いかしらと思って思い出してめしおさんのブログを久しぶりにぐるぐる回っていたのですが、

    Free WordPress Theme KOBOTAKE

    こちら、ドメインがドロップしていて海外の方に取られちゃってませんかね?

    ちょっとご報告でした!

    PS.
    8月以降ににレスポンシブ対応されるかも?とのことでしたので、
    もうちっと他の事して待ってようと思います!

    返信
    • めしお2013年8月16日 12:56

      N氏さん

      >ドメインがドロップしていて海外の方に取られちゃってませんかね?

      あら、ホントですね。
      削除しておきました。
      ご報告ありがとうございます。

      >8月以降ににレスポンシブ対応されるかも?とのことでしたので、

      メシオプレス01は本当にスマホ最適化できるように、
      レスポンシブではなく、スマホ専用テーマを使ったスマホ対応になります。
      「WPtouch」のメシオプレス版のようなものを同梱する予定です。
      今月中に完成させて、9月のリリースになると思います。

      返信

コメントする