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で画像のマウスオーバー効果を追加する方法をご覧ください。

ボーナス：SeedProdで画像、テキスト、ボタンなどをアニメートする

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

SeedProdには、画像、テキスト、ボタン、動画などに追加できる40種類以上のアニメーションが用意されています。数回クリックするだけで、セクションやカラム全体をアニメーションさせることもできます。

SeedProdエディター内で、アニメートしたいコンテンツをクリックし、左側のメニューから’Advanced’タブを選択するだけです。

次に、「アニメーション・エフェクト」セクションをクリックして展開します。

その後、「Entrance Animation」のドロップダウンからアニメーションを選ぶだけで、さまざまなフェードエフェクトが用意されている。

詳しくは、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.