WordPressで画像ホバー効果を追加する方法（5つの簡単な方法）

ウェブサイトにホバー効果を追加するのは些細なことのように思えるかもしれませんが、サイトの見た目と使いやすさを向上させることができます。訪問者が画像やボタンにマウスを合わせ、わずかに変化を感じると、その要素がインタラクティブであることを示します。. 

このさりげない動きはエンゲージメントを向上させ、直帰率の低下につながります。ホバー効果は特にeコマースで効果的です。買い物客が商品をより詳しく確認し、さらに詳しく見て購入手続きに進むよう促すことができます。WordPress

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

WordPressで画像ホバー効果を追加する方法

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

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

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

例えば、複数の画像ギャラリーがある場合、ブログのサムネイルにはシンプルなズーム効果、商品画像には反転効果など、それぞれに異なるアニメーションを適用できます。

Image Hover Effects Ultimateのようなプラグインを使えば、この作業がはるかに簡単になります。このプラグインは誰でも無料で利用でき、各要素に幅広いエフェクトが用意されています。使い始めるには、以下のチュートリアルに従ってインストールするだけです。 

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

• WordPress 管理領域を開きます。.
• サイドバーのプラグインからインの追加」をクリックします

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

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

画像ホバーエフェクトWordPressプラグインの使用

• ダッシュボードに新しい画像ホバー

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

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

気に入ったものが見つかったら、 「スタイルの作成」を。

• ポップアップが表示されます。 「名前」欄にタイトルを入力し、レイアウトからエフェクト（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); }
 

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

• 次に、投稿に戻り、下線効果を適用するテキストを選択します。.
• ブロックサイドバーの「詳細」を開き 「追加の CSS クラス」にunderline-hover と。

• ページを保存し、プレビューして効果を確認します。. 

ホバーエフェクトは実に豊富に揃っているので、自分のスタイルに合ったものを選んでください。CSSを自分で書いてみるのもいいですし、WordPressコミュニティでサンプルを探すのもいいでしょう。とにかく、色々なエフェクトが揃っています！

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

Elementorのようなページビルダーを使えば、創造性豊かなウェブサイトを構築できます。ホバーエフェクトも組み込まれており、コーディングなしですぐに使えるので、ウェブサイトを華やかに演出できます。.

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

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

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

• 画像を選択し、 「スタイル」タブに移動します。
• 下にスクロールして、 Hover。

• ホバーアニメーションのには、すぐに使用できるさまざまなエフェクトがあります。

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

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

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

ショートカットをお探しなら、Flipboxプラグインをインストールできます。Flipboxエフェクトとは、画像にマウスを合わせると、画像が反転して前面または背面のコンテンツが表示されるエフェクトです。.

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

• WordPressダッシュボードから「プラグイン」メニューをクリックします。次に、 「プラグインを追加」。
• 検索バーに「Flipbox と入力します

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

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

• ポップアップが表示されます。希望のレイアウト（1番目、2番目、または3番目）を選択し、タイトルを入力します。. 

• 「保存」をクリックします。
• 次に、カスタマイズ メニューに移動し、エフェクトを設定したりコンテンツを追加したりできます。.

• 「プレビュー」を見つけます。 「編集」、フリップボックスの前面と背面の両方のコンテンツをカスタマイズします。

• 完了したら、 「送信」保存します。

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

• これで完成です。 

方法5：Gutenbergブロックを使用する

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

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

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

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

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

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

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

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

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

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

• スニペットを保存して有効にします。.
• 次に、ページをプレビューして、ホバーフェード効果が実際にどのように作用するかを確認します。.

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

エフェクトを使いすぎるとパフォーマンスに影響しますか?

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

サイトに過負荷をかけずにユーザー エクスペリエンスを向上させるには、必要なホバー効果のみを使用するのが最適です。.

まとめ

WordPress で画像のホバー効果を追加する方法を学ぶと、ユーザーとのインタラクションを強化してユーザーの関心を維持し、サイトの向上に役立ちます。.

プラグイン、カスタムCSS、ページビルダーなど、ホバー効果を追加する方法は複数あるので、自分に最適なものを自由に選べます。様々なスタイルを試して、サイトに最適なものを見つけてください。