【WordPress】画像にホバーエフェクトをつけてクルクルしたり、裏返して遊ぶ

【WordPress】画像にホバーエフェクトをつけてクルクルしたり裏返して遊ぶ
とち
とち

産経新聞社サンスポ記者として、Jリーグ、プロ野球、オリンピックなどを担当してきた『とち』(@blue_chikippaa)です。

真面目に、かるくが執筆信条。
現在はWeb制作会社の代表の傍ら、ブロガーとしていろいろ書きながら生きてます。

画像にマウスをのせたとき、スマホでタップしたとき、動きがあると興奮する性分です。

今回はホバーエフェクトを手軽に実装できるプラグイン『Image Hover Effects Ultimate』をご紹介します。

イメージは見てもらった方が早いですね。
(実際にクライアントワークでImage Hover Effectsを使いサイト制作をいたしました。リンクを本記事の最後に貼っていますので見てってください)


こんな感じのホバーができます。

※遊びすぎ注意(゚д゚)!

①Button Effects(ボタンリンク)
②General Effects(ひょっこっと動く)
③Square Effects(クルクルしたり)
④Caption Effects(テキストもたっぷり)
⑤Flipbox Effects(くるりん)
⑥Magnifier Effects(拡大鏡)
⑦Comparison Effects(before/after)

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』からエフェクトのタイプを選択

④スタイルを決める

④スタイルを決める

⑤のちに作られるショートコードの名前をつける(非表示部分・わかればOK)

⑤のちに作られるショートコードの名前をつける(非表示部分・わかりやすければOK)

⑥プレビューからEdit(編集)をクリック

⑥プレビューからEdit(編集)をクリック

⑦ホバー時に表示するテキストやボタンリンクを設定

⑦ホバー時に表示するテキストやボタンリンクを設定

⑧ショートコードをコピー

⑧ショートコードをコピー

⑨投稿画面にペースト

⑨投稿画面にペースト

⑩完成!

簡単でしょ、ぴよ。

まとめ:【WordPress】画像にホバーエフェクトをつけてクルクルしたり、裏返して遊ぶ

まとめ:【WordPress】画像にホバーエフェクトをつけてクルクルしたり、裏返して遊ぶ

名簿みたいなモノにいいなと思い、実際のサイト制作案件で『Image Hover Effects Ultimate』を使用してみました。

リンクを貼っておきますので、ご興味あればどうぞ。
»近畿大学ボクシング部ホームページ

WordPress
スポンサーリンク
この記事を書いた人
とち

★2020年産経新聞社を退職→Web制作・マーケティング会社を設立
★ブログ、デザイン、スポーツ(サッカー&NBA)を愛する39歳。
★いろいろ書きながら、やんちゃ息子2人と陸ガメと鬼嫁と京都に生息中。
★副業を推奨するファイナンシャル・プランナー(FP2級技能士)でもあります。

「良い記事」と思ったら拡散を!
副業・会社脱出ガイドtochiblog〜元スポ新聞記者の編集室〜

ご意見ご感想ぜひ!

タイトルとURLをコピーしました