WordPressで画像ホバーエフェクトを追加する方法（5つの簡単な方法）

ウェブサイトにホバーエフェクトを追加することは小さな詳細のように思えるかもしれませんが、サイトの外観と使いやすさを向上させることができます。訪問者がマウスを画像やボタンに乗せると少し変化し、それがインタラクティブな要素であることを示します。. 

このさりげない動きは、エンゲージメントを高め、離脱率を低減するのに役立ちます。ホバーエフェクトは、特にECサイトで効果的です。買い物客が商品をより詳しくプレビューできるため、さらに商品を探したり、購入手続きに進んだりする意欲が高まります。WordPress

では、シンプルなフェードイン・フェードアウトから目を引くフリップアニメーションまで、画像ホバーエフェクトを追加する方法がたくさんあります。以下に、いくつかの方法をご紹介します。 

WordPressで画像ホバーエフェクトを追加する方法

この記事では、ホバーエフェクトをサイトに追加する5つの簡単な方法を紹介します。自分に合った方法を選択してください。

方法1：プラグインを使用する

プラグインを使用すると、特に同じサイトで複数のホバーエフェクトを使用したい場合に、時間と労力を大幅に節約できます。

たとえば、複数の画像ギャラリーがある場合、それぞれに異なるアニメーションを適用できます。ブログのサムネイルにはシンプルなズーム、製品画像にはフリップエフェクトなどです。 

Image Hover Effects Ultimateのようなプラグインを使用すると、このプロセスが大幅に簡素化されます。このプラグインは誰でも無料で利用でき、各要素に対して幅広いエフェクトを提供します。開始するには、以下のチュートリアルに従ってインストールするだけです: 

プラグインのインストール

• WordPress管理画面を開きます。.
• クリック プラグインを追加 サイドバーの プラグイン メニューから

• 検索バーに Image Hover Effects Ultimate と入力します。 

• 最初の結果を選択し、 今すぐインストール をクリックしてダウンロードを開始します。
• インストールが完了したら、 アクティブ化 ボタンをクリックしてプラグインの使用を開始します。

Image Hover Effects WordPressプラグインを使用する

• プラグインをインストールすると、 「画像ホバー」 ダッシュボードに 

• メニューをクリックしてプラグインの設定を開きます。. 

• 使用したいエフェクトを選択してください。このチュートリアルでは、 画像拡大機能。
• エフェクトを選択すると、さまざまなアニメーションスタイルが表示されます。.

気に入ったものが見つかったら、 スタイルを作成をクリックします。 

• ポップアップが表示されます。 名前 フィールドにタイトルを入力し、レイアウト（1番目、2番目、または3番目）から効果を選択します。次に 保存 をクリックして続行します。
• 高さ、幅、不透明度などの設定をカスタマイズできる新しいページに移動します。何が最適かを確認するために試してみてください。.

• 設定に満足したら、 「編集」 画像をカスタマイズしてください。 

• 別のポップアップが表示されます。ここで、拡大位置をカスタマイズできます。. 

• 画像を 画像の選択 ボタンで置き換えることもできます。
• すべてを設定したら、 送信 をクリックしてホバー効果を保存します。

• サイトにエフェクトを適用するには、ショートコードをコピーして投稿またはページに貼り付けてください。. 

• これで、シンプルな画像ホバーエフェクトがサイトの任意の部分で使用できるようになりました。. 

方法2: CSSを使用する

この方法では、プラグインをインストールする必要はありません。カスタムCSSを使用することで、テーマにさまざまなホバーエフェクトを追加できます。.

下線ホバーエフェクトのようなシンプルなものから始めましょう。このエフェクトをテーマに追加したい場合は、以下の簡単な手順に従ってください。

• ホバーエフェクトを追加する投稿に移動します。.
• カバーブロックをクリックして、画像を追加します。 カバー ブロックは +から追加できます。

• にコンテンツを入力してください カバー 。ここにタイトルとボタンを追加します。 

• フォントとスタイルをお好みに設定します。.
• ページを下書きとして保存します。.
• 次に、ダッシュボードの 外観 メニューに移動します。

• 次に、 カスタマイズ をクリックして、 追加CSSに移動します。次のコードを追加します。 

body { display: flex; justify-content: center; align-items: center; height: 100vh; background: #0f0f0f; margin: 0; font-family: Arial, sans-serif; } .hover-underline { font-size: 2rem; color: #ffffff; position: relative; display: inline-block; } .hover-underline::after, .hover-underline::before { content: ''; position: absolute; width: 100%; height: 2px; background: linear-gradient(to right, #ff0000, #00ffff); bottom: -5px; left: 0; transform: scaleX(0); transform-origin: right; transition: transform 0.4s ease-out; } .hover-underline::before { top: -5px; transform-origin: left; } .hover-underline:hover::after, .hover-underline:hover::before { transform: scaleX(1); }
 

• クリック 公開 してコードを保存します。 

• 投稿に戻り、下線効果を適用するテキストを選択します。.
• ブロックサイドバーの 詳細 セクションを開き、 underline-hover を 追加CSSクラス フィールドに入力します。

• ページを保存してプレビューし、効果を確認してください。. 

選択できるホバーエフェクトは非常に多いので、自分のスタイルに合ったものを選んでください。CSSを自分で書く方法を学ぶことも、WordPressコミュニティから例を見つけることもできます。必要なものはすべて揃っています！

方法3：ページビルダー（例：Elementor）を使用する

Elementorのようなページビルダーを使用すると、多くの創造性を持ってウェブサイトを構築できます。組み込みのホバーエフェクトがあり、コーディングを必要とせずにサイトを活気づけるためにすぐに使用できます。.

WordPressで画像のホバーエフェクトを作成するために使用することもできます。このセクションでは、ページ ビルダー自体に組み込まれているホバー エフェクトを試します。.

エフェクトを設定するには:

• 管理ダッシュボードから Elementor エディターを開きます。
• 画像を追加します。.

• 画像を選択し、 スタイル タブに移動します。
• 下にスクロールして、 ホバーをクリックします。

• には ホバーアニメーションの 、すぐに使えるさまざまなエフェクトが用意されています。 

• を選択しました 成長」 。サイトのデザインに合わせて、トランジションの持続時間、透明度、その他の設定をカスタマイズできます。 

• 完了したら、プレビューしなくてもすぐに効果を確認できます。. 

方法4: Flipboxプラグインを使用する

ショートカットを探している場合は、フリップボックスプラグインをインストールできます。フリップボックスエフェクトは、画像にマウスオーバーしたときに表または裏にコンテンツを表示する効果です。.

このエフェクトは、写真の前面に画像を表示し、背面にカメラの詳細を表示できるため、写真画像に最適です。しかし、可能性は無限大です。.

• WordPressダッシュボードから、 プラグイン メニューをクリックします。次に、 プラグインの追加を選択します。
• 検索バーに Flipbox - Awesome Flip Boxes Image Overlayと入力します。

• 今すぐインストールをクリックし、 プラグインを有効化 します。 

• フリップボックスを作成するには、 フリップボックス メニューに移動し、 新規作成をクリックします。
• お好みのアニメーションを選択してください。アニメーションが見つかったら、 「スタイルを作成」​​を。

• ポップアップが表示されます。必要なレイアウト（1st、2nd、または3rd）を選択し、タイトルを入力します。. 

• 保存 をクリックして続行します。
• 次に、カスタマイズメニューに移動し、効果を設定してコンテンツを追加できます。.

• 下にスクロールして プレビュー タブを見つけます。クリック 編集 してFlipboxの表裏両方のコンテンツをカスタマイズします。 

• 完了したら、 「送信」 保存してください。 

• このFlipboxをページに追加するには、生成されたショートコードをコピーしてサイトの任意のセクションに貼り付けるだけです。. 

• 以上で、完成した製品がこちらです。 

方法5: グーテンベルクブロックの使用

GutenbergはデフォルトのWordPressブロックエディタで、エディタ内で直接ホバー効果を追加できます。.

高度なホバー効果を提供していないかもしれませんが、カスタムCSSを使用してアニメーションを強化することができます。.

例として、ホバーにシンプルなフェードエフェクトを作成してみましょう。ステップバイステップのチュートリアルはこちらです:

• ホバーエフェクトを追加したい投稿またはページに移動します。.
• 新しいブロックを追加するには + をクリックし、 カバー ブロックを選択します。

• カバー ブロック内に 、 段落 ブロックを追加します。 

• タイトルと簡単な説明を入力してください。.
• 必要に応じてフォントサイズ、透明度、配置、色をカスタマイズします。.

• 次に、 カバー ブロックを選択してカスタムCSSクラスを追加します。
• 右側のサイドバーで 詳細 セクションを開きます。
• fade-hover-effect を 追加CSSクラス フィールドに入力

• その後、ページを下書きとして保存します。.

• に移動し プラグイン 、コードスニペットプラグインを選択します。この例では、 WPCode。
• 新しいCSSスニペットを作成し、次のコードを貼り付けます:

.fade-hover-effect { opacity: 0; transform: translateY(10px); transition: opacity 0.4s ease, transform 0.4s ease; } .fade-hover-effect:hover { opacity: 1; transform: translateY(0); } 

• スニペットを保存して有効にします。.
• 次に、ページをプレビューしてホバー時のフェードエフェクトが動作しているのを確認します。.

ブロックや画像に fade-hover-effect クラスを追加することで、この効果を再利用できます。ただし、画像が多い場合は、 WP Media Folder メディアライブラリをフォルダに整理することを検討してください。これにより、関連コンテンツを簡単に見つけて再利用できます。 

効果を多用するとパフォーマンスに影響する？

はい、サイトでホバーエフェクトを多用すると、特に最適化されていない場合、パフォーマンスに影響する可能性があります。これは、一部のホバーエフェクトに追加のCSSが必要なためです。サイトのCSSのサイズが大きくなると、ページの読み込み時間が遅くなります。.

サイトを過負荷にすることなく、ユーザーエクスペリエンスを向上させるために、重要なホバーエフェクトのみを使用するのが最善です。.

まとめ

WordPressで画像ホバーエフェクトを追加する方法を学ぶことで、ユーザーインタラクションを強化し、ユーザーを引き付けることでサイトを強化できます。.

プラグイン、カスタム CSS、ページビルダーなど、さまざまな方法でホバーエフェクトを追加できます。さまざまなスタイルを試して、サイトに最適なスタイルを見つけてください。