こんにちは、WPホームページ研究所の運営サポートチーム（@WP_LABO）です。
本日はボタンにカンタンな動きをつけるためのプラグインをご紹介いたします。
ざっと以下３タイプの動作を足す方法を解説させていただきます。
Ａ. 上下に揺らすアクション
Ｂ. 左右に振るアクション
Ｃ. 激しく動かすアクション
使用するためのプラグインは「WP Link Button Shake Actions」です。使い方はとてもシンプル。ワードプレスで運営しているウェブサイト内へ設置済みのボタンに「CSSを追加」するだけで動きます。
対応しているクラス名
動かすためには以下３つのどれかを追記すればOKです。クラスを追加してください。
<!-- 縦に揺らすアクション -->
<img class="shake-actions-vertical" src="#" alt="#" />
<!-- 横に振るアクション -->
<img class="shake-actions-beside" src="#" alt="#" />
<!-- 激しく揺らすアクション -->
<img class="shake-actions-rapid" src="#" alt="#" />動かしたいhtmlタグにクラス名を足すだけなので手軽に導入できます。
実際に動かしてみた例
参考として「a/div/img」タグに対して動作をつけてみました。MP4で動きを撮影したのでご確認ください。
・aタグを動かした場合
文字のリンクに「.shake-actions-vertical」を足した例です。
・divタグを動かした場合
次は外枠のdivに対して同じクラス名を追加したパターンです。
・imgタグを動かした場合
最後にイメージに対してクラスを足した例。上記は全部「.shake-actions-vertical」なので上下に揺れています。
リンクテキストも画像リンクもなんだか揺れていると押したくなりますよね。プラグインは以下のボタンからダウンロード可能です。有効後にクラス名を足せば揺れるのでぜひお試しくださいませ。
最新式の無料プラグインを事前公開
WordPressは公式サイトに登録済みのプラグインだけで全機能を補足しきれません。当サイトでは使いやすさを追求した魅惑的なプラグインを無料でダウンロードいただけます。運営ホームページのマーケティング力をさらに高めるチャンスです。まずは無料でDLしてお試しくださいませ。
→ 改良されたプラグインを確認する
