WordPressでマウスオーバー時に画像をフェードさせる方法（シンプル＆簡単）

小さなことのように思えるかもしれませんが、私たちがWordPressサイトに追加することのひとつに、ユーザーが画像の上にマウスを移動したときにフェードインまたはフェードアウトするシンプルなアニメーションがあります。これは、サイトをより魅力的でインタラクティブなものにする、さりげなくも効果的な方法です。

私たちは、このような小さな視覚的な合図が、訪問者のコンテンツへの接し方に大きな違いをもたらすことを発見しました。単にサイトをきれいに見せるだけでなく、このようなアニメーションは、実際に訪問者がコンテンツをもっと探検するよう促すことができるのです。

この投稿では、WordPressでマウスオーバー時に画像のフェード効果を追加する方法を紹介する。

なぜWordPressでマウスオーバー時に画像をフェードさせるのか？

アニメーションはウェブサイトをより面白くする簡単な方法で、ウェブサイトのロゴや行動喚起など、ページの最も重要なコンテンツに訪問者の注意を引くこともできます。

WordPressでCSSアニメーションを使う方法はいろいろありますが、画像にマウスオーバー効果を加えるのは特に効果的です。フェードアニメーションは、訪問者がマウスオーバーすると画像がゆっくりと表示されたり消えたりすることを意味します。

こうすることで、画像とのインタラクションを促し、ページにストーリー性を持たせることもできます。例えば、訪問者がページ内を移動するにつれて、異なる画像がフェードインしたりフェードアウトしたりします。

他のアニメーションとは異なり、マウスオーバー時のフェード効果は微妙なものなので、訪問者の読書体験や行った画像最適化に悪影響を与えることはありません。

それでは、WordPressでマウスオーバー時に画像にフェードを追加する方法をご紹介しましょう。以下のクイックリンクから、使いたい方法にジャンプしてください：

方法1：WordPressのすべての画像にマウスオーバー時の画像フェードを追加する

すべての画像にフェード効果を追加する最も簡単な方法は、WPCodeを使用することです。この無料プラグインを使えば、テーマファイルを編集することなく、WordPressにカスタムコードを簡単に追加することができる。

WPCodeを使用すると、初心者でもWordPressの一般的なエラーの原因となるミスやタイプミスのリスクを負うことなく、サイトのコードを編集することができます。

最初に行う必要があるのは、無料のWPCodeプラグインをインストールして有効化することです。詳しくは、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。

有効化したら、Code Snippets ” Add Snippetにアクセスしてください。

ここでは、サイトに追加できる既製のWPCodeスニペットがすべて表示されます。これらのスニペットには、コメントを完全に無効化したり、WordPressが通常サポートしていないファイルタイプのアップロード、添付ファイルページの無効化などが含まれます。

カスタムコードの追加」にマウスオーバーし、表示されたら「+カスタム・スニペットの追加」をクリックするだけです。

はじめに、カスタムコードスニペットのタイトルを入力します。これは、WordPressダッシュボードでスニペットを識別するのに役立つものであれば何でも構いません。

WordPressにカスタムCSSを追加するには、「コードタイプ」のドロップダウンを開き、「CSSスニペット」を選択します。

コードエディターで、以下のコード・スニペットを追加する：

img:hover {
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-ms-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
}

このコード・スニペットは、ユーザーがマウス・オーバーすると、各画像を2秒間フェードさせます。画像をより遅くフェードさせたい場合は、’2s ease’をより大きな数値に置き換えてください。画像をより速くフェードさせたい場合は、’1s ease’またはそれ以下の数値を使用してください。

また、opacity:0.6の行を変更することで、「不透明度」を高くしたり低くしたりすることもできる。

これらの数値のいずれかを変更する場合は、すべてのプロパティ（webkit、moz、ms、およびo）で変更して、フェード効果がどのブラウザーでも同じように見えるようにしてください。

スニペットに満足したら、「インサーター」セクションまでスクロールしてください。WPCodeは、すべての投稿の後、フロントエンドのみ、管理者のみなど、さまざまな場所にコードを追加することができます。

すべての画像にフェード効果を追加するには、「自動挿入」がすでに選択されていなければ、それをクリックします。次に、「場所」ドロップダウンメニューを開き、「サイト全体のヘッダー」を選択します。

その後、画面を一番上までスクロールし、「Inactive」トグルをクリックして「Active」に変更すれば準備完了です。

最後に「Save Snippet」をクリックして、CSSスニペットをライブにする。

これで、WordPressサイト上の画像にマウスオーバーすると、フェード効果が表示されます。

方法2：個々のページに画像のフェード・アニメーションを追加する

特に、フォトギャラリーや ストックフォトストアなど、たくさんの画像を掲載しているサイトでは、個別画像ごとにフェード効果を使用すると邪魔になることがあります。

カテゴリー: 特定のページや投稿日だけにフェード効果を使いたい場合もあるでしょう。

WPCodeはカスタム・ショートコードを作成できる。このショートコードを任意のページに設置すれば、WordPressはそのページのみにフェード効果を表示する。

これを行うには、カスタム・コード・スニペットを作成し、上記と同じ手順に従ってフェード・アニメーション・コードを追加するだけです。その後、「スニペットを保存」ボタンをクリックします。

その後、「インサーター」セクションまでスクロールするが、今回は「ショートコード」を選択する。

これは、任意のページ、投稿、またはウィジェット対応エリアに追加できるショートコードを作成します。

その後、上記と同じプロセスでスニペットをライブにする。

あなたは今、任意のページ、投稿、またはウィジェット対応エリアに移動し、新しい’ショートコード’ブロックを作成することができます。そして、WPCodeショートコードをそのブロックに貼り付けるだけです。

ショートコードの設置方法については、WordPressでショートコードを追加する方法をご覧ください。

更新’または’公開’ボタンをクリックして、ショートコードをライブにします。その後、そのページ、ページ、またはウィジェット対応エリアにアクセスして、フェードオンマウスオーバー効果を見ることができます。

方法3：アイキャッチ画像に画像のフェードアニメーションを追加する

もう一つのオプションは、おすすめ画像や投稿サムネイルにフェードアニメーションを追加することです。これらは投稿の主要な画像です。

マウスオーバー時にアイキャッチ画像をフェードさせることで、WordPressブログやウェブサイト全体の個別画像をアニメーション化することなく、サイトをより人目を引き、魅力的なものにすることができます。

投稿サムネイルにフェードアニメーションを追加するには、上記と同じプロセスで新しいカスタムコードスニペットを作成するだけです。

ただし、今回はエディターに以下のコードを追加する：

img.wp-post-image:hover {
opacity:0.6;
filter:alpha(opacity=60); /* For IE8 and earlier */
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-ms-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
}

その後、「インサーター」ボックスまでスクロールし、「自動挿入」を選択する。

次に、「場所」のドロップダウンメニューを開き、「サイト全体のヘッダー」を選択します。

その後、上で説明したのと同じプロセスで、コード・スニペットをライブにすることができる。

アイキャッチ画像にマウスオーバーすると、フェードアニメーションが表示されます。

さらに画像のマウスオーバー効果を追加したい場合は、WordPressで画像のマウスオーバー効果を追加する方法をご覧ください。

WordPressの画像に追加できるボーナスエフェクト

フェードエフェクトは画像をより面白くする楽しい方法ですが、WordPressでアニメーションを使う方法は他にもたくさんあります。例えば、ユーザーが画像にマウスオーバーするとテキストが表示されるフリップボックスアニメーションや、画像をより詳しく見ることができるズームエフェクトなどがあります。

画像に加えることができる他の面白いエフェクトを紹介しよう：

• WordPressでInstagramのような写真フィルターを追加する方法（ステップバイステップ）
• WordPressでビフォーアフター写真を表示する方法（スライド効果付き）
• WordPressの画像を右クリック禁止にする方法
• WordPressでインタラクティブな画像を作成する方法
• WordPressでインタラクティブな360度画像を簡単に追加する方法

この投稿が、WordPressでマウスオーバー時に画像をフェードさせる方法を学ぶのにお役に立てば幸いです。また、WordPressのファイルをメディアライブラリフォルダに整理する方法や、WordPressに最適なアイキャッチ画像プラグインとツールのエキスパートピックもご覧ください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.