Blocks Animation: CSS Animations for Gutenberg Blocks, a plugin that allows you to easily set animation effects for each block

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

公開日: コンテンツ追加 デザイン
Knowledge Base デザイン

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

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

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

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

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

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

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

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

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

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

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

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

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

  • テストサーバー:カラフルボックスブロックごとにアニメーション効果が簡単に設定できるプラグイン「Blocks Animation: CSS Animations for Gutenberg Blocks」
  • WordPressのバージョン:5.4.1
  • PHPのバージョン:7.3.11
  • テーマ:ha-Basic(オリジナルテーマ)
  • プラグインのバージョン:記事更新時のバージョン 1.0.5/最新バージョン 1.0.5

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のプラグイン公式配布ページがダウンロードしてからアップロードインストールします。

インストール方法の詳しい解説は

を参照ください

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

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

上の画像のように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対応サイトでもアニメーション効果がなくなるだけで、エラーを起こすことがありません。

Wordpress関連の本

いちばんやさしいWordPressの教本 第4版 5.x対応 人気講師が教 える本格Webサイトの作り方 (「いちばんやさしい教本」シリーズ)
インプレス
大きな画面の操作手順で迷わない。人気のテーマで、パソコン&スマホ両対応のWebサイトを作れる!ソーシャルメディアとの連携やSEO対策、バックアップなどの運用面も丁寧に解説。
できるWordPress WordPress Ver. 5.x対応 本格ホームページが簡単に作れる本 できるシリーズ
インプレス
WordPressは無料かつ高機能で、シェア率No.1のCMS(コンテンツ管理システム)です。その拡張性の高さから企業のホームページ制作にも利用されているほどで、ホームページで情報発信をするに当たって、個人でも本気度の高い方はWordPressを利用していることが多いです。本書はそんなWordPressの初期設定から制作、カスタマイズ、運用のノウハウまで幅広く学べる1冊です。
Knowledge Base Wordpress ha-Basic テーマ
  • 記事の作者: ひまあーと(管理人)

  • ☆最後までお読みいただきありがとうございました。記事作者のひまあーとです。
    ☆Wordpressでサイトをカスタマイズしていく上で有用な情報を配信しつつ、「ココナラ」でサイトカスタマイズのお手伝い、不具合の修復、サイト引っ越し代行などをさせていただいております。
    ☆Wordpressネタが多いですが、趣味の「園芸」「卓球」などの情報や日々の出来事などもどんどん増やしていきますのでよろしくお願いいたします。


いつでもご相談・サイトカスタマイズの依頼を受け付けています

Wordpressのカスタマイズ、不具合解消のご相談はすべてココナラのダイレクトメッセージからお受けしております。まずはこちらのバナーからお気軽にお問い合わせください。

※一度もココナラを使ったことがない方はココナラへの無料登録が必要です。こちらから登録後、上のリンクをクリックする、またはココナラトップページから「ひまあーと」を検索してお問い合わせください。


【スポンサーリンク】


記事の拡散にご協力をお願いします

閲覧いただきありがとうございました。役に立つ情報でしたら是非SNSでシェアをお願いします

関連情報