WordPress個別サポート

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

そんなときは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でお困りのときはご相談を
細かい質問からCSSやPHPのカスタマイズ、トラブル対応まで、この記事を書いた西沢直木が直接、WordPress個別サポートで対応します。
WordPress個別サポートの特徴
  • 最短で本日中に問題解決できます
  • 見積もり無料・料金は終了後の後払いです
  • 銀座教室・スカイプ・出張またはメールで対応します
カスタマイズ・トラブル対応でお急ぎのときは
「カスタマイズがうまくいかない」「突然トラブルが発生した!」などでお急ぎのときはWordPressメールサポートで対応します。ご活用ください。
WordPress個別サポートの連絡先

WordPress個別サポートへの問い合わせWordPress個別サポートの申し込み

関連記事

スポンサーリンク