ブロックごとにアニメーション効果が簡単に設定できるプラグイン「Blocks Animation: CSS Animations for Gutenberg Blocks」

ブロックごとにアニメーション効果が簡単に設定できるプラグイン「Blocks Animation: CSS Animations for Gutenberg Blocks」

WordPress5.0から変更になった、投稿や固定ページの編集に使うエディタ、Gutenberg。旧来のエディタ時代から使っていた方にはなんだか変なのになったなぁ・・・なんて元に戻す方も多いと思います(私もその口でした)。でも使い慣れてくるとこれが結構便利!!今では管理するすべてのサイトでGutenberg使ってます。逆に旧エディタだと「あれ?これどうやるんだっけ?」と戸惑うようにもなってきました(笑)。

余談はさておき、今回紹介する「Blocks Animation: CSS Animations for Gutenberg Blocks」はGutenberg(ブロック)エディタ用に開発されたプラグイン。ほとんどのブロックへ個別に、かつ、簡単にアニメーション効果を持たせることができるプラグインです。

百聞は一見に如かず。まずはどんなことができるのか・・以下の公式ページのスクリーンショットをご覧ください。ちゃちゃっと選択するだけで、こんな風な表現ができるようになります。

ブロックごとにアニメーション効果が簡単に設定できるプラグイン「Blocks Animation: CSS Animations for Gutenberg Blocks」|Knowledge Base

上の画像は画像に対する効果のみを表示してますが、見出し、クラシック、段落などいろいろなブロックでもアニメーション効果が実装できます

通常のブロックにないものを追加する場合によくあるのが「特殊なブロックがセットになっていて、そのブロックを追加してコンテンツを作る」というプラグイン。もちろんそれらにもこうした特殊効果を持つブロックのあるものも多数ありますが、最大の難点は一度使いだしたらそのプラグインを停止できなくなること。効果がなくなるばかりでなく、プラグインを使って挿入したブロックが表示されなくなったりすることも・・・。

「Blocks Animation: CSS Animations for Gutenberg Blocks」は、今ある標準のブロックに対してアニメーション効果を付加するだけのものですので(詳しくは後述)、不要になってプラグインを停止しても、今までの投稿や固定ページから動きがなくなるだけで、前述した特殊ブロックを追加するプラグインと比べて単純な点がいいところでしょう。

【Blocks Animation: CSS Animations for Gutenberg Blocks】プラグインの用途や機能

特定のブロックだけに動きを持たせたデザインをしたい、しかもできるだけ簡単に設定したいという方にピッタリのプラグインです。

「え?こんなに簡単にできるの?」とびっくりすること間違いなしだと思います。

※このプラグインは、旧エディタ(ビジュアルエディタ・テキストエディタ)では機能しません。Gutenberg(ブロックエディタ)でのみ機能しますのでご注意ください。

この紹介記事を最後に編集したときの環境・バージョンなど

プラグインは製作者によって日々更新されていくため、この紹介記事が最新バージョンのものであるとは限りません。参考までにこの記事の最終更新日時点におけるテスト環境、プラグインバージョン、プラグイン導入時の留意点などを記載しておきます。

プラグインを使用(試用)したテスト環境

  • テストサーバー:カラフルボックス
  • WordPressのバージョン:5.8.1
  • PHPのバージョン:7.4(8.0でも動作確認しました)
  • テーマ:ha-Basic(オリジナルテーマ)
  • プラグインのバージョン:本記事で紹介しているバージョン1.1.0/最新バージョン 1.1.0
  • 公式サイト(wordpress.org上):https://wordpress.org/plugins/blocks-animation/
  • 公式サイト(作者サイト):

本記事を参考にWordPressサイトへプラグインの導入を検討される方へ

WordPressは古くから無料で配布されているサイト作成ツール(CMS)で、随時改良が加えられており、さまざまなバージョンが存在します。

さらにWordPressを動かすためのプログラムであるPHP、サイトのデータを保存しておくためのデータベースについても様々なバージョンがあります。

そしてWordPress本体同様にプラグインについてもさまざまなバージョンが存在します。

本記事を参考にプラグインの導入をお考えの方は、以下に留意の上でインストールするようにしてください。

  • テスト環境での動作に基づいた紹介記事ですので、すべての環境で正常に動作するかどうかは不明です
    ※本記事の内容についてはページ内に記載しているプラグインバージョンのものになります。現在のバージョンと異なる場合、機能などが異なる場合があります。
    ※また、テスト環境、テストしたプラグインバージョン等の表示が本文内にない場合、ページタイトル下にある最終更新日当時の情報となりますので、現在のバージョンでは全く違う機能となっているかも知れません。
  • プラグインに無料版と有料版(Pro版)がある場合、特に記載がなければ無料版の情報のみを紹介しています
  • このページでプラグインを使用する際に必要なショートコードやコードなどは、コピーして使用することができますが、環境によっては記号などが文字化けすることがあります。コピーしたのに動作しない場合は特に「”」「’」などの記号を入力し直してみてください。
  • プラグイン本体の動作不具合や質問などは公式サイトのフォーラムなどで行ってください(ここでは質問にお答えすることはできません)

【Blocks Animation: CSS Animations for Gutenberg Blocks】プラグインの設定画面や表示の日本語化と翻訳

【Blocks Animation: CSS Animations for Gutenberg Blocks】プラグインは言語の変更に未対応ですので表示のまま設定することになりますが、設定項目がありませんので特に翻訳しなくても設定できると思います。

【Blocks Animation: CSS Animations for Gutenberg Blocks】プラグインのインストールと設定

インストール方法

インストールはプラグインの新規追加でプラグイン名を入力して検索してインストールするか、WordPressのプラグイン公式配布ページからダウンロード後、管理画面からアップロードインストールしてください(プラグインの公式ページは本ページ内記載のリンクをクリック、もしくは、WordPress公式サイトで検索してください)。

WordPressを使い始めて間もない方(初心者の方)は、より詳細なプラグインのインストール手順や、インストール時に起こる問題などへの対処方法をまとめた【WordPress】プラグインのインストール&追加方法とエラー対処の方法も併せてご覧ください。

基本的な設定方法や使い方

このプラグインには設定項目がありません。ブロックエディタの編集画面で実際に設定していくだけです。

ブロックごとにアニメーション効果が簡単に設定できるプラグイン「Blocks Animation: CSS Animations for Gutenberg Blocks」|Knowledge Base

上の画像のようにGutenberg(ブロック)エディタの各ブロックへ「Animations」というサイドメニューが追加されます。

  • Animation・・・動作させる効果
  • Delay・・・その場所が表示されてから動作を開始するまでの時間
  • Speed・・・アニメーションの動作速度

の3つを設定するだけです。アニメーション効果の選択肢は英語ですが、ブロックエディタであればその場でどんな動きになるのかを確認できますから実際に試してみればいいかと思います。

※DelayとSpeedについてはプレビュー、または下書き保存後のプレビューで確認しないと実際の動きはわかりません

ブロックごとに異なる動作を簡単に指定できるが本当に便利だと思います。

冒頭でも書きましたが、特別にアニメーション効果のあるブロックを使うというようなプラグインではありませんから、プラグインを停止すれば特に何かを変更することなくアニメーション効果をストップさせることができます。

【Blocks Animation: CSS Animations for Gutenberg Blocks】プラグインの便利な使い方・カスタマイズ方法など

より便利に使うカスタマイズ技やテストサイトで使用した結果や感想、WordPressのプラグイン公式配布ページには書かれていない事柄などを紹介します。

モバイルで動作しないようにするには

このプラグインはアニメーション効果を追加したブロックの要素には特定のclass要素を付加して、それに対するデザイン要素とスクリプトが動作してアニメーション表示させるようになっています。したがって通常ではモバイル環境でも動作するようになっています。

狭い画面で動くのはちょっと・・という方は以下のコードを追加することでモバイル表示時のアニメーションをオフにすることができます(公式ページのサポート情報より)

/* Remove CSS animations on small screens */
@media only screen and (max-width : 599px) {
.animated {
-webkit-animation: none !important;
-moz-animation: none !important;
-o-animation: none !important;
-ms-animation: none !important;
animation: none !important;
visibility: visible !important;
}
}

また、前述したようにclassが付与されてもそれに対するデザイン要素(CSS)とスクリプトの読み込みがなければ動作しませんから、AMP対応サイトでもアニメーション効果がなくなるだけで、エラーを起こすことがありません。

トップページのみで動作するようにする

このプラグインを使う機会は、個別の投稿や固定ページというよりは、固定ページで作成したトップページだけという方が多いのかも知れません。

以下のコードをテーマのfunctions.phpへ追加することで、トップページ(is_front_page)のみこのプラグインのCSSを読み込ませることができるようになり、他のページでは余分なCSSの読み込みを削減することができます。

少しでも関係のないCSSとJSは読み込まないようにしたいという場合には有効でしょう。

/***** Blocks AnimationプラグインのCSSをトップページのみ適用 *****/
/* 一旦無効にする */
function habone_block_animation_dequeue(){
	wp_dequeue_style('animate-css');
	wp_dequeue_style('themeisle-gutenberg-animation-style');
	wp_dequeue_script('themeisle-gutenberg-animation-frontend');
}
add_action('wp_enqueue_scripts','habone_block_animation_dequeue');

/* トップページのみ有効にする */
function habone_block_animation_enqueue(){
	if(is_front_page()){
	wp_enqueue_style('animate-css');
	wp_enqueue_style('themeisle-gutenberg-animation-style');
	wp_enqueue_script('themeisle-gutenberg-animation-frontend');
}
}
add_action('wp_enqueue_scripts','habone_block_animation_enqueue');

上記コードはis_front_pageでフロントページ(トップページ)に限定していますが、その他の条件を足せば必要なページだけ読み込ませることができます。

コード追加後、きちんと読み込み(非読み込み)ができているかをソース上で確認ください

本記事の更新(変更)履歴

更新日更新内容
2020年 5月 8日記事公開しました
2021年10月14日バージョン1.1.0での試用を行いました
トップページのみCSSを読み込む方法を追加しました

サイトへの支援をお願いします

最後までお読みいただきありがとうございました。本記事の内容がお役に立てましたら幸いです。
今後もよりよい情報を提供し続けることができるよう、投げ銭によるサイトへの支援、およびSNSによる拡散をお願いします

作者:

☆最後までお読みいただきありがとうございました。記事作者のひまあーとです。
☆Wordpressでサイトをカスタマイズしていく上で有用な情報を配信しつつ、「ココナラ」でサイトカスタマイズのお手伝い、不具合の修復、サイト引っ越し代行などをさせていただいております。

年齢:40代 趣味/園芸・ペット・卓球