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

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

この微妙な動きは、エンゲージメントを向上させ、直帰率を下げるのに役立ちます。ホバーエフェクトは、特にeコマースで役立ちます。これにより、ショッパーは製品をより詳しくプレビューし、さらなる探索とチェックアウトへの進行を促すことができます。

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エディターを開きます。
• 画像を追加します。.

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

• ホバーアニメーションドロップダウンメニューには、さまざまな使用可能なエフェクトがあります。

• ここでは例として Grow エフェクトを選択しています。その後、トランジションの期間、不透明度、その他の設定をサイトのデザインに合わせてカスタマイズできます。

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

方法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、ページビルダーなど、さまざまな方法でホバーエフェクトを追加できます。さまざまなスタイルを試して、サイトに最適なスタイルを見つけてください。