読了目安時間は約 4 分です。
WordPressでアニメーションさせようとすると「javascriptやcssのカスタマイズが必要なんじゃないの？」と思われるかもしれません。
しかし、WordPressがブロックエディタ（Gutenberg）になった現在では、ブロックごとにアニメーションの設定ができるプラグインが現れ、WordPressで簡単にアニメーションするWebサイトを構築できるようになりました。
例えば下記の記事で紹介している「Nishiki Pro」では、テーマ独自のブロックに「アニメーション」があります。
「Snow Monkey」のサイトで公開しているプラグインでもブロックごとにアニメーション設定できます。
今回ご紹介する「Blocks Animation: CSS Animations for Gutenberg Blocks」も、プラグインをインストールするだけでブロックにアニメーションを設定できるようになります。
動きで目を引くWebサイトが、とってもお手軽にできますよ。
「Blocks Animation: CSS Animations for Gutenberg Blocks」の導入と機能
インストールして有効化すると、各ブロックのサイドメニューに「Animations」という項目が追加されます。
ここを設定して、ブロックに動きをつけていきます。
設定内容は、
- Animation：アニメーションの種類（フェードインとか）
- Delay：アニメーションを開始するまでの時間
- Speed：アニメーションの速さ
の３つです。アニメーションの種類はすぐプレビューできますので、実際に動かしながら選べます。
「Blocks Animation: CSS Animations for Gutenberg Blocks」のメリット
プラグインで追加した独自ブロックは、そのプラグインを停止すると表示できなくなります。つまり、そのブロックを使い続け無いといけなくなってしまいます。
でも「Blocks Animation: CSS Animations for Gutenberg Blocks」は、既存のブロックにアニメーション設定を追加するだけなので、プラグインを停止しても、動かなくなるだけでブロック自体は消滅しません。
これは地味にありがたいメリットです。例えば、不具合が発生してプラグインを削除しなければならないときも困らずにすみます。
このようになかなか便利なプラグインですので、一度試してみてはいかがでしょうか？
