WordPressでボタンを揺らす・点滅させる方法：Blocks Animationが動かない場合の対策

WordPressで作成したボタンにアニメーションを加えたい場合、Blocks Animationプラグインを使用する方法がありますが、正しく設定していないと動作しません。ここでは、ボタンを点滅させたり揺らしたりする方法と、よくあるトラブルの解決策を解説します。

1. プラグインの基本設定を確認
2. ブロックにアニメーションを適用する
3. テーマやキャッシュの影響を確認
4. ショートコードやカスタムクラスの使用
5. まとめ

1. プラグインの基本設定を確認

まず、Blocks Animationプラグインが有効化されていることを確認します。管理画面でプラグインが有効になっていない場合、アニメーションは反映されません。また、プラグインの設定画面でアニメーションが有効になっているか確認してください。

2. ブロックにアニメーションを適用する

ボタンを選択してブロック設定パネルを開きます。「Blocks Animation」セクションで、希望するアニメーション（揺れる、点滅など）を選択します。複数のアニメーションを同時に選べる場合は、優先度を設定すると意図した動作が可能です。

3. テーマやキャッシュの影響を確認

テーマのCSSやJavaScriptがプラグインのアニメーションを上書きしている場合があります。テーマが独自にボタンのスタイルやトランジションを制御していないか確認してください。また、キャッシュプラグインやブラウザキャッシュもアニメーションが反映されない原因になることがあります。キャッシュをクリアして再読み込みしてください。

4. ショートコードやカスタムクラスの使用

プラグインのブロック設定だけで動作しない場合、ボタンにカスタムクラスを追加し、追加CSSでアニメーションを定義する方法もあります。例えば、CSSで @keyframes を定義してボタンに animation プロパティを適用することで、揺れや点滅を実現できます。

.shake-button {
  animation: shake 0.5s infinite;
}

@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-5px); }
  100% { transform: translateX(0); }
}