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でお困りのときはご相談を
この記事を書いた西沢直木が直接、WordPress個別サポートで対応します。
こんなときはご相談を
  • WordPressの使い方(ページやメニューの作り方を教えてほしい)
  • カスタマイズ(機能の追加やデザイン調整をお願いしたい)
  • トラブル対応(画面真っ白・「ログインできない」を解決したい)
マンツーマンなので相談内容は自由です。いただいた課題をその場で解決、CSSやPHPも目の前で修正します。気軽にご相談ください。
カスタマイズがうまくいかないときは
お急ぎのときはWordPressメールサポートで対応します。ご活用ください。
wordpress講座受講予約
WordPress講座の問い合わせ先

関連記事

スポンサーリンク