揺らせるプラグイン「WP Link Button Shake Actions」

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

本日はボタンにカンタンな動きをつけるためのプラグインをご紹介いたします。

揺らせるプラグイン「WP Link Button Shake Actions」

ざっと以下3タイプの動作を足す方法を解説させていただきます。

A. 上下に揺らすアクション
B. 左右に振るアクション
C. 激しく動かすアクション

使用するためのプラグインは「WP Link Button Shake Actions」です。使い方はとてもシンプル。ワードプレスで運営しているウェブサイト内へ設置済みのボタンに「CSSを追加」するだけで動きます。

対応しているクラス名

動かすためには以下3つのどれかを追記すれば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」なので上下に揺れています。

リンクテキストも画像リンクもなんだか揺れていると押したくなりますよね。プラグインは以下のボタンからダウンロード可能です。有効後にクラス名を足せば揺れるのでぜひお試しくださいませ。

【今すぐ無料プラグインを手に入れる】
無料ダウンロードはこちら

ワードプレス専門家に丸投げする

WPホームページ研究所はワードプレスを中心としたブログ作成・ホームページ制作・オウンドメディア構築・プラグイン設定・調整など幅広いカスタマイズに対応しております。 記事の掲載情報はもちろんお好みの機能をいただければ専属スタッフが心を込めて対応させていただきます。まずはお気軽にお問い合わせくださいませ。

お問い合わせの種類をお選びください(もっとも近い項目)

法人の場合は法人名とご担当者のお名前をご入力ください

返信時のご連絡に利用するメールアドレスをご入力ください

運営中のウェブサイトURLがあればご入力ください

お困りの内容があれば詳しい内容をお聞かせください