画像にマウスオーバーするとキャプションなどがフェードインしてくるマウスオーバーアクション。作ってみたくても難しそうですよね。

そんなときはWordPressのImage Hover Effects Ultimateプラグインが便利です。

画像を選んだりキャプションの文字を入力したりするだけで次のようなマウスオーバーアクションを作成することができます。

以下、手順を紹介します。

スポンサーリンク

Image Hover Effects Ultimateプラグインによるマウスオーバーアクションの設定

「プラグイン」‐「新規追加」メニューからImage Hover Effects Ultimateプラグインをインストール、有効化します。

Image Hover Effects Ultimateプラグインのインストール

Image Hover Effects Ultimateプラグインのインストール

「Image Hover」メニューからマウスオーバーアクションを定義していきます。

まずは、「Image Hover」メニューのサブメニュー(例:General Effects)を開いて、使いたいアクションが決まったら「Select」をクリックします。

使いたいアクションの選択

使いたいアクションの選択

任意の名前を入力して「Save」ボタンをクリックします。

設定を保存

設定を保存

「Add New Items」をクリックして、マウスオーバーする画像や、フェードインしてくる文字などを設定します。

マウスオーバーアクション設定画面を開く

マウスオーバーアクション設定画面を開く

最初に表示される画像や、フェードインする内容を設定して、「Submit」ボタンをクリックします。マウスオーバー時の背景画像も設定できます。

マウスオーバーアクションの設定

マウスオーバーアクションの設定

その他、画像や文字について細かく設定できますが、ひとまずショートコードをコピーして動かしてみましょう。

ショートコードをコピー

ショートコードをコピー

コピーしたショートコードを任意のページにペーストすれば、次のようなマウスオーバーアクションの完成です。

サンプル喫茶

オープンしました!

詳しくはこちら

あとは、いろいろなパターンを試してみてください。

この記事をSNSで共有する
WordPressでお困りのときはご相談を
この記事を書いた西沢直木が直接、WordPress個別サポートで対応します。
WordPressの使い方・カスタマイズ・トラブル対応など、ご相談ください。
お問い合わせはこちらから
【対応料金の見積もりは無料です】
wordpress講座受講予約
WordPress講座の問い合わせ先

関連記事

スポンサーリンク